JQuery实现带排序功能的权限选择实例
本文实例讲述了JQuery实现带排序功能的权限选择。分享给大家供大家参考。具体实现方法如下：
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title></title>
<scriptsrc="jquery-1.6.2.min.js"type="text/javascript"></script>
<styletype="text/css">
select{width:100px;height:100px;float:left;margin:10px;}
#main{float:left;width:100px;text-align:center;margin:10px;}
#maininput{width:100px;}
</style>
<scripttype="text/javascript">
varmyJson=[{"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(vari=0;i<myJson.length;i++){
var$option=$("<optionsortID='"+myJson[i].id+"'value='"+myJson[i].Name+"'>"+
myJson[i].id+","+myJson[i].Name+"</option>");
$option.appendTo($leftSel);
}
$("#btnMoveLeft").click(function(){
var$selOptions=$("#leftSeloption:selected");
$selOptions.appendTo($("#rightSel")).attr("selected",false);
});
$("#btnMoveLeftAll").click(function(){
var$allLeftOptions=$("#leftSeloption");
$allLeftOptions.appendTo($("#rightSel")).attr("selected",false);
});
$("#btnMoveRight").click(function(){
var$selOptions=$("#rightSeloption:selected");
$selOptions.appendTo($leftSel).attr("selected",false);
});
$("#btnMoveRightAll").click(function(){
var$allRightOptions=$("#rightSeloption");
$allRightOptions.appendTo($leftSel).attr("selected",false);
});
$("#btnMoveLeftSort").click(function(){
//把右边列表的内容添加到左边，并按sortID属性进行排序
$("#rightSeloption").appendTo($("#leftSel"));
var$sortArray=$("#leftSeloption").sort(function(prev,next){
varprevSortID=parseInt(prev.sortID);
varnextSortID=parseInt(next.sortID);
if(prevSortID>nextSortID){
return1;//交换位置
}
else{
return-1;
}
});
$("#leftSel").empty().append($sortArray);
});
});
</script>
</head>
<body>
<selectid="leftSel"multiple="multiple">
</select>
<divid="main">
<inputid="btnMoveLeft"type="button"value="-->"/>
<inputid="btnMoveLeftAll"type="button"value="==>"/>
<inputid="btnMoveRight"type="button"value="<--"/>
<inputid="btnMoveRightAll"type="button"value="<=="/>
<inputid="btnMoveLeftSort"type="button"value="<--Sort"/>
</div>
<selectid="rightSel"multiple="multiple">
</select>
</body>
</html>
希望本文所述对大家的jQuery程序设计有所帮助。