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


Posted in jQuery onMay 02, 2018

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

基于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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jQuery ajax请求struts action实现异步刷新
Apr 19 jQuery
jQuery中的deferred对象和extend方法详解
May 08 jQuery
jQuery模拟实现天猫购物车动画效果实例代码
May 25 jQuery
jQuery Easyui Treegrid实现显示checkbox功能
Aug 08 jQuery
jQuery 中msgTips 顶部弹窗效果实现代码
Aug 14 jQuery
jQueryMobile之窗体长内容的缺陷与解决方法实例分析
Sep 20 jQuery
jquery 获取索引值在一定范围的列表方法
Jan 25 jQuery
jQuery实现数字自动增加或者减少的动画效果示例
Dec 11 jQuery
jQuery+Ajax+js实现请求json格式数据并渲染到html页面操作示例
Jun 02 jQuery
jQuery开发仿QQ版音乐播放器
Jul 10 jQuery
Jquery使用each函数实现遍历及数组处理
Jul 14 jQuery
jQuery加PHP实现图片上传并提交的示例代码
Jul 16 jQuery
jQuery实现遍历XML节点和属性的方法示例
Apr 29 #jQuery
jQuery实现的电子时钟效果完整示例
Apr 28 #jQuery
vue+jquery+lodash实现滑动时顶部悬浮固定效果
Apr 28 #jQuery
jQuery实现鼠标滑过商品小图片上显示对应大图片功能【测试可用】
Apr 27 #jQuery
jQuery实现DIV响应鼠标滑过由下向上展开效果示例【测试可用】
Apr 26 #jQuery
jQuery实现的点击标题文字切换字体效果示例【测试可用】
Apr 26 #jQuery
jQuery实现通过方向键控制div块上下左右移动的方法【测试可用】
Apr 26 #jQuery
You might like
刚才在简化php的库,结果发现很多东西
2006/12/31 PHP
网站用php实现paypal整合方法
2010/11/28 PHP
火狐下table中创建form导致两个table之间出现空白
2013/09/02 Javascript
详解jQuery中的empty、remove和detach
2016/04/11 Javascript
学习使用bootstrap基本控件(table、form、button)
2016/04/12 Javascript
AngularJS实践之使用ng-repeat中$index的注意点
2016/12/22 Javascript
Bootstrap表单使用方法详解
2017/02/17 Javascript
w3c编程挑战_初级脚本算法实战篇
2017/06/23 Javascript
利用node.js实现反向代理的方法详解
2017/07/24 Javascript
JavaScript html5 canvas实现图片上画超链接
2017/10/20 Javascript
JS排序算法之希尔排序与快速排序实现方法
2017/12/12 Javascript
uni app仿微信顶部导航条功能
2019/09/17 Javascript
如何解决vue在ios微信&quot;复制链接&quot;功能问题
2020/03/26 Javascript
微信小程序实现watch监听
2020/06/04 Javascript
微信小程序实现自定义动画弹框/提示框的方法实例
2020/11/06 Javascript
vuex页面刷新导致数据丢失的解决方案
2020/12/10 Vue.js
js实现随机点名功能
2020/12/23 Javascript
[03:12]完美世界DOTA2联赛PWL DAY7集锦
2020/11/06 DOTA
python机器学习实战之K均值聚类
2017/12/20 Python
python 获取utc时间转化为本地时间的方法
2018/12/31 Python
python base64库给用户名或密码加密的流程
2020/01/02 Python
python重要函数eval多种用法解析
2020/01/14 Python
python 发送邮件的示例代码(Python2/3都可以直接使用)
2020/12/03 Python
VSCode中autopep8无法运行问题解决方案(提示Error: Command failed,usage)
2021/03/02 Python
HTML5 实战PHP之Web页面表单设计
2011/10/09 HTML / CSS
浅谈基于Canvas的手绘风格图形库Rough.js
2018/03/19 HTML / CSS
澳大利亚冒险体验:Adrenaline(跳伞、V8赛车、热气球等)
2017/09/18 全球购物
乌克兰电子产品和家用电器购物网站:TOUCH
2019/08/09 全球购物
我能否用void** 指针作为参数, 使函数按引用接受一般指针
2013/02/16 面试题
应用艺术毕业生的自我评价
2013/12/04 职场文书
药学专业学生的自我评价分享
2014/02/06 职场文书
六一儿童节新闻稿
2015/07/17 职场文书
怎样评估创业计划书是否有可行性?
2019/08/07 职场文书
Python帮你解决手机qq微信内存占用太多问题
2022/02/15 Python
Python与C++中梯度方向直方图的实现
2022/03/17 Python
SpringBoot集成MongoDB实现文件上传的步骤
2022/04/18 MongoDB