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 相关文章推荐
用JavaScript 处理 URL 的两个函数代码
Aug 13 Javascript
JavaScript 面向对象编程(2) 定义类
May 18 Javascript
jQuery实现防止提交按钮被双击的方法
Mar 24 Javascript
EasyUI闪屏EasyUI页面加载提示(原理+代码+效果图)
Feb 21 Javascript
JS控制页面跳转时未请求要跳转的地址怎么回事
Oct 14 Javascript
js实现一个可以兼容PC端和移动端的div拖动效果实例
Dec 09 Javascript
微信小程序 中wx.chooseAddress(OBJECT)实例详解
Mar 31 Javascript
jQuery Position方法使用和兼容性
Aug 23 jQuery
vue2.0 实现导航守卫的具体用法(路由守卫)
May 17 Javascript
在vue中更换字体,本地存储字体非引用在线字体库的方法
Sep 28 Javascript
利用JS动态生成隔行换色HTML表格的两种方法
Oct 09 Javascript
微信小程序自定义波浪组件使用方法详解
Sep 21 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伪静态页面函数附使用方法
2008/06/20 PHP
php绘图之生成饼状图的方法
2015/01/24 PHP
php数组合并与拆分实例分析
2015/06/12 PHP
PHP用户验证和标签推荐的简单使用
2016/10/31 PHP
php 数组元素快速去重
2017/05/05 PHP
PHP压缩图片功能的介绍
2019/03/21 PHP
理解Javascript_01_理解内存分配原理分析
2010/10/11 Javascript
浅析JQuery UI Dialog的样式设置问题
2013/12/18 Javascript
一个简单的jQuery计算器实现了连续计算功能
2014/07/21 Javascript
javascript中with()方法的语法格式及使用
2014/08/04 Javascript
Egret引擎开发指南之发布项目
2014/09/03 Javascript
JavaScript基于setTimeout实现计数的方法
2015/05/08 Javascript
jQuery往返城市和日期查询实例讲解
2015/10/09 Javascript
设置jQueryUI DatePicker默认语言为中文
2016/06/04 Javascript
详解Vue中watch的高级用法
2018/05/02 Javascript
vue中的$emit 与$on父子组件与兄弟组件的之间通信方式
2018/05/13 Javascript
layui select获取自定义属性方法
2018/08/15 Javascript
swiper在angularjs中使用循环轮播失效的解决方法
2018/09/27 Javascript
详解微信小程序的不同函数调用的几种方法
2019/05/08 Javascript
layui实现三级联动效果
2019/07/26 Javascript
Python简单的制作图片验证码实例
2017/05/31 Python
python批量读取txt文件为DataFrame的方法
2018/04/03 Python
使用python制作游戏下载进度条的代码(程序说明见注释)
2019/10/24 Python
python wav模块获取采样率 采样点声道量化位数(实例代码)
2020/01/22 Python
基于python-pptx库中文文档及使用详解
2020/02/14 Python
利用python绘制中国地图(含省界、河流等)
2020/09/21 Python
用Python自动清理系统垃圾的实现
2021/01/18 Python
利用html5 file api读取本地文件示例(如图片、PDF等)
2018/03/07 HTML / CSS
The Hut美国/加拿大:英国领先的豪华在线百货商店
2019/03/26 全球购物
2014年五四青年节活动方案
2014/03/29 职场文书
党员干部民主生活会议批评与自我批评材料
2014/09/20 职场文书
2014年校务公开工作总结
2014/12/18 职场文书
财务总监岗位职责范本
2015/04/03 职场文书
驳回起诉民事裁定书
2015/05/19 职场文书
导游词之西江千户苗寨
2019/12/24 职场文书
spring IOC容器的Bean管理XML自动装配过程
2022/05/30 Java/Android