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调试工具 Javascript Debug Toolkit 2.0.0版本发布
Dec 02 Javascript
iframe窗口高度自适应的实现方法
Jan 08 Javascript
js在IE与firefox的差异集锦
Nov 11 Javascript
node.js中的url.parse方法使用说明
Dec 10 Javascript
jQuery插件制作之全局函数用法实例
Jun 01 Javascript
jquery实现全选和全不选功能效果的实现代码【推荐】
May 05 Javascript
Angular2使用Angular CLI快速搭建工程(一)
May 21 Javascript
写给vue新手们的vue渲染页面教程
Sep 01 Javascript
详解webpack-dev-server 设置反向代理解决跨域问题
Apr 18 Javascript
JS在if中的强制类型转换方式
Jul 15 Javascript
Vue v-text指令简单使用方法示例
Sep 19 Javascript
vue使用recorder.js实现录音功能
Nov 22 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安全防范技巧分享
2011/11/03 PHP
学习YUI.Ext 第六天--关于树TreePanel(Part 2异步获取节点)
2007/03/10 Javascript
让getElementsByName适应IE和firefox的方法
2007/09/24 Javascript
ASP.NET jQuery 实例15 通过控件CustomValidator验证CheckBoxList
2012/02/03 Javascript
JS中sort函数排序用法实例分析
2016/06/16 Javascript
深入理解Node.js的HTTP模块
2016/10/12 Javascript
利用Javascript实现简单的转盘抽奖
2017/02/13 Javascript
浅析JS中的 map, filter, some, every, forEach, for in, for of 用法总结
2017/03/29 Javascript
Nodejs 发布自己的npm包并制作成命令行工具的实例讲解
2018/05/15 NodeJs
详解vue中router-link标签所必备了解的属性
2019/04/15 Javascript
es6中reduce的基本使用方法
2019/09/10 Javascript
[05:43]VG.R战队教练Mikasa专访:为目标从未停止战斗
2016/08/02 DOTA
python实现带声音的摩斯码翻译实现方法
2015/05/20 Python
Python正则替换字符串函数re.sub用法示例
2017/01/19 Python
Python 实现子类获取父类的类成员方法
2019/01/11 Python
python制作朋友圈九宫格图片
2019/11/03 Python
Python Dict找出value大于某值或key大于某值的所有项方式
2020/06/05 Python
python实现canny边缘检测
2020/09/14 Python
PyQt实现计数器的方法示例
2021/01/18 Python
详解HTML5中ol标签的用法
2015/09/08 HTML / CSS
Big Green Smile德国网上商店:提供各种天然产品
2018/05/23 全球购物
Diptyque英国官方网站:源自法国的知名香氛品牌
2019/08/28 全球购物
介绍一下gcc特性
2012/01/20 面试题
企业管理培训感言
2014/01/27 职场文书
求职信范文怎么写
2014/01/29 职场文书
《小熊住山洞》教学反思
2014/02/21 职场文书
专题组织生活会思想汇报
2014/10/01 职场文书
中学生思想品德评语
2014/12/31 职场文书
捐款感谢信
2015/01/20 职场文书
教师廉洁自律个人总结
2015/02/10 职场文书
2015年企业团支部工作总结
2015/05/21 职场文书
学历证明样本
2015/06/16 职场文书
2016幼儿园教师节新闻稿
2015/11/25 职场文书
2019公司管理制度
2019/04/19 职场文书
2020年个人安全保证书参考模板
2020/01/08 职场文书
python异常中else的实例用法
2021/06/15 Python