##// END OF EJS Templates
Adds 2 buttons to easily reorder selected columns (#4272)....
Jean-Philippe Lang -
r2992:4c2264ee42ec
parent child
Show More
@@ -1,22 +1,26
1 <table style="border-collapse: collapse; border:0;">
1 <table style="border-collapse: collapse; border:0;">
2 <tr>
2 <tr>
3 <td style="padding-left:0"><%= select_tag 'available_columns',
3 <td style="padding-left:0"><%= select_tag 'available_columns',
4 options_for_select((query.available_columns - query.columns).collect {|column| [column.caption, column.name]}),
4 options_for_select((query.available_columns - query.columns).collect {|column| [column.caption, column.name]}),
5 :multiple => true, :size => 10, :style => "width:150px" %>
5 :multiple => true, :size => 10, :style => "width:150px" %>
6 </td>
6 </td>
7 <td align="center" valign="middle">
7 <td align="center" valign="middle">
8 <input type="button" value="--&gt;"
8 <input type="button" value="&#8594;"
9 onclick="moveOptions(this.form.available_columns, this.form.selected_columns);" /><br />
9 onclick="moveOptions(this.form.available_columns, this.form.selected_columns);" /><br />
10 <input type="button" value="&lt;--"
10 <input type="button" value="&#8592;"
11 onclick="moveOptions(this.form.selected_columns, this.form.available_columns);" />
11 onclick="moveOptions(this.form.selected_columns, this.form.available_columns);" />
12 </td>
12 </td>
13 <td><%= select_tag 'query[column_names][]',
13 <td><%= select_tag 'query[column_names][]',
14 options_for_select(query.columns.collect {|column| [column.caption, column.name]}),
14 options_for_select(query.columns.collect {|column| [column.caption, column.name]}),
15 :id => 'selected_columns', :multiple => true, :size => 10, :style => "width:150px" %>
15 :id => 'selected_columns', :multiple => true, :size => 10, :style => "width:150px" %>
16 </td>
16 </td>
17 <td align="center" valign="middle">
18 <input type="button" value="&#8593;" onclick="moveOptionUp(this.form.selected_columns);" /><br />
19 <input type="button" value="&#8595;" onclick="moveOptionDown(this.form.selected_columns);" />
20 </td>
17 </tr>
21 </tr>
18 </table>
22 </table>
19
23
20 <% content_for :header_tags do %>
24 <% content_for :header_tags do %>
21 <%= javascript_include_tag 'select_list_move' %>
25 <%= javascript_include_tag 'select_list_move' %>
22 <% end %>
26 <% end %>
@@ -1,55 +1,82
1 var NS4 = (navigator.appName == "Netscape" && parseInt(navigator.appVersion) < 5);
1 var NS4 = (navigator.appName == "Netscape" && parseInt(navigator.appVersion) < 5);
2
2
3 function addOption(theSel, theText, theValue)
3 function addOption(theSel, theText, theValue)
4 {
4 {
5 var newOpt = new Option(theText, theValue);
5 var newOpt = new Option(theText, theValue);
6 var selLength = theSel.length;
6 var selLength = theSel.length;
7 theSel.options[selLength] = newOpt;
7 theSel.options[selLength] = newOpt;
8 }
8 }
9
9
10 function swapOptions(theSel, index1, index2)
11 {
12 var text, value;
13 text = theSel.options[index1].text;
14 value = theSel.options[index1].value;
15 theSel.options[index1].text = theSel.options[index2].text;
16 theSel.options[index1].value = theSel.options[index2].value;
17 theSel.options[index2].text = text;
18 theSel.options[index2].value = value;
19 }
20
10 function deleteOption(theSel, theIndex)
21 function deleteOption(theSel, theIndex)
11 {
22 {
12 var selLength = theSel.length;
23 var selLength = theSel.length;
13 if(selLength>0)
24 if(selLength>0)
14 {
25 {
15 theSel.options[theIndex] = null;
26 theSel.options[theIndex] = null;
16 }
27 }
17 }
28 }
18
29
19 function moveOptions(theSelFrom, theSelTo)
30 function moveOptions(theSelFrom, theSelTo)
20 {
31 {
21
32
22 var selLength = theSelFrom.length;
33 var selLength = theSelFrom.length;
23 var selectedText = new Array();
34 var selectedText = new Array();
24 var selectedValues = new Array();
35 var selectedValues = new Array();
25 var selectedCount = 0;
36 var selectedCount = 0;
26
37
27 var i;
38 var i;
28
39
29 for(i=selLength-1; i>=0; i--)
40 for(i=selLength-1; i>=0; i--)
30 {
41 {
31 if(theSelFrom.options[i].selected)
42 if(theSelFrom.options[i].selected)
32 {
43 {
33 selectedText[selectedCount] = theSelFrom.options[i].text;
44 selectedText[selectedCount] = theSelFrom.options[i].text;
34 selectedValues[selectedCount] = theSelFrom.options[i].value;
45 selectedValues[selectedCount] = theSelFrom.options[i].value;
35 deleteOption(theSelFrom, i);
46 deleteOption(theSelFrom, i);
36 selectedCount++;
47 selectedCount++;
37 }
48 }
38 }
49 }
39
50
40 for(i=selectedCount-1; i>=0; i--)
51 for(i=selectedCount-1; i>=0; i--)
41 {
52 {
42 addOption(theSelTo, selectedText[i], selectedValues[i]);
53 addOption(theSelTo, selectedText[i], selectedValues[i]);
43 }
54 }
44
55
45 if(NS4) history.go(0);
56 if(NS4) history.go(0);
46 }
57 }
47
58
59 function moveOptionUp(theSel) {
60 var index = theSel.selectedIndex;
61 if (index > 0) {
62 swapOptions(theSel, index-1, index);
63 theSel.selectedIndex = index-1;
64 }
65 }
66
67 function moveOptionDown(theSel) {
68 var index = theSel.selectedIndex;
69 if (index < theSel.length - 1) {
70 swapOptions(theSel, index, index+1);
71 theSel.selectedIndex = index+1;
72 }
73 }
74
48 function selectAllOptions(id)
75 function selectAllOptions(id)
49 {
76 {
50 var select = $(id);
77 var select = $(id);
51 for (var i=0; i<select.options.length; i++) {
78 for (var i=0; i<select.options.length; i++) {
52 select.options[i].selected = true;
79 select.options[i].selected = true;
53 }
80 }
54 }
81 }
55
82
General Comments 0
You need to be logged in to leave comments. Login now