对于jquery,实现table的行排序功能非常的简单,一般来说,实现隔行显示也是非常容易的,
自己在jquery的tablesorter插件的基础上,实现了自动的表格隔行变色,另外,关于表格的行的拖拽技术,jquery也提供了相应的tableDnD()函数来进行相应,这样就给了我们很大的方便,但是在一下的情形中你就需要自己编码了,例如我希望我的表格在刚加载的时候就要隔行显示,同时允许表格的行进行拖拽,另外,在我将一行拖拽到目的地释放的时候,这个时候表格还是隔行显示的。
在jquery中,一般将一行拖拽到指定位置的时候,该行的颜色是扔然不变的,例如我的奇数行是红色,我的偶数行是蓝色背景,那当我把第一行拖到第二行的位置时,虽然他们两个都换了位置,但是他们两个也都还是以前的颜色,这样造成的效果就不好看了。
下面是我的实现思路:
要实现表格行排序,就需要jquery.tablesorter.js,打开该js文件,然后找到:function appendToTable(table,cache)函数,这个函数就是实现相应排序的,然后在该函数里面你找到下面的代码:
for (var i=0;i < totalRows; i++) {
rows.push(r[n[i][checkCell]]);
if(!table.config.appender) {
var o = r[n[i][checkCell]];
var l = o.length;
for(var j=0; j < l; j++) {
tableBody[0].appendChild(o[j]);
}
}
}
找到以后,然后你就可以在这段代码的下面添加如下的代码:
$("tr:visible",table.tBodies[0])
.filter(':even')
.removeClass(table.config.widgetZebra.css[1]).addClass(table.config.widgetZebra.css[0])
.end().filter(':odd')
.removeClass(table.config.widgetZebra.css[0]).addClass(table.config.widgetZebra.css[1]);
这段代码就是给奇数行和偶数行分别加不同的颜色
然后这样就可以了。
还有关于tableDnD的表格拖拽
只要用下面的代码就可以了:
$("table").tableDnD({
onDrop:function(table,row){
var rows = table.tBodies[0].rows;
// alert("rows length="+rows.length);
// alert("Row dropped was "+row.id+". New order: ");
for(i=0;i<rows.length;i++){
if(i%2==0){
// alert("even");
//rows[i].style.className="even2";
$(".tablesorter tbody tr:even").removeClass();
$(".tablesorter tbody tr:even").addClass("even");
}
else{
// alert("odd");
//rows[i].style.className="odd2";
$(".tablesorter tbody tr:odd").removeClass();
$(".tablesorter tbody tr:odd").addClass("odd");
}
}
}
});
下面是我写的一个小程序,大家可以看看
应该是很好看懂得
- jquerydrag.rar (33.9 KB)
- 描述: jquery的表格排序和表格行排序以及表格行拖动功能以及拖动以后仍然保持隔行颜色变化
- 下载次数: 1056
分享到:
相关推荐
网页中表格隔行颜色变化 jquery 表格换色 网页中表格隔行颜色变化 jquery 表格换色 网页中表格隔行颜色变化 jquery 表格换色 网页中表格隔行颜色变化 jquery 表格换色
jquery table排序插件 tablesorter
基于jquery.tablesorter.js修改,原文件支持中文排序,只是修改成表头和排序表格可分开,也可在同一个表格里,包里含demo, tests/demo.html及tests/demo1.html
jquery.tablesorter.js jquery 排序 很不错的排序
jquery.tablesorter js排序 页面物理排序
使用jquery插件tablesorter来完成静态排序
jQuery 插件 tablesorter 的使用
前端项目-jquery.tablesorter,TableSorter(fork)是一个jquery插件,用于将带有thead和tbody标记的标准HTML表转换为不刷新页面的可排序表...TableSorter可以成功地分析和排序许多类型的数据,包括单元格中的链接数据。
jquery插件tablesorter例子
jquery tablesorter的js文件,提供 grid排序工具,正好自己用了没问题,共享给大家
jquery.tablesorter实现表格各列排序
Tablesorter 是一个用来直接在浏览器上对表格数据进行排序的jQuery插件,无需再次刷新页面,支持多种单元格数据类型,例如数值、字符串、日期和自定义排序。 使用说明 引入jquery.tablesorter 所用文件下载: ...
jquery表格插件Tablesorter插件 表格内容筛选与分页筛选
Tablesorter 是一个用来直接在浏览器上对表格数据进行排序的jQuery插件,无需再次刷新页面,支持多种单元格数据类型,例如数值、字符串、日期和自定义排序。主要的特点包括:多列排序支持文本、URL地址、数值、IP...
最近在公司的项目中需要对表格进行排序,上网找了一下,感觉感觉tablesorter不错,但官网上的介绍很少,而且没有中文手册,很多地方都不明不白。。。结合官网的例子,自己摸索了一下,还真整出来了
通过此jquery的tablesorter可以实现页面上的表单内容按表中任一列排序的功能,很好用,比在程序中通过sql语句实现简单实用多了。
jQuery特效插件:Tablesorter 2.0 是一款表格筛选用户体验,非常适合用在表格数据内容比较多的表格,查找数据内容非常方便快捷,非常好的用户体验效果。
jquery实现表格内容静态排序,提高效率,jquery tablesorter.js。
jquery 写的可排序带分页的表格实例tablesorter