LAYUI - TABLEFILTER

tableFilter交叉过滤组件，本地/服务端数据过滤，文本/单选/多选过滤类型，自动/自定义/AJAX过滤项，支持IE8

本地过滤演示(local)

创建一个和平常一样的table实例，并且再创建一个tableFilter实例，挂载到table即可完成本地过滤不建议开启分页和排序

服务端过滤演示(api)

和local本地过滤类似。只是将过滤逻辑交给服务端再返回给前端，刷新表格后显示结果数据

因为是本地JSON数据演示，返回数据不会变！可以打开F12控制台Network中查看请求的参数

table.reload('apitable')

核心方法和参数

tableFilter最核心的一个方法就是 tableFilter.render(options)

//1、加载CSS

//2、定义layui组件得到 tableFilter 对象

var tableFilter = layui.tableFilter;

//3、定义一个tableFilter 挂载到 table 上

var tableFilterIns = tableFilter.render({

'elem' : '#localtable',//table的选择器

'mode' : 'local',//过滤模式

'filters' : [],//过滤项配置

'done': function(filters){

//结果回调

}

})

options参数说明

参数选项说明类型示例值

elem指定原始 table 容器的选择器。string"#table"mode

设置过滤方式。

local 本地数据过滤，不匹配的元素将被隐藏
api 服务端过滤，将过滤值放于table where参数中重新reload()
其他字符 自定义过滤，组件将不做处理，仅仅将过滤值放在 done回调中

string"local"parent指定过滤选择器 append 到哪(可有效解决位置问题，比如本文档演示)。 非必填，默认在 body 底部string"body"filters配置过滤项，具体请详见下一张关于filters的参数说明。Array[{},{}]done每一次过滤/移除过滤都将会触发回调，返回 filters 所有过滤条件 不管mode是什么方式，都将返回 filtersFunction-

filters参数说明

filters 是一个对象数组定义哪几个列使用哪种过滤类型

参数选项说明类型示例值

field指定哪列使用过滤，与 table 中 cols 里的 field 同值。string"id"name用于api过滤方式，服务端需要的的参数名。 不填则取 field 的值string"ID"type

设置过滤类型。

input 输入框文本过滤
radio 单选过滤
checkbox 多选过滤

string"input"data用于单选/多选自定义显示过滤项，格式如下。 非必填

[{ "key":"1", "value":"有效"},{ "key":"0", "value":"失效"}]

Array[{},{}]url用于单选/多选AJAX显示过滤项，暂只支持 GET 方式，请求url地址，务必返回格式如下。 非必填

{

"code": 0,

"msg": "",

"data": [

{ "key":"1", "value":"有效"},

{ "key":"0", "value":"失效"}

]

}

string"josn/filter.json"更新日志

2019/01/23 FIX 过滤项不自动更新，合计列不更新，合计列计算精度
2019/01/21 完成初始版本
嗯~单位项目有需求~开始写代码

wgt如何替换原来的html,index.html

TABLEFILTER

文档目录

AUTHOR

LAYUI - TABLEFILTER