JQuery实现带排序功能的权限选择实例


Posted in Javascript onMay 18, 2015

本文实例讲述了JQuery实现带排序功能的权限选择。分享给大家供大家参考。具体实现方法如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="jquery-1.6.2.min.js" type="text/javascript"></script>
<style type="text/css">
select{width:100px;height:100px;float:left;margin:10px;}    
#main{float:left;width:100px;text-align:center;margin:10px;}
#main input{width:100px;}
</style>
<script type="text/javascript">
var myJson = [{ "id": "1", "Name": "刘德华", "Age": "52" },
 { "id": "2", "Name": "文章", "Age": "26" },
 {"id":"3","Name":"孙红雷","Age":"40"},
 { "id": "4", "Name": "葛优", "Age": "58"}];
 $(function () {
  var $leftSel = $("#leftSel");
  for (var i = 0; i < myJson.length; i++) {
   var $option = $("<option sortID='" + myJson[i].id + "' value='" + myJson[i].Name + "'>" +
   myJson[i].id + "," + myJson[i].Name + "</option>");
   $option.appendTo($leftSel);
  }
  $("#btnMoveLeft").click(function () {
   var $selOptions = $("#leftSel option:selected");
   $selOptions.appendTo($("#rightSel")).attr("selected", false);
  });
  $("#btnMoveLeftAll").click(function () {
   var $allLeftOptions = $("#leftSel option");
   $allLeftOptions.appendTo($("#rightSel")).attr("selected", false);
  });
  $("#btnMoveRight").click(function () {
   var $selOptions = $("#rightSel option:selected");
   $selOptions.appendTo($leftSel).attr("selected", false);
  });
  $("#btnMoveRightAll").click(function () {
   var $allRightOptions = $("#rightSel option");
   $allRightOptions.appendTo($leftSel).attr("selected", false);
  });
  $("#btnMoveLeftSort").click(function () {
   //把右边列表的内容添加到左边,并按sortID属性进行排序
   $("#rightSel option").appendTo($("#leftSel"));
   var $sortArray = $("#leftSel option").sort(function (prev, next) {
    var prevSortID = parseInt(prev.sortID);
    var nextSortID = parseInt(next.sortID);
    if (prevSortID > nextSortID) {
 return 1;   //交换位置
    }
    else {
 return -1;
    }
   });
   $("#leftSel").empty().append($sortArray);
  });
});
</script>
</head>
<body>
<select id="leftSel" multiple="multiple">
</select>
<div id="main">
<input id="btnMoveLeft" type="button" value="-->" />
<input id="btnMoveLeftAll" type="button" value="==>" />
<input id="btnMoveRight" type="button" value="<--" />
<input id="btnMoveRightAll" type="button" value="<==" />
<input id="btnMoveLeftSort" type="button" value="<--Sort" />
</div>
<select id="rightSel" multiple="multiple">
</select>
</body>
</html>

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
用javascript动态调整iframe高度的方法
Mar 06 Javascript
js 页面执行时间计算代码
Mar 04 Javascript
带左右箭头图片轮播的JS代码
Dec 18 Javascript
ie浏览器使用js导出网页到excel并打印
Mar 11 Javascript
js使用心得分享
Jan 13 Javascript
js模仿java的Map集合详解
Jan 06 Javascript
基于BootStrap Metronic开发框架经验小结【七】数据的导入、导出及附件的查看处理
May 12 Javascript
Bootstrap 下拉多选框插件Bootstrap Multiselect
Jan 22 Javascript
socket.io与pm2(cluster)集群搭配的解决方案
Jun 02 Javascript
Vue2.0父子组件传递函数的教程详解
Oct 16 Javascript
JS实现的按钮点击颜色切换功能示例
Oct 19 Javascript
详解vue-video-player使用心得(兼容m3u8)
Aug 23 Javascript
JQuery中clone方法复制节点
May 18 #Javascript
分享十五款 jQuery 社交网络分享插件
May 16 #Javascript
JS+CSS实现仿触屏手机拨号盘界面及功能模拟完整实例
May 16 #Javascript
js实现精美的图片跟随鼠标效果实例
May 16 #Javascript
js实现精美的银灰色竖排折叠菜单
May 16 #Javascript
JavaScript实现鼠标滑过处生成气泡的方法
May 16 #Javascript
JavaScript中继承用法实例分析
May 16 #Javascript
You might like
JS实现php的伪分页
2008/05/25 PHP
介绍一些PHP判断变量的函数
2012/04/24 PHP
Codeigniter生成Excel文档的简单方法
2014/06/12 PHP
PHP中trim()函数简单使用指南
2015/04/16 PHP
js模拟select下拉菜单控件的代码
2013/05/08 Javascript
jquery.post用法关于type设置问题补充
2014/01/03 Javascript
JavaScript 表单处理实现代码
2015/04/13 Javascript
jQuery支持添加事件的日历特效代码分享(3种样式)
2015/08/24 Javascript
jQuery实现的鼠标滑过弹出放大图片特效
2016/01/08 Javascript
JavaScript缓冲运动实现方法(2则示例)
2016/01/08 Javascript
nodejs redis 发布订阅机制封装实现方法及实例代码
2016/12/15 NodeJs
详解js的延迟对象、跨域、模板引擎、弹出层、AJAX【附实例下载】
2016/12/19 Javascript
JavaScript标准对象_动力节点Java学院整理
2017/06/27 Javascript
微信小程序搭建(mpvue+mpvue-weui+fly.js)的详细步骤
2018/09/18 Javascript
解决IE11 vue +webpack 项目中数据更新后页面没有刷新的问题
2018/09/25 Javascript
nodejs通过钉钉群机器人推送消息的实现代码
2019/05/05 NodeJs
JS学习笔记之闭包小案例分析
2019/05/29 Javascript
微信小程序 flexbox layout快速实现基本布局的解决方案
2020/03/24 Javascript
深入分析jQuery.one() 函数
2020/06/03 jQuery
python抓取网页内容示例分享
2014/02/24 Python
在Python中处理字符串之isdigit()方法的使用
2015/05/18 Python
Python下的Softmax回归函数的实现方法(推荐)
2017/01/26 Python
python elasticsearch环境搭建详解
2019/09/02 Python
基于python的列表list和集合set操作
2019/11/24 Python
TensorFlow 显存使用机制详解
2020/02/03 Python
基于python实现把json数据转换成Excel表格
2020/05/07 Python
python获取linux系统信息的三种方法
2020/10/14 Python
css3 pointer-events 介绍详解
2017/09/18 HTML / CSS
简述Linux文件系统通过i节点把文件的逻辑结构和物理结构转换的工作过程
2016/01/06 面试题
毕业生在校学习的自我评价分享
2013/10/08 职场文书
2014年新生军训方案
2014/05/01 职场文书
社区务虚会发言材料
2014/10/20 职场文书
后备干部推荐材料
2014/12/24 职场文书
旷课检讨书范文
2015/01/27 职场文书
科技活动总结范文
2015/05/11 职场文书
浅谈Redis位图(Bitmap)及Redis二进制中的问题
2021/07/15 Redis