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----文件操作
Jan 18 Javascript
jquery 实现的全选和反选
Apr 15 Javascript
动态创建script在IE中缓存js文件时导致编码的解决方法
May 04 Javascript
js实现交换运动效果的方法
Apr 10 Javascript
在Node.js应用中读写Redis数据库的简单方法
Jun 30 Javascript
jQuery实现导航回弹效果
Feb 27 Javascript
vue+axios实现登录拦截的实例代码
May 22 Javascript
微信小程序之自定义组件的实现代码(附源码)
Aug 02 Javascript
vue刷新页面时去闪烁提升用户体验效果的实现方法
Dec 10 Javascript
使用preload预加载页面资源时注意事项
Feb 03 Javascript
vue使用better-scroll实现滑动以及左右联动
Jun 30 Javascript
浅谈vue使用axios的回调函数中this不指向vue实例,为undefined
Sep 21 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 使用redis简单示例分享
2015/03/05 PHP
php分页原理 分页代码 分页类制作教程
2016/09/23 PHP
php实现用户注册密码的crypt加密
2017/06/08 PHP
Yii2 中实现单点登录的方法
2018/03/09 PHP
php实现银联商务公众号+服务窗支付的示例代码
2019/10/12 PHP
jquery中attr和prop的区别分析
2015/03/16 Javascript
JavaScript保存并运算页面中数字类型变量的写法
2015/07/06 Javascript
jquery获取文档高度和窗口高度汇总
2016/01/25 Javascript
Javascript之面向对象--方法
2016/12/02 Javascript
详解AngularJS中$filter过滤器使用(自定义过滤器)
2017/02/04 Javascript
js实现无缝滚动图
2017/02/22 Javascript
vue实现提示保存后退出的方法
2018/03/15 Javascript
js实现左右两侧浮动广告
2018/07/09 Javascript
axios简单实现小程序延时loading指示
2018/07/30 Javascript
关于layui 下拉列表的change事件详解
2019/09/20 Javascript
JavaScript 浏览器对象模型BOM原理与常见用法实例分析
2019/12/16 Javascript
8个非常实用的Vue自定义指令
2020/12/15 Vue.js
pyv8学习python和javascript变量进行交互
2013/12/04 Python
Python logging模块学习笔记
2014/05/24 Python
python实现中文分词FMM算法实例
2015/07/10 Python
Python数据持久化shelve模块用法分析
2018/06/29 Python
Python将文本去空格并保存到txt文件中的实例
2018/07/24 Python
python训练数据时打乱训练数据与标签的两种方法小结
2018/11/08 Python
Python中的Socket 与 ScoketServer 通信及遇到问题解决方法
2019/04/01 Python
Python生成指定数量的优惠码实操内容
2019/06/18 Python
pytorch实现Tensor变量之间的转换
2020/02/17 Python
什么是python的自省
2020/06/21 Python
CSS3区域模块region相关编写示例
2015/08/28 HTML / CSS
美国汽车轮胎和轮毂销售网站:Tire Rack
2018/01/11 全球购物
ReVive利维肤美国官网:RéVive Skincare
2018/04/18 全球购物
德尔福集团DELPHI的笔试题
2012/02/22 面试题
幼师求职自荐信
2014/05/31 职场文书
行政执法作风整顿剖析材料
2014/10/11 职场文书
2015医德医风个人工作总结
2015/04/02 职场文书
小学音乐课歌曲《堆雪人》教学反思
2016/02/18 职场文书
Python调用腾讯API实现人脸身份证比对功能
2022/04/04 Python