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 相关文章推荐
event.X和event.clientX的区别分析
Oct 06 Javascript
window.location不跳转的问题解决方法
Apr 17 Javascript
将HTML的左右尖括号等转义成实体形式的两种实现方式
May 04 Javascript
学习JavaScript设计模式(单例模式)
Nov 26 Javascript
基于d3.js实现实时刷新的折线图
Aug 03 Javascript
漂亮! js实现颜色渐变效果
Aug 12 Javascript
Vue.js每天必学之方法与事件处理器
Sep 06 Javascript
jQuery插件zTree实现单独选中根节点中第一个节点示例
Mar 08 Javascript
JavaScript用200行代码制作打飞机小游戏实例
Jun 21 Javascript
vue2.0移除或更改的一些东西(移除index key)
Aug 28 Javascript
JavaScript中的几种继承方法示例
Dec 06 Javascript
详解template标签用法(含vue中的用法总结)
Jan 12 Vue.js
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
php字符比较函数similar_text、strnatcmp与strcasecmp用法分析
2014/11/18 PHP
用PHP生成excel文件到指定目录
2015/06/22 PHP
php实现向javascript传递数组的方法
2015/07/27 PHP
PHP call_user_func和call_user_func_array函数的简单理解与应用分析
2019/11/25 PHP
jquery autocomplete自动完成插件的的使用方法
2010/08/07 Javascript
用JQuery实现表格隔行变色和突出显示当前行的代码
2012/02/10 Javascript
table对象中的insertRow与deleteRow使用示例
2014/01/26 Javascript
实现checkbox全选、反选、取消JavaScript小脚本异常
2014/04/10 Javascript
jquery 操作css样式、位置、尺寸方法汇总
2014/11/28 Javascript
Bootstrap入门书籍之(一)排版
2016/02/17 Javascript
node.js使用cluster实现多进程
2016/03/17 Javascript
javascript运算符——逻辑运算符全面解析
2016/06/27 Javascript
javascript中的 object 和 function小结
2016/08/14 Javascript
全屏滚动插件fullPage.js使用实例解析
2016/10/21 Javascript
js, jQuery实现全选、反选功能
2017/03/08 Javascript
AngularJS 单选框及多选框的双向动态绑定
2017/04/20 Javascript
JavaScript编程设计模式之观察者模式(Observer Pattern)实例详解
2017/10/25 Javascript
基于模板引擎Jade的应用(详解)
2017/12/12 Javascript
小程序如何支持使用 async/await详解
2019/09/12 Javascript
JS原型对象操作实例分析
2020/06/06 Javascript
Python部署web开发程序的几种方法
2017/05/05 Python
Python查找文件中包含中文的行方法
2018/12/19 Python
解决Python计算矩阵乘向量,矩阵乘实数的一些小错误
2019/08/26 Python
Python 实现Image和Ndarray互相转换
2020/02/19 Python
详解用Python进行时间序列预测的7种方法
2020/03/13 Python
python网络编程:socketserver的基本使用方法实例分析
2020/04/09 Python
详解Java中一维、二维数组在内存中的结构
2021/02/11 Python
实习老师个人总结的自我评价
2013/09/28 职场文书
小学教师自我鉴定
2013/11/07 职场文书
行政主管岗位职责
2013/11/18 职场文书
大学本科毕业生的自我鉴定
2013/11/26 职场文书
家长必看:义务教育,不得以面试 评测等名义选拔学生
2019/07/09 职场文书
PHP实现创建以太坊钱包转账等功能
2021/04/21 PHP
MySQL 如何设计统计数据表
2021/06/15 MySQL
我收到了德劲DE1107
2022/04/05 无线电
详解SQL的窗口函数
2022/04/21 Oracle