基于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实现二级联动效果
Mar 30 jQuery
jQuery响应滚动条事件功能示例
Oct 14 jQuery
简单实现jQuery弹窗效果
Oct 30 jQuery
基于jQuery解决ios10以上版本缩放问题
Nov 03 jQuery
jQuery实现的电子时钟效果完整示例
Apr 28 jQuery
jQuery实现仿京东防抖动菜单效果示例
Jul 06 jQuery
jQuery实现输入框的放大和缩小功能示例
Jul 21 jQuery
vue-cli 引入jQuery,Bootstrap,popper的方法
Sep 03 jQuery
为jquery的ajax请求添加超时timeout时间的操作方法
Sep 04 jQuery
[jQuery] 事件和动画详解
Mar 05 jQuery
jQuery--遍历操作实例小结【后代、同胞及过滤】
May 22 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插入mysql数据返回id的方法
2018/05/31 PHP
PHP实现微信对账单处理
2018/10/01 PHP
自动更新作用
2006/10/08 Javascript
Using the TextRange Object
2006/10/14 Javascript
Javascript操作cookie的函数代码
2012/10/03 Javascript
jquery选择器的选择使用及性能介绍
2013/01/16 Javascript
php is_numberic函数造成的SQL注入漏洞
2014/03/10 Javascript
javaScript中slice函数用法实例分析
2015/06/08 Javascript
AngularJS轻松实现双击排序的功能
2016/08/30 Javascript
详解JS中的attribute属性
2017/04/25 Javascript
vue与TypeScript集成配置最简教程(推荐)
2017/10/17 Javascript
React Native基础入门之初步使用Flexbox布局
2018/07/02 Javascript
CKEditor扩展插件:自动排版功能autoformat插件实现方法详解
2020/02/06 Javascript
antd Select下拉菜单动态添加option里的内容操作
2020/11/02 Javascript
Python发送email的3种方法
2015/04/28 Python
django之session与分页(实例讲解)
2017/11/13 Python
用不到50行的Python代码构建最小的区块链
2017/11/16 Python
Python中py文件引用另一个py文件变量的方法
2018/04/29 Python
Python学习笔记之pandas索引列、过滤、分组、求和功能示例
2019/06/03 Python
pycharm编写spark程序,导入pyspark包的3中实现方法
2019/08/02 Python
PyCharm更改字体和界面样式的方法步骤
2019/09/27 Python
PyCharm专业最新版2019.1安装步骤(含激活码)
2019/10/09 Python
HTML5中的网络存储实现方式
2020/04/28 HTML / CSS
南京某公司笔试题
2013/01/27 面试题
当当网软件测试笔试题
2015/11/24 面试题
写给女朋友的检讨书
2014/01/28 职场文书
领导干部考察材料
2014/02/08 职场文书
户外拓展活动方案
2014/02/11 职场文书
会计岗位描述
2014/02/22 职场文书
《天安门广场》教学反思
2014/04/23 职场文书
2014年廉洁自律承诺书
2014/05/26 职场文书
群众路线学习心得体会范文
2014/11/05 职场文书
杜甫草堂导游词
2015/02/03 职场文书
入党转正申请报告
2015/05/15 职场文书
谁动了我的奶酪读书笔记
2015/06/30 职场文书
SQL语句中JOIN的用法场景分析
2021/07/25 SQL Server