TABLEFILTER

文档目录

AUTHOR

LAYUI - TABLEFILTER

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

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

服务端过滤演示(api)

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

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

核心方法和参数

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是什么方式,都将返回 filters Function -

filters参数说明

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

参数选项 说明 类型 示例值
field 指定哪列使用过滤,与 table 中 cols 里的 field 同值。 string "id"
name 用于api过滤方式,服务端需要的的参数名。不填则取 field 的值 string "ID"
type 设置过滤类型。
  • input 输入框文本过滤
  • radio 单选过滤
  • checkbox 多选过滤
  • date 日期范围过滤
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"
更新日志
  • 2029/04/17 ADD 日期类型,UP 更新序号
  • 2019/01/23 FIX 过滤项不自动更新,合计列不更新,合计列计算精度
  • 2019/01/21 完成初始版本
  • 嗯~单位项目有需求~开始写代码