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 相关文章推荐
利用js跨页面保存变量做菜单的方法
Jan 17 Javascript
jquery 常用操作整理 基础入门篇
Oct 14 Javascript
js onkeypress与onkeydown 事件区别详细说明
Dec 13 Javascript
js或者jquery判断图片是否加载完成实现代码
Mar 20 Javascript
单击和双击事件的冲突处理示例代码
Apr 03 Javascript
node.js回调函数之阻塞调用与非阻塞调用
Nov 13 Javascript
JS日期对象简单操作(获取当前年份、星期、时间)
Oct 26 Javascript
JS常见算法详解
Feb 28 Javascript
使用JavaScript实现点击循环切换图片效果
Sep 03 Javascript
JS实现的简单表单验证功能完整实例
Oct 14 Javascript
vue.js与后台数据交互的实例讲解
Aug 08 Javascript
vue表单中遍历表单操作按钮的显示隐藏示例
Oct 30 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
PHP实现的简单路由和类自动加载功能
2018/03/13 PHP
jquery中dom操作和事件的实例学习 下拉框应用
2011/12/01 Javascript
用按钮控制iframe显示的网页实现方法
2013/02/04 Javascript
jQuery DOM操作实例
2014/03/05 Javascript
jquery仿百度百科底部浮动导航特效
2015/08/08 Javascript
JavaScript的Number对象的toString()方法
2015/12/18 Javascript
解析JavaScript面向对象概念中的Object类型与作用域
2016/05/10 Javascript
JQuery解析XML数据的几个简单实例
2016/05/18 Javascript
BootStrap智能表单实战系列(九)表单图片上传的支持
2016/06/13 Javascript
jQuery.ajax实现根据不同的Content-Type做出不同的响应
2016/11/03 Javascript
自动适应iframe右边的高度
2016/12/22 Javascript
JS简单判断函数是否存在的方法
2017/02/13 Javascript
Bootstrap警告框(Alert)插件使用方法
2017/03/21 Javascript
详解angularjs跨页面传参遇到的一些问题
2018/11/01 Javascript
微信小程序组件传值图示过程详解
2019/07/31 Javascript
VueJS实现用户管理系统
2020/05/29 Javascript
[52:52]DOTA2上海特级锦标赛C组资格赛#1 OG VS LGD第三局
2016/02/27 DOTA
python 控制语句
2011/11/03 Python
Python实现给qq邮箱发送邮件的方法
2015/05/28 Python
举例区分Python中的浅复制与深复制
2015/07/02 Python
浅谈Python类里的__init__方法函数,Python类的构造函数
2016/12/10 Python
python使用super()出现错误解决办法
2017/08/14 Python
TensorFlow数据输入的方法示例
2018/06/19 Python
Flask入门之上传文件到服务器的方法示例
2018/07/18 Python
python3.6.3转化为win-exe文件发布的方法
2018/10/31 Python
如何在django里上传csv文件并进行入库处理的方法
2019/01/02 Python
python3中的logging记录日志实现过程及封装成类的操作
2020/05/12 Python
西雅图的买手店:Totokaelo
2019/10/19 全球购物
幼儿园园长岗位职责
2013/11/26 职场文书
简单英文演讲稿
2014/01/01 职场文书
幼儿园开学寄语
2014/04/03 职场文书
2014年医院工作总结
2014/11/20 职场文书
思想政治表现评语
2015/01/04 职场文书
十一月早安语录:把心放轻,人生就是一朵自在的云
2019/11/04 职场文书
react使用antd的上传组件实现文件表单一起提交功能(完整代码)
2021/06/29 Javascript
JS数组去重详情
2021/11/07 Javascript