基于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动态追加页面数据以及事件委托详解
May 06 jQuery
jQuery操作DOM_动力节点Java学院整理
Jul 04 jQuery
简述jQuery Easyui一些用法
Aug 01 jQuery
jQuery实现的表格前端排序功能示例
Sep 18 jQuery
jQuery实现table中两列CheckBox只能选中一个的示例
Sep 22 jQuery
jQuery 禁止表单用户名、密码自动填充功能
Oct 30 jQuery
bootstrap+jquery项目引入文件报错的解决方法
Jan 22 jQuery
jQuery实现的鼠标响应缓冲动画效果示例
Feb 13 jQuery
解决jQuery使用append添加的元素事件无效的问题
Aug 30 jQuery
为jquery的ajax请求添加超时timeout时间的操作方法
Sep 04 jQuery
jquery制作的移动端购物车效果完整示例
Feb 24 jQuery
JQuery基于FormData异步提交数据文件
Sep 01 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 5.0创建图形的巧妙方法
2010/10/12 PHP
PHP数字和字符串ID互转函数(类似优酷ID)
2014/06/30 PHP
浅谈php冒泡排序
2014/12/30 PHP
php实现二进制和文本相互转换的方法
2015/04/18 PHP
Laravel 6 将新增为指定队列任务设置中间件的功能
2019/08/06 PHP
TP5框架使用QueryList采集框架爬小说操作示例
2020/03/26 PHP
Add a Formatted Table to a Word Document
2007/06/15 Javascript
基于jquery的跨域调用文件
2010/11/19 Javascript
JQuery中如何传递参数如click(),change()等具体实现
2013/04/28 Javascript
Angularjs Promise实例详解
2018/03/15 Javascript
vue组件与复用详解
2018/04/08 Javascript
利用JavaScript的Map提升性能的方法详解
2019/08/14 Javascript
javascript实现函数柯里化与反柯里化过程解析
2019/10/08 Javascript
vue之延时刷新实例
2019/11/14 Javascript
Vue前端项目部署IIS的实现
2020/01/06 Javascript
JavaScript实现简单的图片切换功能(实例代码)
2020/04/10 Javascript
微信小程序使用GoEasy实现websocket实时通讯
2020/05/19 Javascript
jQuery编写QQ简易聊天框
2020/08/27 jQuery
python比较两个列表大小的方法
2015/07/11 Python
python创建列表和向列表添加元素的实现方法
2017/12/25 Python
python 构造三维全零数组的方法
2018/11/12 Python
Python 离线工作环境搭建的方法步骤
2019/07/29 Python
基于spring boot 日志(logback)报错的解决方式
2020/02/20 Python
python如何利用Mitmproxy抓包
2020/10/10 Python
利用python如何实现猫捉老鼠小游戏
2020/12/04 Python
中医专业职业生涯规划书范文
2014/01/04 职场文书
面试后感谢信怎么写
2014/02/01 职场文书
实验教师岗位职责
2014/02/13 职场文书
助人为乐模范事迹材料
2014/06/02 职场文书
派出所副所长四风问题个人整改措施思想汇报
2014/10/13 职场文书
离婚协议书范本
2015/01/26 职场文书
邀请函范文
2015/02/02 职场文书
2015年度班主任自我评价
2015/03/11 职场文书
2015年国际护士节演讲稿
2015/03/18 职场文书
禁毒心得体会范文
2016/01/15 职场文书
创业计划书之面包店
2019/09/17 职场文书