JQuery实现带排序功能的权限选择实例

本文实例讲述了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程序设计有所帮助。

赞 (0)

相关推荐

  • jQuery之排序组件的深入解析

    jQuery之排序组件的深入解析

    1:排序(Sortable)组件可以将页面上的一组元素变成可排序的,可用于定义一个可排序的元素列表,然后,通过拖动鼠标可以调整元素在列表中的位置$('.selector').sortable(options);    简单实例: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transiti

  • jQuery表格排序组件-tablesorter使用示例

    jQuery表格排序组件-tablesorter使用示例

    一.引入文件 复制代码 代码如下: <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.tablesorter.js"></script> <!-- 引入以下样式则表头出现排序图标,同时引入图片 --> <

  • jquery实现表格本地排序的方法

    本文实例讲述了jquery实现表格本地排序的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server">     <title>jquery 表格排序</title>     <style type="text/css">         thead

  • jqueryUI里拖拽排序示例分析

    示例参考http://jsfiddle.net/KyleMit/Geupm/2/  (这个站需要FQ才能看到效果) 其实是jqueryUI官方购物车拖拽添加例子的增强版,就是在拖拽的时候增加了排序 这个是html代码 复制代码 代码如下: <div id="products"> <h1 class="ui-widget-header">Products</h1> <div id="catalog">

  • JQuery+Ajax实现数据查询、排序和分页功能

    之前很少会用javascript去实现页功能主要怕麻烦,但了解JQuery后这种想法发生了变化:有了这样的脚本组件就可以在编写脚本时方便和HTML隔离出来,这样编写高重用性的脚本就更方便.下面就是介绍在学习JQuery过程中编写的基于Ajax的数据查询.排序和分页功能的复用脚本,只要遵循脚本的某些规则描述HTML把脚本文件引入就可以方便实现以上描述的功能. 先看下实现功能的代码: /**应用脚本规则: 引用脚本: JQuery脚本和JQuery的form插件脚本 Form的ID: viewfor

  • 用jquery.sortElements实现table排序

    项目中要实现table排序的功能. 网上有很多解决方案,很多都基于jQuery. jquery.tablesorter,大小17KB,不过他的首页在ie10下兼容性有点问题. DataTables,大小75KB,功能强大,带分页,搜索等功能. 还有插件叫sortElements,很小巧,只有3KB,兼容性也不错,而且在Github上有818个星. 最后我选择用sortElements,实现很简单: 1. 引入jQuery 复制代码 代码如下: <script type="text/java

  • jquery 表格排序、实时搜索表格内容(附图)

    jquery 表格排序、实时搜索表格内容(附图)

    复制代码 代码如下: <table class="table-sort"> <thead> <tr> <th class="table-sort">First Name</th> <th class="table-sort">Last Name</th> <th class="table-sort">Email</th>

  • jquery实现的鼠标拖动排序Li或Table

    1.前端页面 复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="拖动排序Li或Table.aspx.cs" Inherits="拖动排序Li或Table" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http

  • 页面内容排序插件jSort使用方法

    页面内容排序插件jSort使用方法

    当页面列表内容很多的时候,我们可能需要将内容按照某个方式进行排序,比如按照字母或者大小等排序.本文将使用排序插件jSort来对页面内容进行排序. jSort插件可以对页面任何内容进行排序(tables, lists, div elements),跨浏览器兼容且非常轻巧. 运行效果图: XHTML 首先在head部分引入jquery库和jSort插件. <script type="text/javascript" src="http://ajax.googleapis.c

  • jQuery仿360导航页图标拖动排序效果代码分享

    jQuery仿360导航页图标拖动排序效果代码分享

    jquery实现360浏览器导航页图标拖动从新排序特效源码是一款模仿360浏览器导航页网站图标拖动排序的代码.本段代码适应于所有网页使用,有兴趣的朋友们可以学习一下. 运行效果图:                                         ----------------------查看效果 下载源码----------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 为大家分享的360导航页图标拖动排序效果代码如下 <!DOCTYPE

  • jQuery插件MixItUp实现动画过滤和排序

    什么是MixItUp? MixItUp是一个jQuery插件,提供动画过滤和排序. MixItUp是伟大的,像管理投资组合,画廊和博客的任何分类或排序的内容,而且还可以作为一个功能强大的工具,从事应用程序的用户界面和数据可视化. MixItUp起着很好的与您现有的HTML和CSS,使之成为响应布局的绝佳选择. 而不是用绝对定位来控制布局,MixItUp设计与现有的在线流布局工作.要使用百分比,媒体查询,inline-block的,甚至是弯曲盒子?没问题! 页面代码 <div id="Con

  • jquery对元素拖动排序示例

    完整代码:(aspx文件末尾有下载) 复制代码 代码如下: <!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> <

  • jQuery对JSON数据进行排序输出的方法

    本文实例讲述了jQuery对JSON数据进行排序输出的方法.分享给大家供大家参考.具体实现方法如下: $.getJSON('URl',function(data){ data.sort(function(a,b){return a.demoname-b.demoname}); for(i=0;i<data.length;i++){ alert(data[i].demoname) } }) 希望本文所述对大家的jQuery程序设计有所帮助.

随机推荐