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 相关文章推荐
JS获得URL超链接的参数值实例代码
Jun 21 Javascript
javascript中动态函数用法实例分析
May 14 Javascript
JavaScript tab选项卡插件实例代码
Feb 23 Javascript
JavaScript浏览器对象模型BOM(BrowserObjectModel)实例详解
Nov 29 Javascript
浅谈Angular.js中使用$watch监听模型变化
Jan 10 Javascript
node作为中间服务层如何发送请求(发送请求的实现方法详解)
Jan 02 Javascript
bootstrap treeview 树形菜单带复选框及级联选择功能
Jun 08 Javascript
Vue 动态路由的实现及 Springsecurity 按钮级别的权限控制
Sep 05 Javascript
用原生JS实现爱奇艺首页导航栏代码实例
Sep 19 Javascript
JS实现可视化音频效果的实例代码
Jan 16 Javascript
利用原生JS实现欢乐水果机小游戏
Apr 23 Javascript
Vue单文件组件开发实现过程详解
Jul 30 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
php下拉选项的批量操作的实现代码
2013/10/14 PHP
ThinkPHP3.1新特性之动态设置自动完成和自动验证示例
2014/06/19 PHP
PHP简单选择排序算法实例
2015/01/26 PHP
浅谈PHP中try{}catch{}的使用方法
2016/12/09 PHP
php插入mysql数据返回id的方法
2018/05/31 PHP
PHP等比例压缩图片的实例代码
2018/07/26 PHP
jQuery自动切换/点击切换选项卡效果的小例子
2013/08/12 Javascript
js数组操作学习总结
2013/11/04 Javascript
JS数组的常见用法实例
2015/02/10 Javascript
使用 TypeScript 重新编写的 JavaScript 坦克大战游戏代码
2015/04/07 Javascript
基于Vue.js的表格分页组件
2016/05/22 Javascript
bootstrap是什么_动力节点Java学院整理
2017/07/14 Javascript
echarts学习笔记之箱线图的分析与绘制详解
2017/11/22 Javascript
微信小程序使用image组件显示图片的方法【附源码下载】
2017/12/08 Javascript
vue项目中jsonp跨域获取qq音乐首页推荐问题
2018/05/30 Javascript
element 动态合并表格的步骤
2020/12/31 Javascript
vue实现轮播图帧率播放
2021/01/26 Vue.js
[04:07]显微镜下的DOTA2第八期——英雄复活动作
2014/06/24 DOTA
python实现上传样本到virustotal并查询扫描信息的方法
2014/10/05 Python
python下实现二叉堆以及堆排序的示例
2017/09/29 Python
python 3.0 模拟用户登录功能并实现三次错误锁定
2017/11/01 Python
Python实现正整数分解质因数操作示例
2018/08/01 Python
python画一个玫瑰和一个爱心
2020/08/18 Python
python的依赖管理的实现
2019/05/14 Python
python cv2在验证码识别中应用实例解析
2019/12/25 Python
python3.6.5基于kerberos认证的hive和hdfs连接调用方式
2020/06/06 Python
python正则表达式 匹配反斜杠的操作方法
2020/08/07 Python
python map比for循环快在哪
2020/09/21 Python
python爬虫利用selenium实现自动翻页爬取某鱼数据的思路详解
2020/12/22 Python
让IE6、IE7、IE8支持CSS3的脚本
2010/07/20 HTML / CSS
浅析css3中matrix函数的使用
2016/06/06 HTML / CSS
个人创业事迹材料
2014/12/30 职场文书
反腐倡廉心得体会2016
2016/01/13 职场文书
高中政治教学反思
2016/02/23 职场文书
2019大学生社会实践报告汇总
2019/08/16 职场文书
Python中itertools库的四个函数介绍
2022/04/06 Python