可固定头尾和两边的列的表格插件

jquery.utable.js 说明文档

1目的

此文档包含了用jquery.utable.js创建业务表格的所有知识。

2说明

本插件提供了列固定的功能，以及可按一系列自定义展示的配置

3起步

3.1创建一個容器

引入依赖文件后，在需要创建表格的地方编写个div标签作为容器，再编写初始化控件的代码即可呈现表格。

例如：

<div id="utable1"></div>

3.2准备数据接口

创建一个data.json文件作为请求的数据接口，文件包含的有以下数据，其中TotalCount代表数据总数和，Items为要显示的数据序列，序列项必须保持属性、类型一致且具有唯一键代表数据项。

3.4载入utable

由于utable依赖jquery，所以首先引入jquery.js（>=1.8），再引入jquery.utable.js以及样式jquery.utable.css文件。

3.5初始化utable

4详细说明

4.1配置说明

4.1.1.containerSelector jquery容器选择器

如： $(containerSelector).utable(UTableOption)

4.2.2. UTableOption 表格主配置项

如： $(containerSelector).utable(UTableOption)

属性说明：

回调事件和函数

1、rowClickHandler:void

说明：用户点击行事件 参数：

evt 事件信息

model 当前行数据项

2、changeRadioButton:void

说明：选择单选框时触发

参数： evt事件信息 model当前行数据项

3、changeCheckboxButton:void

说明：选择复选框时触发 参数： evt事件信息 model当前行数据项

4、afterLoad:void

说明：加载数据完成后触发 参数： response 原始 response 对象 5、checkAllChangeHandler:void 说明：选择全部回调方法 参数： evt 事件信息 6、beforePageChange:void 说明：跳页前 参数：

evt 事件信息

pageObj 跳页的参数信息

currentPageIndex：当前页码

pageSize：每页显示行数

totalCount：总行数

pageTotal：总页码

7、parseItems: Array

说明：本函数接收原始 response 对象，返回可以用于展示的数组 参数

response 原始 response 对象

返回

Array 展示的数组

4.2.3.UTableColumnOption 配置项

UtableColumnOption代表表格列的配置项

回调函数与事件：

1、 clickEvent 点击事件

a) 参数：evt 事件对象

model 当前行的数据对象

rowTag 当前行的tr对象

2、 func：当没配置format时，每次展示数据时都会执行，执行后的返回值是改单元格显示的结果

参数：

model 当前行对象 text 文本 cell td Dom对象

link a 标签对象

rowTag tr 标签对象

4.2.4. LinkOption配置项

3、 clickEvent 点击事件

a) 参数：evt 事件对象

model 当前行的数据对象

rowTag 当前行的tr对象

4、 func：每次展示数据时都会执行，执行后的返回值是改单元格显示的结果

参数：

model 当前行对象

text 文本 cell td Dom对象

link a 标签对象

rowTag tr 标签对象

4.2.5 FooterOptions表脚配置项

由于这里内容比较多，贴个示例代码：

Rows: [ { RowType: "合计", RowTypeNameIndex: 2, Cells: [ { CellIndex: 8, // data 为请求回来的数据, cell为当前单元格Dom Func: function (data, cell) { // console.log(data); var total=0; for(var i=0;i<data.Result.Items.length;i++){ total+=data.Result.Items[i].money; } return total; } } ] }, { RowType: "平均数", RowTypeNameIndex: 2, Cells: [ { CellIndex: 8, // data 为请求回来的数据, cell为当前单元格Dom Func: function (data, cell) { var total=0; for(var i=0;i<data.Result.Items.length;i++){ total+=data.Result.Items[i].money; } return total/data.Result.Items.length; } } ] } ]