Home > Web Front-end > JS Tutorial > body text

Implementation code for jquery to control the movement and sorting of items in listbox_jquery

WBOY
Release: 2016-05-16 18:19:00
Original
1134 people have browsed it

The first is the html code. Put 2 listbox controls and 2 buttons on the page for moving items

Copy code Code As follows:












All fruits: My pick:
< ;/asp:ListBox>







The following is to bind some data in the .cs file

Copy code The code is as follows:

public partial class _Default: System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
BindData();
}
}
private void BindData()
{
ArrayList list=DataArray();
for (int i = 0; i < list.Count; i )
{
listall.Items.Add(list[i].ToString());
listall.Items[i].Attributes["tag"] = i.ToString(); //Use tag to record sorting fields
}
}
private ArrayList DataArray()
{
//Some data used are sorted by the pinyin of the first word by default
ArrayList list = new ArrayList();
list.Add("Strawberry");
list.Add( "Pear");
list.Add("Orange");
list.Add("Mango");
list.Add("Apple");
list.Add("Banana ");
return list;
}
}



In actual use, it can be sorted according to the fields in the database
The following is jquery Code:


Copy code The code is as follows:

//Mobile users Selected role
//setname: the name of the list to move the data out getname: the name of the list to move the data in
function move(setname,getname)
{
var size=$("#" setname " option").size();
var selsize=$("#" setname " option:selected").size();
if(size>0&&selsize>0)
{
$.each($("#" setname " option:selected"), function(id,own){
var text=$(own).text();
var tag=$(own). attr("tag");
$("#" getname).prepend("");
$(own ).remove();
$("#" setname "").children("option:first").attr("selected",true);
});
}
//Reorder
$.each($("#" getname " option"), function(id,own){
orderrole(getname);
});
}
//Sort the role list by first letter
function orderrole(listname)
{
var size=$("#" listname " option").size();
var one=$(" #" listname " option:first-child");
if(size>0)
{
var text=$(one).text();
var tag=parseInt($( one).attr("tag"));
//Loop all elements under the first value in the list
$.each($(one).nextAll(), function(id,own){
var nextag=parseInt($(own).attr("tag"));
if(tag>nextag)
{
$(one).remove();
$( own).after("");
one=$(own).next();
}
});
}
}
Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template