在前端对表格排序的Jquery插件有很多，功能也很强大，比如说Jquery Data Tables对表格的处理就相当强大，可对表格进行排序，搜索，分页等操作，不过没有仔细研究过其实现原理。为了更好的理解在前端对表格进行排序的原理，也为了进一步的学习Jquery，所以决定用Jquery来实现一个对表格进行排序的小功能。 该实现的主要思想是：获取鼠标点击的表头单元格的列号，遍历数据行，获取每个<tr>中的html，同时获取每个<tr>标签下对应获取到...
步骤： 1.实现随鼠标移动的效果； 2.初始化一个元素及其坐标； 3.拖拽对象的最后坐标，与元素的坐标 进行计算和判断 来确定 要插入的目标元素； 4.用insertBefore 方法 插入到目标元素的前面 具体代码如下： 代码如下:<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>测试的拖拽功能</title> <style type="text/css"> body, div { margin: 0; paading: 0; font-siz...
例如： - a (position 1) - b (position 2) - c (position 3) move c between a and b: cp=1 move a between b and c: cp=2 下移位置多加了1，不太清楚为什么，这里提供一种修复方法，也许它不是很好。 把 "position" : data.rslt.cp + i, 换成 "position" : data.rslt.o.index() + i, 可能对你有所帮助
效果图如下所示：代码如下:<!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> <title>中文首字母排序</title> <link rel="stylesheet" href="css/listnav.css" type="text/css" media="screen" charset="utf-8" /> <script src="js/jquery-1.4.4.min.js" type="text/javascript"></script> <!--获...
js,jQuery 排序的实现: 重点: 想要实现排序,最简单的方法就是 先把标签用jQuery读进对象数组 用js排序好对象数组 (针对对象数组进行排序, 不要试图直接对网页的内容进行直接更改) 用对象数组内容覆盖网页上的标签数组; //排序从文字短的到长的 代码如下://排序从文字短的到长的 var arr_a=new Array(); var i=0; $(".type_list_txt > span:contains(T恤)").parent().children("a").each(function(){ arr_a[i]=$(this).clone(); i+...
下载代码和示例：jqueryPaging.rar 使用方法如下： 代码如下:<script language="javascript" type="text/javascript"> $("#myTable").tablePaging({ pageSize: 5, sorting: true, sortSelector: ".js-Order", sortType: "number" }); </script> 如果仅仅用分页功能：$("#myTable").tablePaging(); 参数说明： id: jQuery(this).attr(id), // 要分页的表格的ID pageSize: 10, // 单个页面显示记录数，默认是10条 sorting: false,/...
首先是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=">>>" on...
很多高手也位jquery写了专门的排序库，因为自己也想尝试一下， 当然运行速度实在不能接受，但是我会慢慢的把他改进的。 注：这里只是拿出了一部分代码来，查看演示demo 文档载入后给'th'添加click事件。 1. $('th').click(function(){ var date1=(new Date()).getTime() var dataType=$(this).attr('dataType'); 找到点击对象的自定义属性dataType，当然这个不符合W3C的标准是无法通过检验的，也可以用ID或者class来定义，但是我觉...
理由：jquery简单，兼容性好且容易封装。废话不多说，马上开始我们的Jquery插件编写吧。应该有很多人写过类似的插件，我也是有些模仿flexGrid的形式。 需求：GridView显示数据，无刷新分页，无刷新排序，无刷新过滤（搜索数据），基于ASP.NET(我们这里有ashx一般处理文件来实现)。 使用到技术：asp.net2.0, jquery,css 首先写的是jquery插件方面，使用的核心函数还是jquery的ajax函数，方便快捷。 代码如下:$.ajax({ type: p.meth...
每次请求备份管理页面时，服务端会把所以的备份还原信息都传到客户端，然后ui.tabs将两种信息折叠起来分别显示，好在ui.tabs给我提供ajax功能，我们的每个tab可以直接应用另外一个页面 如： 代码如下:<div id="container"> <ul> <li><a href="#fragment-1"><span>备份</span></a></li> <li><a href="Restore.aspx"><span>还原</span></a></li> </ul> </div> 但这样，当Restore.aspx存在服务端控件时，当他与服务端交互时，将不会...
终极目的：想做一个方便的排序功能。 具体实现：点击后可以输入排序的数字编号，移开后自动更新数据库。 1，我想把这个功能用<span>来完成，也就需要一个在页面上监控指定的span的东西，他就是： ready(fn)当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。 $(document).ready(function(){ // 在这里写你的代码... }); 2，页面上<span>很多，如何才能区分呢？用id？还是class？id太单一，于是用class，因为排序不是针对一条数据...
但在这个模型中，由于不能利用这些控件，我们需要借助纯Javascript和html静态代码来实现，感觉好像挺麻烦的？其实呢......分页代码既然由Webservice接口服务端中间层处理好回传回来，那么我们的排序代码也可以这样的，只是在回传前进行排序就ok了，下面就分析一下。 看过上篇的文章，可以知道在Webservice接口服务端中间层处理数据是操纵泛型的List对象 代码 代码如下:List<TB_WEB_NZ_INVESTMENT> list = new List<TB_WEB_NZ_...
当时也就从jquery的官方网站上抄了几句搞上去，后来发现用处不大，还挺慢。汗～～～以至于到今天早上也没搞清楚怎么样才能把排序后的结果保存起来，正好现在公司要做一个这样的功能，就又从新学习了下。首先，在jquery的官方demo(http://jqueryui.com/demos/)上找到了相似的代码。我所要的叫就是portlets（http://jqueryui.com/demos/sortable/portlets.html）这种效果。就像igoogle首页那样的。冒似很简单，把要引用的js都加入后，...
代码: 仿一个网友的代码写的，不记得出自哪里了，改成可以支持中文排序，而且支持控件value的排序。 没办法，能力有限，只能。。。 代码如下://转换器，将列的字段类型转换为可以排序的类型：String,int,float function convert(sValue, sDataType) { switch(sDataType) { case "int": return parseInt(sValue); case "float": return parseFloat(sValue); case "date": return new Date(Date.parse(sValue)); default: return sV...
首先是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=">>>" on...