首页 > 代码库 > jQuery整理笔记九----功能性表格开发
jQuery整理笔记九----功能性表格开发
示例中用到的一些图片、插件、样式文件等下载地址：点我进入下载
过去在开发过程中关于table方面的jquery应用仅仅是局限于使用jquery操作table增加一行、删除一列等等操作。今天整理的跟过去用的不一样。
1、uiTableFilter
uiTableFilter是一款表格数据行过滤插件，使用很简单,具体用法如下：
$.uiTableFilter(table,phrase) 该函数包含两个参数,其中第一个参数为jQuery对象,即为jQuery方法匹配的表格,或者也可以是jQuery匹配到的多个表格数据行。第二个参数表示匹配的关键字,以字符串形式传递。另外,还可包含两个可选参数,分别设置限制列和隐藏元素。
代码示例：
<span style="font-family:SimSun;font-size:12px;"><span style="font-family:SimSun;font-size:12px;"><!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>uitablefilter</title> <link href=http://www.mamicode.com/"images/style.css" rel="stylesheet" type="text/css" media="all" />>效果图：
联系实际：
（1）、这个插件只针对table内的数据进行过滤,我们在一般的web项目开发中如果数据量的习惯用分页,分页一般是后台sql语句或者其他方法实现的,总之,传到web页面的数据一
般是10条或者20条,这个时候这个插件就只能针对本页的数据进行排序了,如果需求只针对当前页进行过滤,那才可以使用。
（2）、如果页面数据量不大（几十条或者几百条）,那我们没有必要分页,页面加一个滚动条把所有数据都放在表格里就行了.这时候这个过滤就可以应用到全部的数据了。
（3）、以前做的项目中对表格进行过滤的时候习惯于将各个列的过滤条件分开,例如名称是一个过滤条件,血量值又是一个过滤条件。现在这个插件是针对所有的列做统一的过
滤,我感觉在特定的情景下用起来也是不错的。
（4）、这个插件的过滤由jquery插件完成,免去了对后台的请求,也免去了某些数据库的操作。
2、tablesorter表格排序
tablesorter是一个数据表格排序插件,它针对标准的表格结构,意思是说表格结构中必须包含<thed>和<tbody>标签。在不需要页面刷新的情况下,tablesorter插件能够根据列数据
类型进行排序。
tablesorter插件具有如下特点：
（1）、能够根据多列数据进行排序。
（2）、能够自动分析text(文本)、URL字符串、整数、货币、浮点数、IP、日期时间等数据格式,也可以轻松自定义数据类型,并根据这些数据类型进行排序
（3）、支持二次隐形排序,如根据其他标准进行排序时,也维护字母排序
使用示例如下：
<span style="font-family:SimSun;font-size:12px;"><span style="font-family:SimSun;font-size:12px;"><!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>tablesorter</title> <link href=http://www.mamicode.com/"images/style.css" rel="stylesheet" type="text/css" media="all" />>效果图：
单击校名称后效果图如下：
当然,我们也可以在tablesorter()函数内传递值,直接初始化排序列和方法,例如下面代码将按照数据表格的第1、2列进行排序,排序方法是升序。
<span style="font-family:SimSun;font-size:12px;"><span style="font-family:SimSun;font-size:12px;">$(function(){ $('table#grid').tablesorter({ sortList: [[0,0], [1,0]] }); })</span></span>参数sortList表示排序列以及排序方式,排序方式的定义是0代表升序,1代表降序。除了这个参数外,tablesorter插件还包含多个参数，参数如下表所示：
| 参数 | 数据类型 | 默认值 | 说明 |
| sortList | Array | 格式为[[columnIndex,sortDirection],....]其中columnIndex是列的索引号,从左到右以0开始,sortDirection取值0表示升序,取值1表示降序。例如,[[0,0],[1,1]] | |
| sortMultiSortKey | String | shiftKey | 选择多列排序的时候按住哪个键 |
| textExtraction | String或function | simple | 定义使用哪种方法来提取一个单元格的数据表进行排序。取值包括simple、complex和自定义函数。 |
| headers | Object | 定义每一列的排序控制指令 | |
| sortForce | Array | 用于添加额外的强制排序,将被追加到用户的动态选择。例如,可用于按字母顺序排序后,其他用户选择的排序,在处理如因同一日期或货币值的行的结果。它可以帮助好像是随机次要排序数据。 | |
| widthFixed | Boolean | false | 指示是否tablesorter应适用于固定宽度的表列。 |
| cancelSelection | Boolean | true | 指示表头的文本禁止选择,使头部看起来像个按钮的样子 |
| cssHeader | String | header | 定义表头样式表 |
| cssAsc | String | headerSortUp | 定义按照升序排序时表头的样式名 |
| cssDesc | String | headerSortDesc | 定义按照降序排序时表头的样式名 |
| debug | Boolean | false | 是否应显示调试运行tablesorter的有用信息 |
例如,在下面示例不仅设置了sortList参数使之默认按照第一列和第二列升序排列,而且通过为cssAsc和cssDesc参数指定不同的样式,设计当对列排序时，能够自动提示当前数据
排序的列及排序的方向。
<span style="font-family:SimSun;font-size:12px;"><span style="font-family:SimSun;font-size:12px;"><!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>tablesorter</title> <link href=http://www.mamicode.com/"images/style.css" rel="stylesheet" type="text/css" media="all" />>效果图如下：
当我们点击总得分进行排序效果：
我们还可以按住shift键点击多列是表格按照多列进行排序：
联系实际：
记得以前在联通做过一个IOM项目,需要的需求就是点击列头可以按照该列进行排序,当时是在网上找的一个例子实现的,现在拿出来那个例子一看很麻烦而且存在着一些问
题,jquery提供的tablesorter插件完美的封装了表格的排序,而且可以按住shift键选择多列进行排序,用在项目中还是有助于提高产品的用户体验的。
3、HeadColor表格颜色
HeadColor可以让你根据元素的值来为元素设置颜色。该插件能够根据预设的颜色范围进行比较,最后自动设置单元格的颜色值。
代码示例：
<span style="font-family:SimSun;font-size:12px;"><span style="font-family:SimSun;font-size:12px;"><!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>tablesorter</title> <link href=http://www.mamicode.com/"images/style.css" rel="stylesheet" type="text/css" media="all" />>效果图：
4、Pagination表格分页显示
Table Pagination是一款轻量级表格分页插件，该jQuery插件用于创建一个分页显示的数据表格样式，我们可以自定义分页设置的各种选项，以满足项目需求
代码示例：
<span style="font-family:SimSun;font-size:12px;"><span style="font-family:SimSun;font-size:12px;"><!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Table Pagination</title> <link href=http://www.mamicode.com/"images/style.css" rel="stylesheet" type="text/css" media="all" />>效果图：
该例子应用到的都是Pagination插件提供的默认参数,下面我们说一下这个插件都有哪些参数可供我们修改：
firstArrow：定义首页按钮图片的URL，默认值为./images/first.gif
prevArrow:上一页按钮图片的URL，默认值为./images/prev.gif
lastArrow:尾页按钮图片的URL,默认值为./images/last.gif
nextArrow:下一页按钮图片的URL,默认值为./images/next.gif
rowsPerPage:设置每页显示的行数,默认值为5
currPage:设置当前显示第几页,默认为1
optionsForRows:定义下拉列表中每页显示的行数,默认值为[5,10,25,50,100]
ignoreRows:设置被忽略的行数,默认值为[],即显示所有行数
下面看一个设置了部分参数的例子：
<span style="font-family:SimSun;font-size:12px;"><span style="font-family:SimSun;font-size:12px;">$(function(){ $('table#grid').tablePagination({ currPage : 2, optionsForRows : [2,3,5], rowsPerPage : 5 }); })</span></span>效果图：
通过上两个效果图我们看到分页的标签都是英文的,如果需要改成中文的那我们直接去改插件里的内容,将引入的js文件jquery.tablePagination.0.2.js修改成如下：
<span style="font-family:SimSun;font-size:12px;"><span style="font-family:SimSun;font-size:12px;">/** * tablePagination - A table plugin for jQuery that creates pagination elements * * http://neoalchemy.org/tablePagination.html * * Copyright (c) 2009 Ryan Zielke (neoalchemy.com) * licensed under the MIT licenses: * http://www.opensource.org/licenses/mit-license.php * * @name tablePagination * @type jQuery * @param Object settings; * firstArrow - Image - Pass in an image to replace default image. Default: (new Image()).src=http://www.mamicode.com/"./images/first.gif">刷新页面再看下效果就变成中文的了：
5、TableDnD拖拽表格行
TableDnD是一款表格行拖动插件，在页面中使用鼠标可以任意拖动显示表格行的位置。这个插件应该用的机会不多,我以前的开发是没用到过,也许特定的环境下需要吧。
代码示例：
<span style="font-family:SimSun;font-size:12px;"><span style="font-family:SimSun;font-size:12px;"><!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>TableDnD</title> <link href=http://www.mamicode.com/"images/style.css" rel="stylesheet" type="text/css" media="all" />>6、uiTableEdit表格编辑uiTableEdit是一款很实用的表格数据编辑插件,用法很简单,直接发代码：
<span style="font-family:SimSun;font-size:12px;"><span style="font-family:SimSun;font-size:12px;"><!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>uiTableEdit</title> <link href=http://www.mamicode.com/"images/style.css" rel="stylesheet" type="text/css" media="all" />>效果图：
7、DataTables表格组件
DataTables是一款复杂的数据表格操作插件。DataTables提供了强大的jQuery表格操作特性,如自动筛选、Ajax预读取数据、分页、列排序、高亮排序列、拓展插件支持等。
看下例子：
<span style="font-family:SimSun;font-size:12px;"><span style="font-family:SimSun;font-size:12px;"><!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>DataTables</title> <link href=http://www.mamicode.com/"images/style.css" rel="stylesheet" type="text/css" media="all" />>效果图：在上述示例中可以对表格进行分页、排序、过滤等操作。通过查看页面结构我们可以看到在table表格外面包裹了5个div标签,如图所示：
div部分的详细代码如下：
<span style="font-family:SimSun;font-size:12px;"><span style="font-family:SimSun;font-size:12px;"><div id="grid_length" class="dataTables_length">Show <select size="1" name="grid_length"> <option value=http://www.mamicode.com/"10">10>这些div都是动态添加的。
