JQuery implementiert ein Beispiel für die Berechtigungsauswahl mit der Sortierfunktion

JQuery implementiert ein Beispiel für die Berechtigungsauswahl mit der Sortierfunktion_jquery

WBOY

Freigeben： 2016-05-16 15:58:39

Original

1461 Leute haben es durchsucht

Das Beispiel in diesem Artikel beschreibt, wie JQuery die Berechtigungsauswahl mit Sortierfunktion implementiert. Teilen Sie es als Referenz mit allen. Die spezifische Implementierungsmethode lautet wie folgt:

<!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>

Nach dem Login kopieren

Ich hoffe, dass dieser Artikel für alle bei der jQuery-Programmierung hilfreich sein wird.