基于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 EasyUI 为Combo,Combobox添加清除值功能的实例
Apr 13 jQuery
jQuery插件开发发送短信倒计时功能代码
May 09 jQuery
使用jQuery.Pin垂直滚动时固定导航
May 24 jQuery
jQuery EasyUI Layout实现tabs标签的实例
Sep 26 jQuery
jQuery实现form表单序列化转换为json对象功能示例
May 23 jQuery
Vue.js 通过jQuery ajax获取数据实现更新后重新渲染页面的方法
Aug 09 jQuery
jQuery仿移动端支付宝键盘的实现代码
Aug 15 jQuery
如何使用CSS3+JQuery实现悬浮墙式菜单
Jun 18 jQuery
js判断复选框是否选中的方法示例【基于jQuery】
Oct 10 jQuery
jQuery 隐藏/显示效果函数用法实例分析
May 20 jQuery
jQuery编写QQ简易聊天框
Aug 27 jQuery
JQuery Ajax如何实现注册检测用户名
Sep 25 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
如何在WIN2K下安装PHP4.04
2006/10/09 PHP
使用PHP静态变量当缓存的方法
2013/11/13 PHP
PHP获取youku视频真实flv文件地址的方法
2014/12/23 PHP
Symfony2学习笔记之控制器用法详解
2016/03/17 PHP
php 字符串中是否包含指定字符串的多种方法
2018/04/12 PHP
使用jQuery简化Ajax开发 Ajax开发入门
2009/10/14 Javascript
关于javascript DOM事件模型的两件事
2010/07/22 Javascript
FireFox下XML对象转化成字符串的解决方法
2011/12/09 Javascript
微信支付如何实现内置浏览器的H5页面支付
2015/09/25 Javascript
angularjs表格ng-table使用备忘录
2016/03/09 Javascript
js判断手机浏览器操作系统和微信浏览器的方法
2016/04/30 Javascript
javascript和jquery实现用户登录验证
2016/05/04 Javascript
jQuery+ajax的资源回收处理机制分析
2017/01/07 Javascript
vuex操作state对象的实例代码
2018/04/25 Javascript
JSON.stringify()方法讲解
2019/01/31 Javascript
layerui代码控制tab选项卡,添加,关闭的实例
2019/09/04 Javascript
如何HttpServletRequest文件对象并储存
2020/08/14 Javascript
利用Python命令行传递实例化对象的方法
2016/11/02 Python
Python+Selenium自动化实现分页(pagination)处理
2017/03/31 Python
浅谈关于Python3中venv虚拟环境
2018/08/01 Python
Python3.8对可迭代解包的改进及用法详解
2019/10/15 Python
Django更新models数据库结构步骤
2020/04/01 Python
Python接收手机短信的代码整理
2020/08/02 Python
HTML5 LocalStorage 本地存储刷新值还在
2017/03/10 HTML / CSS
法律专业应届生自荐信范文
2014/01/06 职场文书
2014两会学习心得:时代的发展
2014/03/17 职场文书
个人课题方案
2014/05/08 职场文书
活动倡议书范文
2014/05/13 职场文书
教师三严三实心得体会
2014/10/11 职场文书
2014年机关党委工作总结
2014/12/11 职场文书
求职信范文怎么写
2015/03/19 职场文书
2016国培学习心得体会
2016/01/08 职场文书
2016年社区植树节活动总结
2016/03/16 职场文书
react使用antd的上传组件实现文件表单一起提交功能(完整代码)
2021/06/29 Javascript
mysql 直接拷贝data 目录下文件还原数据的实现
2021/07/25 MySQL
Spring Data JPA框架Repository自定义实现
2022/04/28 Java/Android