【layui】layui表格过滤

1.除了引用必要的layui的js和css，还需引入tableFilter.js。
2.然后就是代码展示部分；

  layui.config({
                base: '../../layui/plugins2/', //扩展路径
                version: 'v1.0.0'
            }).extend({
                tableFilter: 'tableFilter'  //模块别名
            });
                 function setGridData(data) {
            layui.use(['table', 'tableFilter'], function () {
                var form = layui.form;
                var table = layui.table;
                var tableFilter = layui.tableFilter;
                table.render({
                    id: "grid",
                    elem: '#grid',
                    data: data,
                    height: 550,
                    page: false,
                    limit: Number.MAX_VALUE, // 数据表格默认全部显示
                    cols: [[
                      {
                          field: '序号',
                          title: '序号',
                          width: '9%'   
                      },
                     {
                         field: '编号',
                         title: '编号',
                         width: '25%'
                     },
                    {
                        field: '规格',
                        title: '规格',
                        width: '17%'
                    },
                    {
                        field: '色号',
                        title: '色号',
                        width: '10%'
                    }
                    ]],
                    done: function (res, curr, count) {
                        tableFilter.render({
                            'elem': '#grid',
                            'mode': 'local',
                            'filters': [
                                {
                                    field: '编号',
                                    type: 'checkbox'
                                },
                                {
                                    field: '规格',
                                    title: '规格',
                                    type: 'checkbox'
                                }
                            ],
                            'done': function (filters) { }
                        }).reload();
                    }
                });
            });
        }

    运行效果如下：![在这里插入图片描述](https://img-blog.csdnimg.cn/89f8ca6a889a452ca2a47b664d12c124.png)