当前位置:  编程技术>jquery

JQuery 权限选择可排序

    来源: 互联网  发布时间:2014-10-04

    本文导语:  例子,JQuery 权限选择实现代码。   代码示例:     JQuery 权限选择                 select{width:100px;height:100px;float:left;margin:10px;}                #main{float:left;width:100px;text-align:center;margin:10px;}         #ma...

例子,JQuery 权限选择实现代码。
 

代码示例:




    JQuery 权限选择
   
   
        select{width:100px;height:100px;float:left;margin:10px;}       
        #main{float:left;width:100px;text-align:center;margin:10px;}
        #main input{width:100px;}
   
   
        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 = $("" +
                                                 myJson[i].id + "," + myJson[i].Name + "");
                               $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);
                           });
                       });
   


   
   
   


       
       
       
       
       
   

   
   


    
 
 
 
本站(WWW.)旨在分享和传播互联网科技相关的资讯和技术,将尽最大努力为读者提供更好的信息聚合和浏览方式。
本站(WWW.)站内文章除注明原创外,均为转载、整理或搜集自网络。欢迎任何形式的转载,转载请注明出处。












  • 相关文章推荐
  • jQuery日期选择插件 jQuery UI Datepicker
  • jQuery 行政区选择插件 jQuery distpicker
  • jQuery 日期选择插件 jQuery-datepicker
  • jQuery区间选择控件 jquery range picker
  • jQuery的选择器引擎 Sizzle
  • jQuery下拉选择插件 MagicCombo
  • jQuery颜色选择器 ExColor
  • jQuery 颜色选择器 mColorPicker
  • jQuery日期选择插件 glDatePicker
  • jQuery 的日期选择插件 jdPicker
  • jQuery颜色选择器插件 Farbtastic
  • jQuery时间选择插件 jTimepicker
  • jQuery 日期选择插件 pickadate.js
  • jQuery颜色选择器 iColorPicker
  • jQuery 日期选择插件 Zebra_Datepicker
  • jQuery 颜色选择器 Spectrum
  • 日期选择控件 jQuery DateInput
  • jQuery :visible 选择器(冒号)的用法
  • jQuery地区选择插件 LocationSelect
  • jQuery 颜色选择插件 evol.colorpicker
  • 通过javascript库JQuery实现页面跳转功能代码
  • jQuery鼠标动画插件 jquery-ahover
  • jQuery概述,代码举例及最新版下载
  • IP地址数字互转 iis7站长之家
  • Jquery操作html复选框checkbox:全选,全不选和反选
  • jQuery圆角插件 jQuery Corners
  • struts+spring+hibernate+jquery实现分页功能的几个基本类介绍(异步加载)
  • jQuery相册插件 jQuery.popeye
  • jQuery UI组件 jQuery UI
  • jQuery右键菜单插件 jQuery ContextMenu
  • jQuery分页插件 Pagination jQuery Plugin


  • 站内导航:


    特别声明:169IT网站部分信息来自互联网,如果侵犯您的权利,请及时告知,本站将立即删除!

    ©2012-2021,,E-mail:www_#163.com(请将#改为@)

    浙ICP备11055608号-3