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代码经典广告
Oct 21 Javascript
jquery 上下滚动广告
Jun 17 Javascript
Javascript Memoizer浅析
Oct 16 Javascript
jQuery元素选择器用法实例
Dec 23 Javascript
js实现对table动态添加、删除和更新的方法
Feb 10 Javascript
基于jquery步骤进度条源码分享
Nov 12 Javascript
javascript实现省市区三级联动下拉框菜单
Nov 17 Javascript
jQuery实现查找链接文字替换属性的方法
Jun 27 Javascript
javascript简单实现跟随滚动条漂浮的返回顶部按钮效果
Aug 19 Javascript
基于react框架使用的一些细节要点的思考
May 31 Javascript
JavaScript实现为事件句柄绑定监听函数的方法分析
Nov 14 Javascript
electron中使用bootstrap的示例代码
Nov 06 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+xml结合Ajax实现点赞功能完整实例
2015/01/30 PHP
PHP Curl模拟登录微信公众平台、新浪微博实例代码
2016/01/28 PHP
FleaPHP框架数据库查询条件($conditions)写法总结
2016/03/19 PHP
PHP抽象类与接口的区别详解
2019/03/21 PHP
网上应用的一个不错common.js脚本
2007/08/08 Javascript
使用jquery获取网页中图片高度的两种方法
2013/09/26 Javascript
js保留小数点后几位的写法
2014/01/03 Javascript
iframe窗口高度自适应的实现方法
2014/01/08 Javascript
javascript中clipboardData对象用法详解
2015/05/13 Javascript
实例详解Nodejs 保存 payload 发送过来的文件
2016/01/14 NodeJs
详解Vue.js——60分钟组件快速入门(上篇)
2016/12/05 Javascript
浅谈jQuery中事情的动态绑定
2017/02/12 Javascript
Angularjs中使用轮播图指令swiper
2017/05/30 Javascript
ES6深入理解之“let”能替代”var“吗?
2017/06/28 Javascript
vue 添加vux的代码讲解
2017/11/30 Javascript
解决axios发送post请求返回400状态码的问题
2018/08/11 Javascript
NodeJS如何实现同步的方法示例
2018/08/24 NodeJs
JS调用安卓手机摄像头扫描二维码
2018/10/16 Javascript
JavaScript寄生组合式继承原理与用法分析
2019/01/11 Javascript
vue配置nprogress实现页面顶部进度条
2019/09/21 Javascript
基于VUE实现判断设备是PC还是移动端
2020/07/03 Javascript
[01:32]DOTA2 2015国际邀请赛中国区预选赛第四日战报
2015/05/29 DOTA
python 矩阵增加一行或一列的实例
2018/04/04 Python
Python3.5多进程原理与用法实例分析
2019/04/05 Python
Python redis操作实例分析【连接、管道、发布和订阅等】
2019/05/16 Python
python批量修改图片尺寸,并保存指定路径的实现方法
2019/07/04 Python
在Python中使用MongoEngine操作数据库教程实例
2019/12/03 Python
2020最新pycharm汉化安装(python工程狮亲测有效)
2020/04/26 Python
Python基础教程(一)——Windows搭建开发Python开发环境
2020/07/20 Python
英国儿童家具专卖店:GLTC
2016/09/24 全球购物
eDreams巴西:廉价机票,酒店优惠和度假套餐
2017/04/14 全球购物
Habitat家居英国官方网站:沙发、家具、照明、厨房和户外
2019/12/12 全球购物
制定岗位职责的原则
2013/11/08 职场文书
财务会计人员岗位职责
2013/11/30 职场文书
村安全生产责任书
2014/08/25 职场文书
交通事故委托书范本(2篇)
2014/09/21 职场文书