`
小蛋蛋
  • 浏览: 81601 次
  • 性别: Icon_minigender_1
  • 来自: 济南
社区版块
存档分类
最新评论

jquery中tablesorter隔行颜色变化以及对应表格拖拽技术

阅读更多
对于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
分享到:
评论
1 楼 map521 2010-05-24  
这两天在整一个隔行换色的,但是用的js写的,感觉效果不太好。在这里发现了还有拖拽的功能的jquery呵呵谢谢了。

相关推荐

    网页中表格隔行颜色变化 基于jquery

    网页中表格隔行颜色变化 jquery 表格换色 网页中表格隔行颜色变化 jquery 表格换色 网页中表格隔行颜色变化 jquery 表格换色 网页中表格隔行颜色变化 jquery 表格换色

    jquery_tablesorter.js

    在使用 `jQuery Tablesorter` 时,我们需要在页面中引入 `jQuery` 和 `jQuery Tablesorter` 的相关文件,然后选择需要排序的表格元素,调用 `tablesorter()` 方法进行初始化。例如: ```html &lt;script src="jquery-...

    jquery.tablesorter.js +排序、分页、ajax demo

    jQuery的tablesorter插件为开发者提供了一种便捷的方式,使得表格数据可以实现动态排序、分页以及与服务器端的数据交互,大大提升了用户体验。本文将围绕"jquery.tablesorter.js +排序、分页、ajax demo"这一主题,...

    jquery.tablesorter js排序 页面物理排序

    总的来说,`jQuery.tablesorter`是一个强大且灵活的表格排序工具,它使开发者能够轻松地为网页表格添加交互式排序功能,同时提供了一系列的定制选项以适应各种需求。通过深入理解和熟练运用,我们可以创建出更加动态...

    jquery.tablesorter.js

    jquery.tablesorter.js jquery 排序 很不错的排序

    jquery.tablesorter.min.js

    jquery table排序插件 tablesorter

    jquery.tablesorter表格排序

    基于jquery.tablesorter.js修改,原文件支持中文排序,只是修改成表头和排序表格可分开,也可在同一个表格里,包里含demo, tests/demo.html及tests/demo1.html

    jQuery 插件 tablesorter 的使用

    jQuery 插件 tablesorter 是一个非常实用的工具,它为HTML表格提供了强大的排序功能,让用户可以方便地对表格数据进行升序或降序排列。这个插件在不改变原有表格结构的基础上,增强了表格的交互性和用户体验。接下来...

    jquery.tablesorter实现表格各列排序

    `jquery.tablesorter`是基于jQuery的一个插件,专门用于实现表格数据的动态排序,使得用户可以轻松地对表格中的列进行升序或降序排序。这个插件不仅提供了基本的排序功能,还支持自定义排序规则、复杂的数据类型处理...

    jquery-tablesorter.js

    通过此jquery的tablesorter可以实现页面上的表单内容按表中任一列排序的功能,很好用,比在程序中通过sql语句实现简单实用多了。

    前端项目-jquery.tablesorter.zip

    前端项目-jquery.tablesorter,TableSorter(fork)是一个jquery插件,用于将带有thead和tbody标记的标准HTML表转换为不刷新页面的可排序表...TableSorter可以成功地分析和排序许多类型的数据,包括单元格中的链接数据。

    jquery插件tablesorter例子

    总结,Tablesorter 是一个强大且灵活的 jQuery 插件,能轻松实现表格数据的排序功能,同时支持自定义排序规则、事件监听、模块扩展等特性,是开发中处理表格数据的强大工具。通过深入了解和实践,你可以根据项目需求...

    jquery tablesorter,表格排序带分页

    总之,jQuery TableSorter是一款实用的表格管理工具,无论是在小型项目还是大型应用中,都能为表格数据的展示和交互带来极大的便利。通过理解其基本原理和使用方法,开发者可以快速地实现动态排序和分页,提升网页的...

    jquery tablesorter对表格进行排序

    《jQuery Tablesorter:高效实现表格排序》 在网页开发中,数据的展示往往离不开表格。当表格数据较多时,用户通常需要对数据进行排序,以便快速查找或分析信息。jQuery Tablesorter 是一个强大的开源插件,它使得...

    Jquery中的tablesorter用法

    **jQuery中的tablesorter插件详解** jQuery是一个广泛使用的JavaScript库,它简化了HTML文档遍历、事件处理、动画和Ajax交互。而tablesorter则是jQuery的一个插件,专门用于增强HTML表格的功能,使得用户可以方便地...

    jquery 表格插件:Tablesorter 2.0 插件 表格用户体验内容筛选与分页筛选

    1. **安装**:首先,需要在项目中引入 jQuery 和 Tablesorter 的 JavaScript 文件,以及对应的 CSS 样式文件。 2. **初始化**:然后,通过 jQuery 选择器找到表格元素,并调用 `.tablesorter()` 方法启动插件。 3. *...

    JQuery插件tablesorter表格排序实现过程解析

    Tablesorter 是一个用来直接在浏览器上对表格数据进行排序的jQuery插件,无需再次刷新页面,支持多种单元格数据类型,例如数值、字符串、日期和自定义排序。 使用说明 引入jquery.tablesorter 所用文件下载: ...

    (完整实例)jquery实现表格内容静态排序,提高效率,jquery tablesorter.js

    在本文中,我们将深入探讨如何使用jQuery库,特别是jQuery TableSorter.js插件,来实现表格内容的静态排序,从而提升用户体验和数据管理效率。TableSorter.js是jQuery的一个强大扩展,它允许用户通过简单的点击表头...

    jQuery表格排序插件tablesorter.zip

    Tablesorter 是一个用来直接在浏览器上对表格数据进行排序的jQuery插件,无需再次刷新页面,支持多种单元格数据类型,例如数值、字符串、日期和自定义排序。主要的特点包括:多列排序支持文本、URL地址、数值、IP...

Global site tag (gtag.js) - Google Analytics