提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

jquery控制listbox中项的移动并排序的实现代码

jQuery控制排序代码 实现 移动 ListBox
2023-06-13 09:14:24 时间
首先是html代码，页面上放2个listbox控件和2个按钮用于移动项目

复制代码代码如下:

<tableborder="0">
<tr>
<tdwidth="156">全部水果：</td>
<tdwidth="142"></td>
<tdwidth="482">我挑选的：</td>
</tr>
<tr>
<tdrowspan="2"><asp:ListBoxSelectionMode="Multiple"ID="listall"Rows="12"Width="156"runat="server"></asp:ListBox></td>
<tdheight="41"align="center">
<inputtype="button"id="btnleftmove"value=">>>"onclick="move("listall","listmy");"/><br/><br/>
<inputtype="button"id="btnrighttmove"value="<<<"onclick="move("listmy","listall");"/>
</td>
<tdrowspan="2"><asp:ListBoxSelectionMode="Multiple"ID="listmy"Rows="12"Width="156"runat="server"></asp:ListBox></td>
</tr>
</table>


下面是在.cs文件中绑定一些数据

复制代码代码如下:

publicpartialclass_Default:System.Web.UI.Page
{
protectedvoidPage_Load(objectsender,EventArgse)
{
if(!IsPostBack)
{
BindData();
}
}
privatevoidBindData()
{
ArrayListlist=DataArray();
for(inti=0;i<list.Count;i++)
{
listall.Items.Add(list[i].ToString());
listall.Items[i].Attributes["tag"]=i.ToString();//用tag记录排序字段
}
}
privateArrayListDataArray()
{
//用到的一些数据，这里已默认按第一个字的拼音排序
ArrayListlist=newArrayList();
list.Add("草莓");
list.Add("梨");
list.Add("桔子");
list.Add("芒果");
list.Add("苹果");
list.Add("香蕉");
returnlist;
}
}



在实际使用时可根据数据库中的字段排序
下面是jquery的代码：


复制代码代码如下:
//移动用户选择的角色
//setname:要移出数据的列表名称getname:要移入数据的列表名称
functionmove(setname,getname)
{
varsize=$("#"+setname+"option").size();
varselsize=$("#"+setname+"option:selected").size();
if(size>0&&selsize>0)
{
$.each($("#"+setname+"option:selected"),function(id,own){
vartext=$(own).text();
vartag=$(own).attr("tag");
$("#"+getname).prepend("<optiontag=\""+tag+"\">"+text+"</option>");
$(own).remove();
$("#"+setname+"").children("option:first").attr("selected",true);
});
}
//重新排序
$.each($("#"+getname+"option"),function(id,own){
orderrole(getname);
});
}
//按首字母排序角色列表
functionorderrole(listname)
{
varsize=$("#"+listname+"option").size();
varone=$("#"+listname+"option:first-child");
if(size>0)
{
vartext=$(one).text();
vartag=parseInt($(one).attr("tag"));
//循环列表中第一项值下所有元素
$.each($(one).nextAll(),function(id,own){
varnextag=parseInt($(own).attr("tag"));
if(tag>nextag)
{
$(one).remove();
$(own).after("<optiontag=\""+tag+"\">"+text+"</option>");
one=$(own).next();
}
});
}
}

相关文章