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 相关文章推荐
JQuery实现自定义对话框的代码
Jun 15 Javascript
picChange 图片切换特效的函数代码
May 06 Javascript
jQuery实现html元素拖拽
Jul 21 Javascript
jquery实现像栅栏一样左右滑出式二级菜单效果代码
Aug 24 Javascript
JQuery点击事件回到页面顶部效果的实现代码
May 24 Javascript
基于JS代码实现图片在页面中旋转效果
Jun 16 Javascript
基于JavaScript实现点击页面任何位置返回
Aug 31 Javascript
JS去除重复并统计数量的实现方法
Dec 15 Javascript
Vue.js进阶知识点总结
Apr 01 Javascript
JQuery模拟实现网页中自定义鼠标右键菜单功能
Nov 14 jQuery
JavaScript如何借用构造函数继承
Nov 06 Javascript
javascrpt密码强度校验函数详解
Mar 18 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
Terran兵种对照表
2020/03/14 星际争霸
PHP静态新闻列表自动生成代码
2007/06/14 PHP
PHP操作mysql函数详解,mysql和php交互函数
2011/05/19 PHP
php对图像的各种处理函数代码小结
2013/07/08 PHP
在PHP上显示JFreechart画的统计图方法
2013/11/03 PHP
PHP实现redis限制单ip、单用户的访问次数功能示例
2018/06/16 PHP
一段利用WSH修改和查看IP配置的代码
2008/05/11 Javascript
javascript 正则替换 replace(regExp, function)用法
2010/05/22 Javascript
超越Jquery_01_isPlainObject分析与重构
2010/10/20 Javascript
jQuery1.6 类型判断实现代码
2011/09/01 Javascript
简单易用的倒计时js代码
2014/08/04 Javascript
JavaScript中的console.trace()函数介绍
2014/12/29 Javascript
JavaScript实现点击按钮切换网页背景色的方法
2015/10/17 Javascript
jquery点击回车键实现登录效果并默认焦点的方法
2018/03/09 jQuery
layer弹出子iframe层父子页面传值的实现方法
2018/11/22 Javascript
[02:43]中国五虎出征TI3视频
2013/08/02 DOTA
python类定义的讲解
2013/11/01 Python
Python处理JSON数据并生成条形图
2016/08/05 Python
python中文件变化监控示例(watchdog)
2017/10/16 Python
python批量替换页眉页脚实例代码
2018/01/22 Python
python求质数的3种方法
2018/09/28 Python
pycharm 解除默认unittest模式的方法
2018/11/30 Python
完美解决Python matplotlib绘图时汉字显示不正常的问题
2019/01/29 Python
python实现小球弹跳效果
2019/05/10 Python
Python 获取命令行参数内容及参数个数的实例
2019/12/20 Python
PyCharm如何导入python项目的方法
2020/02/06 Python
python实现图像全景拼接
2020/03/27 Python
解决Opencv+Python cv2.imshow闪退问题
2020/04/24 Python
关于tensorflow softmax函数用法解析
2020/06/30 Python
详解Pycharm第三方库的安装及使用方法
2020/12/29 Python
Sneaker Studio罗马尼亚网站:购买运动鞋
2018/11/04 全球购物
毕业生动漫设计求职信
2013/10/11 职场文书
大学军训感言1500字
2014/03/09 职场文书
2015年事业单位工作总结
2015/04/27 职场文书
迎新生晚会主持词
2015/06/30 职场文书
2016年庆“七一”主题党日活动总结
2016/04/05 职场文书