好几天没有写日志了，其实之所以把这个习惯坚持下来，很大的一个原因是自己的记性不好。今天分享的内容是树形折叠表格treeTable的使用。
在一些开发中我们经常会碰到一些表单需要根据上下级的关系展开和折叠。Layui自身也带了相关的组件，但是对于Table表格的折叠，我觉得treeTable算是一款非常不错的插件。
treeTable插件地址：https://gitee.com/whvse/treetable-lay/
但是本篇笔记波波分享的绝不是简单的引用插件，因为基础的使用在项目的文档中作者已经写过了。我们今天要实现的第一是表格的搜索，另一个是表格数据的排序。效果如下所示：
1、treeTable搜索功能：
- /* 表格搜索 */
- form.on('submit(formSearch)', function (data) {
- doTbSearch(data.field, 'id');
- return false;
- });
- /* 搜索表格数据 */
- function doTbSearch(field, idName) {
- var ids = [], isClear = true;
- for (var i = 0; i < tbDataList.length; i++) {
- var item = tbDataList[i], flag = true;
- for (var f in field) {
- if (!field.hasOwnProperty(f)) continue;
- if (!field[f]) continue;
- isClear = false;
- if (!item[f] || item[f].indexOf(field[f]) === -1) {
- flag = false;
- break;
- }
- }
- if (flag) ids.push(item[idName]);
- }
- if (isClear) {
- insTb.clearFilter();
- } else {
- insTb.filterData(ids);
- }
- }
HTML部分就不写了，就是很简单的表单，搜索按钮添加如下属性即可。
- lay-filter="formSearch" lay-submit
form用到的是layui自身的Form组件进行的事件监听，如果大家用的不是layui框架，可以做JS的点击事件即可。
2、treeTable的数据排序
数据排序需要前后端的配合，这里以波波开发的Tp-admin框架为例。treeTable的数据排序仅需要我们对表格渲染render时增加一列即可。代码如下：
- {field: 'sort',title: '<button type="submit" class="layui-btn layui-btn-xs layui-btn-normal">排 序</button>',width:100,align:'center',templet:function (d) {
- return '<input name="_'+d.id+'" value="'+d.sort+'" class="list-sort-input"/>';
- }
- },
不需要添加额外的任何代码，即可实现数据表格的排序。是不是很方便呢？欢迎朋友们也给Tp-admin项目点个star哈。
Tp-admin项目地址：https://gitee.com/zkii_admin/Tp-admin
