列表组件抽象(5):简洁易用的表格组件

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

它对应的源码是:

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

效果如下:

459873-20160921012044762-551259764

对应的演示代码为:

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

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