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


Posted in Javascript onSeptember 28, 2010

首先是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(size>0&&selsize>0) 
{ 
$.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(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("<option tag=\""+tag+"\">"+text+"</option>"); 
one=$(own).next(); 
} 
}); 
} 
}
Javascript 相关文章推荐
jQuery中文入门指南,翻译加实例,jQuery的起点教程
Feb 09 Javascript
javascript 对表格的行和列都能加亮显示
Dec 26 Javascript
使用jQuery简化Ajax开发 Ajax开发入门
Oct 14 Javascript
jQuery选中select控件 无法设置selected的解决方法
Sep 01 Javascript
使用滤镜设置透明导致 IE 6/7/8/9 解析异常的解决方法
Apr 07 Javascript
火狐下table中创建form导致两个table之间出现空白
Sep 02 Javascript
javascript常用方法总结
May 14 Javascript
微信JS接口大全
Aug 25 Javascript
js 只比较时间大小的实例
Oct 26 Javascript
一个Vue页面的内存泄露分析详解
Jun 25 Javascript
详解vue如何使用rules对表单字段进行校验
Oct 17 Javascript
vue 弹出遮罩层样式实例
Jul 22 Javascript
JQuery UI DatePicker中z-index默认为1的解决办法
Sep 28 #Javascript
13个绚丽的Jquery 界面设计网站推荐
Sep 28 #Javascript
基于Jquery的动态添加控件并取值的实现代码
Sep 24 #Javascript
封装的原生javascript弹出层代码
Sep 24 #Javascript
js最简单的拖拽效果实现代码
Sep 24 #Javascript
JavaScript 设计模式 安全沙箱模式
Sep 24 #Javascript
IE无法设置短域名下Cookie
Sep 23 #Javascript
You might like
深入HTTP响应状态码速查表的详解
2013/06/07 PHP
Thinkphp5.0框架使用模型Model的获取器、修改器、软删除数据操作示例
2019/10/11 PHP
PHP pthreads v3下worker和pool的使用方法示例
2020/02/21 PHP
Javascript实例教程(19) 使用HoTMetal(1)
2006/12/23 Javascript
jquery可见性过滤选择器使用示例
2013/06/24 Javascript
Ubuntu中搭建Nodejs开发环境过程分享
2014/06/01 NodeJs
jQuery遍历页面所有CheckBox查看是否被选中的方法
2015/04/14 Javascript
简介JavaScript中的unshift()方法的使用
2015/06/09 Javascript
最原始的jQuery注册验证方式
2016/10/11 Javascript
vue v-on监听事件详解
2017/05/17 Javascript
JavaScript面向对象程序设计创建对象的方法分析
2018/08/13 Javascript
vue使用vuex实现首页导航切换不同路由的方法
2019/05/08 Javascript
vue指令v-html使用过滤器filters功能实例
2019/10/25 Javascript
在Vuex中Mutations修改状态操作
2020/07/24 Javascript
Vue如何实现变量表达式选择器
2021/02/18 Vue.js
Python中分数的相关使用教程
2015/03/30 Python
Python使用requests发送POST请求实例代码
2018/01/25 Python
Python中的Numpy矩阵操作
2018/08/12 Python
python语言基本语句用法总结
2019/06/11 Python
pyqt5 实现多窗口跳转的方法
2019/06/19 Python
Python基于OpenCV实现人脸检测并保存
2019/07/23 Python
Python解决pip install时出现的Could not fetch URL问题
2019/08/01 Python
Pycharm 2020年最新激活码(亲测有效)
2020/09/18 Python
dpn网络的pytorch实现方式
2020/01/14 Python
如何利用Python写个坦克大战
2020/11/18 Python
DRF使用simple JWT身份验证的实现
2021/01/14 Python
HTML5 input placeholder 颜色修改示例
2014/05/30 HTML / CSS
您附近的水疗和健康场所:Spafinder(美国)
2019/07/05 全球购物
Michael Kors英国官网:美国奢侈品品牌
2019/11/13 全球购物
Skyscanner香港:机票比价, 平机票和廉价航空机票预订
2020/02/07 全球购物
Deichmann英国:德国鞋类零售商
2021/01/30 全球购物
数学专业推荐信范文
2013/11/21 职场文书
企业宣传工作方案
2014/06/02 职场文书
2014中考励志标语
2014/06/05 职场文书
2014年社区居委会主任重阳节讲话稿
2014/09/25 职场文书
2016年“5.12”护士节致辞
2015/07/31 职场文书