基于jquery实现左右上下移动效果


            最近再做报表时候，直接把全部字段都导出了，但这不太灵活。回忆老师讲过的项目做报表如下左右上下移功能灵活控制，所以就尝试下咯。



js代码





function selected(thiz) 

{ 

 var name = thiz.name; 

 if(name=="right") 

  $("select[name='left']").val(""); 

 else 

  $("select[name='right']").val(""); 

} 

function Shift(thiz) 

{ 

 var right = $("select[name='right']"); 

 var left = $("select[name='left']"); 

 if(thiz=="left" && right.val() != ""){ 

  lrShift(right,left); 

 }else if(thiz=="right" && left.val() != ""){ 

  lrShift(left,right); 

 } 

 

 //获取选中的值 

} 

//从dest移动到target 

function lrShift(dest,target) 

{ 

 var childrens = dest.children(); 

 var args = ""; 

 //alert(dest.val()); 

 var dests = dest.val() 

 for(var x = 0; x < dests.length; x++) 

 { 

  var vaTemp = dests[x]; 

  target.append("<option value='"+vaTemp+"'>"+vaTemp+"</option>");//追加 

  target.find("option[value='"+vaTemp+"']").attr("selected",true);//给追加获取焦点 

  for(var y = 0; y <childrens.length;y++ )//删除选中的元素 

  { 

   if(childrens.get(y).value==vaTemp) 

    $(childrens.get(y)).remove(); 

  } 

 } 

 dest.val(""); 

} 

function ShiftValue(address) 

{ 

 var right = $("select[name='right']"); 

 var left = $("select[name='left']"); 

 if(right.val()!=null) 

  shift(right,address); 

 else if(left.val()!=null) 

  shift(left,address); 

} 

function shift(obj,address){ 

  //获取选中的值 

  var objData = obj.val(); 

  var childrens = obj.children(); 

  var strs = ""; 

  for(var x = 0; x < objData.length; x++) 

  { 

   strs+="@"+objData[x]; 

  } 

 

  //获取要添加位置对象 

  var temp = null; 

  if(address=="top"){ 

   var number = findSelect(childrens,objData[0]); 

   if((--number) < 0) 

    return; 

   temp = childrens.get(number); 

  } 

  else{ 

   var number = findSelect(childrens,objData[objData.length-1]); 

   if((++number) > childrens.length-1) 

    return; 

   temp = childrens.get(number); 

  } 

 

  //删除选中的值 

  var n = 0; 

  var buffer = new Array(childrens.length-objData.length); 

  for(var x = 0; x < childrens.length;x++) 

  { 

   var value = childrens.get(x).value; 

   if(strs.indexOf(value)==-1) 

    buffer[n++] = value; 

  } 

 

  //添加新排序的值 

  obj.empty(); 

  if(address=="top") 

  { 

   for(var y = 0; y < buffer.length;y++) 

   { 

    if(buffer[y]==temp.value) 

    { 

     for(var x = 0; x < objData.length ; x++) 

     { 

      obj.append("<option>"+objData[x]+"</option>"); 

     } 

    } 

    obj.append("<option>"+buffer[y]+"</option>"); 

   } 

  }else{ 

   for(var y = 0; y < buffer.length;y++) 

   { 

    obj.append("<option>"+buffer[y]+"</option>"); 

    if(buffer[y]==temp.value) 

    { 

     for(var x = 0; x < objData.length; x++) 

     { 

      obj.append("<option>"+objData[x]+"</option>"); 

     } 

    } 

   } 

  } 

  //选中值 

  obj.val(objData); 

} 

function findSelect(selects,objValue) 

{ 

 var number = -1; 

 for(var x = 0; x < selects.length; x++) 

 { 

  if(objValue==selects.get(x).value) 

   number = x; 

 } 

 return number; 

} 



页面调用







<div> 

  <div> 

   <b>未导出字段</b> 

  </div> 

  <div style="float:left;"> 

   <select name="left" multiple="multiple" onchange="selected(this)" style="height:350px;width:200px;"> 

    <option value="姓名">姓名</option> 

    <option value="快件号">快件号</option> 

    <option value="快递公司">快递公司</option> 

    <option value="首重">首重</option> 

    <option value="续重">续重</option> 

   </select> 

  </div> 

 </div> 

 <div style="float:left;"> 

  <div style="margin:30px;margin-top:110px;">

   <input type="button" value="<<" onclick="Shift('left')"/>

  </div> 

  <div style="margin:30px;margin-top:30px;">

   <input type="button" value=">>" onclick="Shift('right')"/>

  </div> 

 </div> 

 <div style="margin-top:-20px;"> 

  <div style="margin-left:22%;"> 

   <b>需导出字段</b> 

  </div> 

  <div style="float:left;"> 

   <select name="right" multiple="multiple" onchange="selected(this)" style="height:350px;width:200px;"> 

    <option value="首价">首价</option> 

    <option value="续价">续价</option> 

    <option value="大大">大大</option> 

    <option value="小小">小小</option> 

   </select> 

  </div> 

 </div> 

 <div style="float:left;"> 

  <div style="margin:30px;margin-top:110px;">

   <input type="button" value="向上" onclick="ShiftValue('top')" />

   </div> 

  <div style="margin:30px;margin-top:30px;">

   <input type="button" value="向下" onclick="ShiftValue('bottom')" />

  </div> 

 </div> 



以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持中文源码网。