Heim > Web-Frontend > js-Tutorial > jquery控制listbox中项的移动并排序_jquery

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

WBOY
Freigeben: 2016-05-16 18:41:49
Original
1301 Leute haben es durchsucht

首先是html代码,页面上放2个listbox控件和2个按钮用于移动项目

复制代码 代码如下:












全部水果:   我挑选的:







下面是在.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 {
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(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);
});
}
//重新排序
$.each($("#"+getname+" option"), function(id,own){
orderrole(getname);
});
}

//按首字母排序角色列表
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"));
//循环列表中第一项值下所有元素
$.each($(one).nextAll(), function(id,own){
var nextag=parseInt($(own).attr("tag"));
if(tag>nextag)
{
$(one).remove();
$(own).after("");
one=$(own).next();
}
});
}
}

这样就完成了简单的js控制两个列表项的值移动。
Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage