移动option标签
1 <%@ page language="java" pageEncoding="UTF-8"%> 2 <%@taglib uri="/struts-tags" prefix="s"%> 3 <html> 4 <head> 5 <title>导出设置</title> 6 <link href="${pageContext.request.contextPath }/css/Style.css" type="text/css" rel="stylesheet"> 7 <script type="text/javascript" src="${pageContext.request.contextPath }/script/function.js"></script> 8 <script type="text/javascript" src="${pageContext.request.contextPath }/script/jquery-1.4.2.js"></script> 9 <script type="text/javascript" > 10 11 /** 12 function Add() { 13 14 allRoles = document.getElementById("colname1"); 15 selectRoles = document.getElementById("colname2"); 16 17 for(var i =0;i<allRoles.options.length;i++){ 18 if(allRoles.options[i].selected==true){ 19 selectRoles.options.add( new Option(allRoles.options[i].text,allRoles.options[i].value)); 20 allRoles.remove(i); 21 i--; 22 } 23 } 24 25 } 26 27 function Remove() { 28 29 allRoles = document.getElementById("colname1"); 30 selectRoles = document.getElementById("colname2"); 31 32 for(var i =0;i<selectRoles.options.length;i++){ 33 if(selectRoles.options[i].selected==true){ 34 allRoles.options.add( new Option(selectRoles.options[i].text,selectRoles.options[i].value)); 35 selectRoles.remove(i); 36 i--; 37 } 38 } 39 } 40 function upcol() { 41 42 var rightcol = document.getElementById("colname2"); 43 var selectflag=0; 44 45 for(var i =0;i<rightcol.options.length;i++){ 46 47 if(rightcol.options[i].selected==true && i!=0){ 48 49 var temptext=rightcol.options[i].text; 50 var tempvalue=rightcol.options[i].value; 51 52 rightcol.options[i].value=rightcol.options[i-1].value; 53 rightcol.options[i].text=rightcol.options[i-1].text; 54 rightcol.options[i-1].value=tempvalue; 55 rightcol.options[i-1].text=temptext; 56 57 selectflag=i-1; 58 break; //这个标志表明目前只能一次移一行,不支持多选 59 } 60 } 61 62 for(var i =0;i<rightcol.options.length;i++){ 63 rightcol.options[i].selected=false; 64 } 65 rightcol.options[selectflag].selected=true; 66 } 67 function downcol() { 68 69 var rightcol = document.getElementById("colname2"); 70 var selectflag=0; 71 72 for(var i=0;i<rightcol.options.length;i++){ 73 74 if(rightcol.options[i].selected==true && i!=rightcol.options.length-1){ 75 76 var temptext=rightcol.options[i].text; 77 var tempvalue=rightcol.options[i].value; 78 79 rightcol.options[i].value=rightcol.options[i+1].value; 80 rightcol.options[i].text=rightcol.options[i+1].text; 81 rightcol.options[i+1].value=tempvalue; 82 rightcol.options[i+1].text=temptext; 83 84 selectflag=i+1; 85 break; //这个标志表明目前只能一次移一行,不支持多选 86 } 87 } 88 89 if(selectflag!=0){ //如果此标志为0,说明光标已经移到最下边,没有发生向下交换的行动 90 for(var i =0;i<rightcol.options.length;i++){ 91 rightcol.options[i].selected=false; 92 } 93 rightcol.options[selectflag].selected=true; 94 } 95 } 96 */ 97 98 function Add() { 99 $("#colname1 option:selected").appendTo($("#colname2")); 100 } 101 102 function Remove() { 103 $("#colname2 option:selected").appendTo($("#colname1")); 104 } 105 106 107 function upcol() { 108 //获取选中的右侧option元素 109 var rightcol = $("#colname2 option:selected"); 110 //option的第一个元素无法上移,rightcol.get(0)表示选中的option对象,rightcol.get(0).index表示option对象的位置索引,从0开始 111 if(rightcol.get(0).index!=0){ 112 rightcol.each(function(){ 113 $(this).prev().before($(this)); //在当前选中对象的前面插入该对象 114 //$(this).insertBefore($(this).prev());//等同于 115 }); 116 } 117 } 118 function downcol() { 119 //选择所有的对象 120 var allrightcol = $("#colname2 option"); 121 //选择被选中的对象 122 var rightcol = $("#colname2 option:selected"); 123 //option的最后一个元素无法下移 124 if(rightcol.get(rightcol.length-1).index!=allrightcol.length-1){ 125 //循环选中的对象 126 for(i=rightcol.length-1;i>=0;i--){ 127 //获取选中的对象 128 var item = $(rightcol.get(i)); 129 item.insertAfter(item.next()); //将选中的对象插入到下一个对象的后面 130 //item.next().after(item);//等同于 131 } 132 } 133 } 134 135 function setValue(){ 136 137 138 139 var rightcol = document.getElementById("colname2"); 140 var leftcol = document.getElementById("colname1"); 141 142 selectid=""; 143 selectname=""; 144 noselectid=""; 145 noselectname=""; 146 147 for(var m =0;m<rightcol.options.length;m++){ 148 if(m==rightcol.options.length-1){ 149 selectid+=rightcol.options[m].value; 150 selectname+=rightcol.options[m].text; 151 }else{ 152 selectid+=rightcol.options[m].value +"#"; 153 selectname+=rightcol.options[m].text +"#"; 154 } 155 } 156 157 for(var m =0;m<leftcol.options.length;m++){ 158 if(m==leftcol.options.length-1){ 159 noselectid+=leftcol.options[m].value; 160 noselectname+=leftcol.options[m].text; 161 }else{ 162 noselectid+=leftcol.options[m].value +"#"; 163 noselectname+=leftcol.options[m].text +"#"; 164 } 165 } 166 167 document.Form1.expNameList.value=selectname; 168 document.Form1.expFieldName.value=selectid; 169 document.Form1.noExpNameList.value=noselectname; 170 document.Form1.noExpFieldName.value=noselectid; 171 172 } 173 174 function checksubmit(){ 175 setValue(); 176 if(document.Form1.expNameList.value=="" || document.Form1.expFieldName.value==""){ 177 178 alert("请至少选择一列作为导出列"); 179 return; 180 } 181 182 document.Form1.action="system/elecExportFieldsAction_saveSetExportExcel.do"; 183 document.Form1.submit(); 184 } 185 186 </script> 187 </head> 188 189 <body onload="setValue()"> 190 <FORM id="Form1" name="Form1" method="POST" > 191 192 <br> 193 <table border="0" width="100%" cellspacing="0" cellpadding="0"> 194 <tr> 195 <td class="ta_01" align="center" background="${pageContext.request.contextPath }/images/b-info.gif"> 196 <font face="宋体" size="2"><strong>导出字段设置</strong></font> 197 </td> 198 </tr> 199 <tr height=10><td></td></tr> 200 201 <tr> 202 <td width="100%"> 203 <table border="0" width="100%" cellspacing="3" cellpadding="0"> 204 <tr height=10> 205 <TD width="1%"></TD> 206 <TD width="30%" class="DropShadow" align="left" background="${pageContext.request.contextPath }/images/cotNavGround.gif"><img src="${pageContext.request.contextPath }/images/yin.gif" width="15">未导出字段列表</TD> 207 <td width="16%" > 208 <TD width="34%" class="DropShadow" align="left" background="${pageContext.request.contextPath }/images/cotNavGround.gif"><img src="${pageContext.request.contextPath }/images/yin.gif" width="15">导出字段列表</TD> 209 <td width="19%"> 210 </tr> 211 212 <tr> 213 <td width="1%"></td> 214 <td width="84%" colspan="4"> 215 <table border="0" width="100%" cellspacing="0" cellpadding="0"> 216 <tr> 217 <td width="30%" rowspan="4"> 218 219 <s:select list="#request.noMap" name="colname1" id="colname1" 220 size="15" multiple="true" 221 cssStyle="width:200px" ondblclick="JavaScript:Add('colname1','colname2','colname')"> 222 </s:select> 223 </td> 224 <td width="15%"></td> 225 <td width="35%" rowspan="4" id="colnameDiv"> 226 227 <s:select list="#request.map" name="colname2" id="colname2" 228 size="15" multiple="true" 229 cssStyle="width:200px" 230 ondblclick="JavaScript:Remove('colname1','colname2','colname')"> 231 </s:select> 232 </td> 233 234 <td width="20%"></td> 235 </tr> 236 237 <tr> 238 <td width="90" align="center"> 239 <input name="DoAddb" type="button" value=">>" onClick="JavaScript:Add()" class=btn_mouseout onmouseover="this.className='btn_mouseover'" onmouseout="this.className='btn_mouseout'" style="width: 30px; font-size:12px; color:black; height=22"> 240 </td> 241 <td width="120" align="center"> 242 <input name="doup" type="button" value="向上" onClick="upcol()" class=btn_mouseout onmouseover="this.className='btn_mouseover'" onmouseout="this.className='btn_mouseout'" style="width: 50px; font-size:12px; color:black; height=22"> 243 </td> 244 </tr> 245 <tr> 246 <td width="90" align="center"> 247 <input name="DoDelb" type="button" value="<<" onClick="JavaScript:Remove()" class=btn_mouseout onmouseover="this.className='btn_mouseover'" onmouseout="this.className='btn_mouseout'" style="width: 30px; font-size:12px; color:black; height=22"> 248 </td> 249 <td width="120" align="center"> 250 <input name="dodown" type="button" value="向下" onClick="downcol()" class=btn_mouseout onmouseover="this.className='btn_mouseover'" onmouseout="this.className='btn_mouseout'" style="width: 50px; font-size:12px; color:black; height=22"> 251 </td> 252 </tr> 253 254 <tr><td width="73"> 255 <s:hidden name="belongTo" id="belongTo"></s:hidden> 256 <s:hidden name="expNameList" id="expNameList"></s:hidden> 257 <s:hidden name="expFieldName" id="expFieldName"></s:hidden> 258 <s:hidden name="noExpNameList" id="noExpNameList"></s:hidden> 259 <s:hidden name="noExpFieldName" id="noExpFieldName"></s:hidden> 260 </td></tr> 261 </table> 262 </td> 263 </tr> 264 </table> 265 </td> 266 </tr> 267 <tr height=10><td></td></tr> 268 <tr height=20><td background="${pageContext.request.contextPath }/images/b-info.gif"></td></tr> 269 <tr height=10><td></td></tr> 270 <tr><td align="center"><INPUT type="button" name="save" id="save" value="保存" onclick="checksubmit()" style="width: 60px; font-size:12px; color:black; height=22"> 271 272 <input style="width: 60px; font-size:12px; color:black; height=22" type="reset" value="关闭" id="Reset1" name="Reset1" onclick="window.close();"></td></tr> 273 </table> 274 </FORM> 275 </body> 276 </html>