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

首先是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();
}
});
}
}

(0)

相关推荐

  • jquery中的sortable排序之后的保存状态的解决方法

    当时也就从jquery的官方网站上抄了几句搞上去,后来发现用处不大,还挺慢.汗---以至于到今天早上也没搞清楚怎么样才能把排序后的结果保存起来,正好现在公司要做一个这样的功能,就又从新学习了下.首先,在jquery的官方demo(http://jqueryui.com/demos/)上找到了相似的代码.我所要的叫就是portlets(http://jqueryui.com/demos/sortable/portlets.html)这种效果.就像igoogle首页那样的.冒似很简单,把要引用的js

  • 基于jquery的表格排序

    很多高手也位jquery写了专门的排序库,因为自己也想尝试一下, 当然运行速度实在不能接受,但是我会慢慢的把他改进的. 注:这里只是拿出了一部分代码来,查看演示demo 文档载入后给'th'添加click事件. 1. $('th').click(function(){ var date1=(new Date()).getTime() var dataType=$(this).attr('dataType'); 找到点击对象的自定义属性dataType,当然这个不符合W3C的标准是无法通过检验的,

  • jquery实现的鼠标拖动排序Li或Table

    1.前端页面 复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="拖动排序Li或Table.aspx.cs" Inherits="拖动排序Li或Table" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http

  • jquery tablesorter.js 支持中文表格排序改进

    代码: 仿一个网友的代码写的,不记得出自哪里了,改成可以支持中文排序,而且支持控件value的排序. 没办法,能力有限,只能... 复制代码 代码如下: //转换器,将列的字段类型转换为可以排序的类型:String,int,float function convert(sValue, sDataType) { switch(sDataType) { case "int": return parseInt(sValue); case "float": return p

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

    首先是html代码,页面上放2个listbox控件和2个按钮用于移动项目 复制代码 代码如下: <table border="0"> <tr> <td width="156">全部水果:</td> <td width="142"> </td> <td width="482">我挑选的:</td> </tr> <tr

  • 简单的jquery拖拽排序效果实现代码

    步骤: 1.实现随鼠标移动的效果: 2.初始化一个元素及其坐标: 3.拖拽对象的最后坐标,与元素的坐标 进行计算和判断 来确定 要插入的目标元素: 4.用insertBefore 方法 插入到目标元素的前面 具体代码如下: 复制代码 代码如下: <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8&

  • Jquery 选中表格一列并对表格排序实现原理

    在前端对表格排序的Jquery插件有很多,功能也很强大,比如说Jquery Data Tables对表格的处理就相当强大,可对表格进行排序,搜索,分页等操作,不过没有仔细研究过其实现原理. 为了更好的理解在前端对表格进行排序的原理,也为了进一步的学习Jquery,所以决定用Jquery来实现一个对表格进行排序的小功能. 该实现的主要思想是:获取鼠标点击的表头单元格的列号,遍历数据行,获取每个<tr>中的html,同时获取每个<tr>标签下对应获取到的列号的<td>标签中

  • 基于JQuery的列表拖动排序实现代码

    要求 拖动排序,从名字就不难想像,就是按住一行数据拖到想要的排序位置,保存新的排序队列. 思路 首先给列表行建立锚点,绑定mousedown和mouseup事件,当鼠标移动到想要插入的位置时,将对象行移动到目标行,然后对其经过的所有行进行排序处理. 思路很简单,但这里面仍然有几个问题要注意 1.移动到什么位置可以视作要插入到目标行的位置.2.移动出了顶端和底端时,判断为第一和最后.3.向上移动和向下移动的处理 解决 关于事件 Javascript里鼠标按下和放开事件为onmousedown,on

  • jQuery之排序组件的深入解析

    1:排序(Sortable)组件可以将页面上的一组元素变成可排序的,可用于定义一个可排序的元素列表,然后,通过拖动鼠标可以调整元素在列表中的位置$('.selector').sortable(options);    简单实例: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transiti

  • jquery对元素拖动排序示例

    完整代码:(aspx文件末尾有下载) 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <

  • jQuery实现对无序列表的排序功能(附demo源码下载)

    本文实例讲述了jQuery实现对无序列表的排序功能.分享给大家供大家参考,具体如下: 利用jQuery对无序列表排序的原理是:获取到无序列表中的所有列表项,并转成数组形式,使用JavaScript函数对其进行排序后再次输出.其中使用到的jQuery函数有ready().get().text().each().append()和JavaScript函数sort(). 1.jQuery函数介绍 (1)jQuery函数get()--获取匹配元素集合 该函数取得所有匹配元素的一种向后兼容的方式(不同于j

  • 用jquery.sortElements实现table排序

    项目中要实现table排序的功能. 网上有很多解决方案,很多都基于jQuery. jquery.tablesorter,大小17KB,不过他的首页在ie10下兼容性有点问题. DataTables,大小75KB,功能强大,带分页,搜索等功能. 还有插件叫sortElements,很小巧,只有3KB,兼容性也不错,而且在Github上有818个星. 最后我选择用sortElements,实现很简单: 1. 引入jQuery 复制代码 代码如下: <script type="text/java

  • jQuery表格排序组件-tablesorter使用示例

    一.引入文件 复制代码 代码如下: <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.tablesorter.js"></script> <!-- 引入以下样式则表头出现排序图标,同时引入图片 --> <

随机推荐