Mikel
[转载]自己动手—-基于jQuery的表格控件（更正DEMO下载地址） – 会动的稻草人 – 博客园.
控件效果图：
一、功能说明
1、使用简单、扩展方便。
2、表格样式可自定义，只需修改相应的CSS样式即可。
3、支持行点击事件自定义。
4、支持复选框选择行。
5、执行列排序（支持数字、日期时间、英文、汉字等）。
6、支持自定义行按钮及按钮事件（如编辑、删除按钮等）
7、支持自定义数据的显示样式（根据当前数据或当前行数据）
8、支持分页显示数据，且在插件内部实现分页处理。
2、表格样式可自定义，只需修改相应的CSS样式即可。
3、支持行点击事件自定义。
4、支持复选框选择行。
5、执行列排序（支持数字、日期时间、英文、汉字等）。
6、支持自定义行按钮及按钮事件（如编辑、删除按钮等）
7、支持自定义数据的显示样式（根据当前数据或当前行数据）
8、支持分页显示数据，且在插件内部实现分页处理。
二、使用说明
该插件的使用，基本只需两个步骤即可，一个是表格的声明（创建），然后就是数据的加载。1、表格的声明（创建）
var objTable = new HyTable({
columns: [
{name: '姓名', mapping: 'username', type: 'string', width: '100',
allowSort: true, renderer: function(val){return val;}}
], //(array)列信息
emptyMsg: "暂无数据", //(string)无数据时的提示信息
renderTo: "", //(string)表格容器，必须是HTML元素的ID属性值
model: 'remote', //(string)模式，远程(remote)or本地(local)
url: '', //(string)远程模式的获取数据的url地址
allowPaging: true, (bool)//是否分页
pageSize: 20, //(int)每页显示的行数
checkSelected: false, //(bool)复选框选择
selectedField: "", //(string)复选框选中字段
stripeRows: false, //(bool)是否启用隔行变色 默认不启用
onRowClick: null //(function)行点击事件
});
2、表格数据的加载
objTable.loadData(1,data); //第一个参数为加载页的页索引，第二个参数有两种情况， 1：如果参数内容是JSON对象， 则表示是查询的查询条件，如果是数据，则表示直接加载本地数据到表格中。
三、各参数意义（API）
| columns： |
参数类型：json数组
表格的列定义 {
name:'列头名称',
mapping:'code', //(string)映射JSON数据中的键名称
width:'100', //(string)列宽度，可数字或百分比等
allowSort:true, //(bool)是否排序
type:'string/int/float/datetime/action', //(string)数据类型或列类型，前四个为数据类型，为action表示为操作列，放置按钮用
renderer:function(val,json){return "内容前加文字"+val;},
//(function)列渲染函数function，参数为当前单元格的值及当前行的数据
content:[{text:'修改',code:'edit',handler:function(data),renderer:function(data){return false or true;}}]
//按钮列的按钮，可为JSON数组表示多个或一个按钮
//handler 为当前按钮的点击事件，参数为JSON格式的当前行数据。
//renderer 为控制当前按钮是否显示的事件，可选，参数为JSON格式的当前行数据，主要用于根据当前行数据决定是否显示该按钮用。
返回false则表示按钮不显示，返回true则显示。
}
|
| emptyMsg： |
参数类型：string
数据为空时，显示的提示文字，如：暂无数据。 |
| renderTo： |
参数类型：string
表格的父级容器，为HTML元素的ID属性值 |
| model： |
参数类型：string
（默认为“remote”）表格数据加载模式，值为“remote”则表示从远程加载表格数据，为“local”则表示从本地加载数据 |
| url： |
参数类型：string
（仅在model=”remote”时有效）远程数据加载地址 |
| allowPaging： |
参数类型：bool
（默认为“true”）是否分页显示数据，仅远程加载表格数据才支持分页。 |
| pageSize： |
参数类型：int
（默认为“20”，仅在allowPaging=true时有效）每页显示的记录数 |
| checkSelected： |
参数类型：bool
（默认为“false”）是否启用复选框选择数据，启用后，可使用getSelected()方法获取选中的数据，多条以逗号间隔 |
| selectedField： |
参数类型：string
（仅在checkSelected=true时有效）选中数据时，用以标识数据的主键字段 |
| stripeRows： |
参数类型：bool
（默认为“false”）是否启用表格隔行变色效果 |
| onRowClick： |
参数类型：function(json)
行点击时触发的事件，方法参数为JSON格式的当前点击行数据。可使用（json.字段名）获取数据 |
四、开发思路
主要是在开发该插件时的想法及部分注意事项，方便后期同事维护该插件。
1、表格生成过程：创建表格(主要为列头）（绑定列排序点击事件等）–> 加载数据 （绑定行点击事件、复选框选中、行中按钮定义、单元格数据显示）2、loadData(1,data)方法的第二个参数，如果是远程加载数据，则该参数内容为查询条件的JSON格式。查询数据时，将查询条件组织成JSON格式，然后调用该方法即可。3、插件在获取分页数据时，会自动往后台传入start及end两个参数，即获取数据的起始行及结束行，
如每页显示20条，则获取第5页数据时，会传入start=80,end=100这两个参数，这也方便oracle数据库获取数据。4、定义按钮操作列时，code字段不能为空，该字段主要是绑定按钮事件时，查询按钮用。
如每页显示20条，则获取第5页数据时，会传入start=80,end=100这两个参数，这也方便oracle数据库获取数据。4、定义按钮操作列时，code字段不能为空，该字段主要是绑定按钮事件时，查询按钮用。
另外，在插件中所在的JS文件中，我还放置了一个简单的将JSON格式数据加载到表单中的方法$(obj).loadForm(data)，其中data为JSON格式数据。
该功能与JQuery中的serializeArray()方法相反，serializeArray()方法将一个指定HTML元素中的输入项的值序列化为JSON对象，
而loadForm(data)方法则是将JSON对象赋值到指定HTML元素中的输入项。
该功能与JQuery中的serializeArray()方法相反，serializeArray()方法将一个指定HTML元素中的输入项的值序列化为JSON对象，
而loadForm(data)方法则是将JSON对象赋值到指定HTML元素中的输入项。
DEMO下载地址：http://115.com/file/e7sxriym#JQuery.HyTable表格Demo.rar
