@@ -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=" |
|
8 | <input type="button" value="→" | |
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="& |
|
10 | <input type="button" value="←" | |
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="↑" onclick="moveOptionUp(this.form.selected_columns);" /><br /> | |||
|
19 | <input type="button" value="↓" 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