jquery控制listbox中项的移动并排序

最爱双鱼rain

最爱双鱼rain

2016-02-19 14:38

下面是个简单易学的jquery控制listbox中项的移动并排序教程,图老师小编详细图解介绍包你轻松学会,喜欢的朋友赶紧get起来吧!
首先是html代码,页面上放2个listbox控件和2个按钮用于移动项目
代码如下:
table border="0"
tr
td width="156"全部水果:/td
td width="142" /td
td width="482"我挑选的:/td
/tr
tr
td rowspan="2"asp:ListBox SelectionMode="Multiple" ID="listall" Rows="12" Width="156" runat="server"/asp:ListBox/td
td height="41" align="center"
input type="button" id="btnleftmove" value="" onclick="move('listall','listmy');"/br /br /
input type="button" id="btnrighttmove" value="" onclick="move('listmy','listall');"/
/td
td rowspan="2"asp:ListBox SelectionMode="Multiple" ID="listmy" Rows="12" Width="156" runat="server"/asp:ListBox/td
/tr
/table

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

代码如下:
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(); //用tag记录排序字段
}
}

private ArrayList DataArray()
{
//用到的一些数据,这里已默认按第一个字的拼音排序
ArrayList list = new ArrayList();
list.Add("草莓");
list.Add("梨");
list.Add("桔子");
list.Add("芒果");
list.Add("苹果");
list.Add("香蕉");
return list;
}
}

在实际使用时可根据数据库中的字段排序

下面是jquery的代码:

代码如下:
//移动用户选择的角色
//setname:要移出数据的列表名称 getname:要移入数据的列表名称
function move(setname,getname)
{
var size=$("#"+setname+" option").size();
var selsize=$("#"+setname+" option:selected").size();
if(size0&&selsize0)
{
$.each($("#"+setname+" option:selected"), function(id,own){
var text=$(own).text();
var tag=$(own).attr("tag");
$("#"+getname).prepend("option tag=""+tag+"""+text+"/option");
$(own).remove();
$("#"+setname+"").children("option:first").attr("selected",true);
});
}
//重新排序
$.each($("#"+getname+" option"), function(id,own){
orderrole(getname);
});
}

//按首字母排序角色列表
function orderrole(listname)
{
var size=$("#"+listname+" option").size();
var one=$("#"+listname+" option:first-child");
if(size0)
{
var text=$(one).text();
var tag=parseInt($(one).attr("tag"));
//循环列表中第一项值下所有元素
$.each($(one).nextAll(), function(id,own){
var nextag=parseInt($(own).attr("tag"));
if(tagnextag)
{
$(one).remove();
$(own).after("option tag=""+tag+"""+text+"/option");
one=$(own).next();
}
});
}
}

这样就完成了简单的js控制两个列表项的值移动。
展开更多 50%)
分享

猜你喜欢

jquery控制listbox中项的移动并排序

Web开发
jquery控制listbox中项的移动并排序

控制CComboBox中ListBox的DropDown & Back

编程语言 网络编程
控制CComboBox中ListBox的DropDown & Back

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

合并排序(C语言实现)

编程语言 网络编程
合并排序(C语言实现)

排序Select中Option项的一个示例

Delphi
排序Select中Option项的一个示例

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

归并排序的实现代码与思路

编程语言 网络编程
归并排序的实现代码与思路

jQuery slider Content(左右控制移动)

Web开发
jQuery slider Content(左右控制移动)

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

Linux配置minicom的步骤

Linux配置minicom的步骤

说明框的各种用法

说明框的各种用法
下拉加载更多内容 ↓