本文介绍如何实现一个简洁易用的表格组件。

它对应的源码是：

https://github.com/liuyunzhuge/blog/blob/master/form/src/js/mod/listView/tableView.js

https://github.com/liuyunzhuge/blog/blob/master/form/src/js/mod/listView/tableDrag.js

https://github.com/liuyunzhuge/blog/blob/master/form/src/js/mod/listView/tableOrder.js

https://github.com/liuyunzhuge/blog/blob/master/form/src/js/mod/listView/tableDefault.js

其中tableView是表格组件的核心。tableDrag和tableOrder是我写的两个插件，分别让表格支持列宽调整和自动生成序号列。tableDefault目前的作用仅仅是简化插件的配置。下面的demo可以让你了解下它的基本功能：

http://liuyunzhuge.github.io/blog/form/dist/html/tableView.html

效果如下：

对应的演示代码为：

http://liuyunzhuge.github.io/blog/form/dist/js/app/tableView.js

在了解它的详细实现思路前，你可以通过上面的演示代码来查看这个组件的使用方式。整体上它与其它列表组件的用法类似，但是由于表格组件在结构和功能上的特异性，所以它在实例化的时候要用到好几个其它列表组件不具备的option。实例代码如下：

补充：在demo中，我用heightFixed这个option用来表示是否要固定表格的高度；用plugins这个option来配置当前实例要扩展的插件功能，利用到了tableDefaults来注册默认的插件组；最后通过jquery的形式给表格行内的某个dom元素绑定了点击事件，并在回调内通过表格组件的实例化方法getRowData获取到了该行对应的表格数据。

这个表格组件除了支持分页查询，排序之外，还支持以下功能：

1. 序号列生成，列宽调整，理论上可以通过自定义插件的方式再扩展更多的功能；比如树形表格、表格编辑等；可直接通过表格实例，对插件进行增删改查；

2. 自由切换是否固定表格高度，当表格高度固定时，表头会固定，然后表体会以auto模式控制滚动条；滚动时，表头由于固定所以不会被遮挡，便于用户查看表格数据；如果表格高度不固定，那么表体就不会出现滚动条，表头固定也就没有意义了；

3. css完全灵活，可通过option改变表格组件内部实现时需要的所有css class；

4. html结构相对灵活，表头和表体的html都以模板的形式定义，如需在表头和表体中插入相对个性化的内容，直接在模板中插入即可；

5. 支持表格行，单选和多选；当然两种模式只能用其一；

6. 可方便地根据表格行的索引，获取该行对应的原始数据和解析后的数据；原始数据就是ajax返回后未经parseData这个option处理的数据；解析后的数据就是parseData处理后的数据；

7. 可方便地获取所有选中行的单个属性值；

8. 当窗口resize，DOM更改等影响到表格内容的时候，表格的布局会自动调整；也支持手动触发调整；

总的来说，这个组件的实现并不麻烦，就是因为要实现的功能多，所以内容也多。

首先，先来了解下它html结构：