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

前端技术 2023/09/03 JavaScript

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

本文地址：https://www.stayed.cn/item/7649

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案