- 浏览: 753820 次
- 性别:
- 来自: 深圳
文章分类
- 全部博客 (241)
- 个人思考 (1)
- 数据库 (5)
- java基础 (32)
- 软件工程 (2)
- zk开源框架 (15)
- 设计模式 (25)
- javascript (12)
- css (9)
- UML (2)
- CMMI软件需求 (3)
- CMMI软件设计 (2)
- CMMI软件实现 (1)
- CMMI软件测试 (1)
- 正则表达式 (4)
- 系统日志配置 (4)
- 应用服务器 (1)
- spring (7)
- XML (6)
- java web (10)
- Ajax (3)
- RichFaces (14)
- 问题 (1)
- 评论文章 (2)
- fushioncharts (2)
- MAVN (4)
- jquery (26)
- Ext js学习 (2)
- 学习心得 (2)
- CSS兼容问题 (3)
- XSL-FOP (1)
- Quartz (0)
- OSGI (1)
- spring--security (6)
- apache tools (1)
- eclispe 小技巧 (2)
- Ant (1)
- 杂记 (1)
- spring3系列 (5)
- java cache (4)
- EffectiveJava (2)
- 代码重构 (0)
最新评论
-
psz6696:
可以说是超级简单的Demo了,可惜没有演示设值注入和构造注入两 ...
模拟spring中的ClassPathXmlApplicationContext类的实现 -
ziyourJava:
[flash=200,200][img][url][list] ...
spring security进级篇 V 自定义标签控制显示 -
ztw1122:
...
zk组件开发指南(目录) -
zjysuv:
容我说一句 在座的各位都是垃圾 spring 3.2以后的@C ...
三. spring mvc 异常统一处理 -
chengwu1201:
二 基于Spring的异常体系处理
就table的一些常用操作做了一个综合的例子,包括行条纹 高亮 工具条提示 扩展 折叠 筛选等效果。
效果图如下:
下面我把我写的例子拆分解释一下:
1 . 行条纹
var rowIndex = 0; $("tbody tr").each(function(index){ if($("th",this).length){//检查当前行是否包含th元素 $(this).addClass("subhead"); rowIndex = -1; } else{ if(rowIndex%4 < 2){ $(this).removeClass("odd").addClass("even");//为奇数组添加even样式 } else{ $(this).removeClass("even").addClass("odd");//为偶数组添加odd样式 } } rowIndex++; )};
这段代码(rowIndex%4 < 2)是两行一组交替换色。
如果是三行一组交替换色,就是rowIndex%6 < 3,...依次类推。
通常情况下我们用到最多的是隔行换色,比这个两行一组交替换色要简单。
jquery提供了方法:
:even : 匹配所有索引值为偶数的元素,从 0 开始计数。例如$("tr:even");
:odd:匹配所有索引值为奇数的元素,从 0 开始计数。例如$("tr:odd")。
或者用:nth-child(index):匹配其父元素下的第N个子或奇偶元素,从1开始计数。例如(":nth-child(2)"偶数行)
2 .高亮(突出显示行)
var column = 3; $("table.striped tbody tr").each(function(index){ $("td:nth("+column+")",this).addClass("clickable").click(function(){ var thisClicked = $(this).text();//把当前单击的td标签内容赋给变量 $("table.striped tbody tr").each(function(){//遍历tbody里的所有tr标签 if(thisClicked == $("td:nth("+column+")",this).text()){//检查tbody当前列里是否有和单击的td标签内容匹配的td $(this).addClass("highlight"); } else{ $(this).removeClass("highlight"); } }); }) });
这段代码可以增强表格的视觉效果,是基于用户的交互突出显示相关的行。
3 .工具条提示
var highlighted =""; //定位工具提示条 var positionTooltip = function(event){ var tPosX = event.pageX - 5; var tPosY = event.pageY + 20; $("div.tooltip").css({left:tPosX,top:tPosY}); }; //显示工具提示条 var showTooltip = function(event){ $("div.tooltip").remove(); var $thisTopic = $(this).text(); if($(this).parent().is(".highlight")){//检查当前tr的样式是否是highlight highlighted = "un-"; } else{ highlighted = "" } $("<div class='tooltip'>Click to " + highlighted + "highlight all topics written by " + $thisTopic + "</div>").appendTo("body"); //给工具提示条增加内容, //如果当前tr的样式是highlight,那么工具条的内容是:Click to un-highlight all topics written by $thisTopic; //如果当前tr的样式不是highlight,那么工具条的内容是:Click to highlight all topics written by $thisTopic. positionTooltip(event); }; //隐藏工具提示条 var hideTooltip = function(){ $("div.tooltip").remove(); };
尽管行突出效果是一种很有用的特性,但就目前来讲,这些特性存在与否对用户而言并不明显。尽管我们可以为所有要单击的标签添加clickable类,使鼠标悬停在这些标签上时,光标变成手的形状。当用户仍然无从知晓单击这个标签会发生什么事情。为此,进一步添加与单击会发生的情况有关的说明是必要的。
4 .折叠和扩展
var toggleMins = "images/iconopen.gif"; var togglePlus = "images/iconclose.gif"; var $subHead = $("tbody th:first-child"); $subHead.prepend("<img src='"+toggleMins+"' alt='collapse this section' />"); $("img",$subHead).addClass("clickable").click(function(){ var toggleSrc = $(this).attr("src"); if(toggleSrc == toggleMins){ $(this).attr("src",togglePlus).parents("tr").siblings().fadeOut("fast"); } else{ $(this).attr("src",toggleMins).parents("tr").siblings().not(".filtered").fadeIn("fast"); } });
这里用了fadeIn(speed) 和fadeOut(speed)方法,speed (String,Number) :三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如:1000)
当表格中以分组的方式包含大量的数据时,如果能都折叠或者隐藏一部分表格的内容,就可以减少页面滚动,从而方便对表格中的所有数据进行更清晰地查看。
5 .筛选(Filter by Topic列)
$("table.striped").each(function(){ var $table = $(this); $table.find("th").each(function(){ if($(this).is(".filter-column")){ //把样式为filter-column的div赋给变量$filters var $filters = $("<div class='filter-column'><h3>Filter by " +$(this).text()+ ":</h3></div>"); //把topic一列所有出现的过的关键字加到keywords数组 var keywords = {}; $table.find("tbody tr td").filter(":nth-child(" + (column+1) + ")").each(function(){ keywords[$(this).text()] = $(this).text(); }); //在样式为filter-column的div加一个all按钮,显示所有的表格行 $("<div class='filter'>all</div>").click(function(){ $table.find("tbody tr").show(); $(this).addClass("active").siblings().removeClass("active"); $("img","tbody tr th").attr("src",toggleMins); }).addClass("clickable active").appendTo($filters); $.each(keywords,function(index,keyword){ $("<div class='filter'></div>").text(keyword).bind("click",{"keyword":keyword},function(event){ $table.find("tbody tr").each(function(){ if($("td",this).filter(":nth-child(" + (column+1) + ")").text() == event.data["keyword"]){ $(this).show(); } else if($("th",this).length == 0){ $(this).hide(); } }); $(this).addClass("active").siblings().removeClass("active"); }).addClass("clickable").appendTo($filters);//把内容为keywords样式为filter的div加入到样式为filter-column的div里 }); $filters.insertBefore($table);//把样式为filter-column的div插入到table前 } });
通过只向用户显示匹配给定条件的表格行,可以省去用户不必要的分心。
- table.rar (40 KB)
- 下载次数: 183
发表评论
-
基于jquery的半透明tip的实现
2012-04-25 18:23 2627趁工作之余,做了一个半透明的tooltip组件,show一下 ... -
jquery 开源的网站
2011-07-29 16:58 1265http://www.open-lib.com/ http ... -
js 函数
2011-07-27 19:20 1204js 中的数据类型: 字符串、数字、布尔值、空值、未定 ... -
10个实用的jQuery代码片段
2011-07-08 15:51 1148作者:Ei Sabai 翻 ... -
分享50个使你成为高级javascript开发者的jQuery的代码开发技巧
2011-07-08 15:34 1357英文: 50 jQuery Snippets T ... -
Sexy_Page_Curls插件
2010-01-12 15:09 1081不错的插件! -
jquery 技巧
2010-01-11 11:38 1270JQuery是个不错的框架,以下总结了5个每个网站开发者都应该 ... -
jQuery实现的日历
2010-01-07 14:19 1401看一下效果: -
jquery做的无限级菜单
2010-01-07 13:45 3416/** *栏目树分级显示下拉菜单组件 *作者:Cand ... -
jQuery中jqGrid分页实现
2009-12-14 16:39 21476今天看到javaeye上有人使用了jqGrid实现 ... -
jQuery插件开发全解析
2009-12-10 22:22 2791jQuery插件的开发包括两种: 一种是类级别的插件开发,即 ... -
jQuery treeview 实现的树组件
2009-12-09 21:10 6298今天利用jQuery的l ... -
jQuery treeview在JSP中的应用:ASYNC
2009-12-09 17:10 39071. async.jsp <%@ page lan ... -
jQuery treeview 在jsp中的应用
2009-12-09 17:08 29882. navigation.jsp <%@ page ... -
jQuery做的layout组件
2009-12-07 21:24 4657jQuery layout是一款不错的页面布局组件 ... -
jquery实现的treetable组件展现
2009-12-07 21:05 6022最近,利用richfaces做的treetale组 ... -
JQuery基础教程学习第五章笔记
2009-11-17 16:39 13001、attr()函数。在改变多个属性的时候可以采用键值对的形式 ... -
JQuery基础教程学习第四章笔记
2009-11-17 16:13 12771、css()方法可以修改或取值,写法如下:(1)获取css的 ... -
jQuery封装的组件
2009-11-17 15:58 4049jQuery分装的实用组件! -
绚丽的jquery按钮
2009-11-16 23:25 5530绚丽的UI按钮
相关推荐
jquery表格操作实例jquery表格操作实例jquery表格操作实例jquery表格操作实例
jquery表格变色jquery表格变色jquery表格变色jquery表格变色jquery表格变色jquery表格变色jquery表格变色jquery表格变色jquery表格变色jquery表格变色jquery表格变色jquery表格变色
jquery表格排序jquery表格排序jquery表格排序jquery表格排序jquery表格排序jquery表格排序jquery表格排序jquery表格排序
jQuery表格自动向上滚动代码,鼠标悬浮停止,离开自动继续滚动 jQuery表格自动向上滚动代码,鼠标悬浮停止,离开自动继续滚动
jquery操作表格增加删除
利用jquery实现表格动态分页,前台用jquery实现。后台用java实现动态查询数据,分页。
DataTables - jQuery表格插件
jquery 表格自动滚动 类似于新闻
NULL 博文链接:https://kingschan.iteye.com/blog/1513128
纯Jquery表格全选+反选+增删查找,一个简陋版本,仅供参考,细节处理不周到处请评论,后期有空修改
Datatables是一款jquery表格插件。它是一个高度灵活的工具,可以将任何HTML表格添加高级的交互功能,包括排序、分页、扩展、主题、国际化等
jQuery表格键盘操作插件 jquery KeyTable调用示例,这款插件允许用户在表格移动/选择数据像键盘操作Excel那样,不依赖鼠标就可完成各项操作.并且高亮当前操作的表格单元格.运行效果请参见截图,本源码包内含有调用本...
jQuery常用方法jQuery常用方法jQuery常用方法jQuery常用方法
jquery 表格 jquery table
jQuery设置表格列字段筛选改变代码,jQuery设置表格列字段筛选改变代码(html)
Jquery表格排序
jquery.base64.js jquery.table2excel.js tableExport.js 这三个资源保证导出中文的excel表格。 html2canvas.js是提供导出图片的, sprintf.js与jspdf.js是导出pdf格式
jquery插件--表格分页。
jquery表格插件
jquery表格操作.pdf