TableFilter
/
index.html

<!DOCTYPE HTML>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=Edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
	<meta name="format-detection" content="telephone=no" />
	<meta name="renderer" content="webkit">
	<link rel="stylesheet" href="library/layui/css/layui.css">
	<link rel="stylesheet" href="library/doc.css">
	<link rel="stylesheet" href="tableFilter.css">
	<title>tableFilter</title>
</head>
<body>
<div class="doc-layout">
	<div class="doc-side">
		<h1>TABLEFILTER</h1>
		<h2>文档目录</h2>
		<ul>
			<li><a href="#demo1" title="本地过滤演示(local)">本地过滤演示(local)</a></li>
			<li><a href="#demo2" title="服务端过滤演示(api)">服务端过滤演示(api)</a></li>
			<li><a href="#parm" title="核心方法和参数">核心方法和参数</a></li>
			<li><a href="#uplog" title="更新日志">更新日志</a></li>
		</ul>
		<h2>AUTHOR</h2>
		<ul>
			<li><a href="###">@sakuya</a></li>
		</ul>
	</div>
	<div class="doc-content" id="doc-content">
		<div class="layui-main">
			<h1 class="doc-h1">LAYUI - TABLEFILTER</h1>
			<div class="layui-text">
				tableFilter交叉过滤组件，本地/服务端数据过滤，文本/单选/多选过滤类型，自动/自定义/AJAX过滤项，支持IE8
			</div>

			<fieldset class="layui-elem-field layui-field-title" id="demo1"><legend>本地过滤演示(local)</legend></fieldset>
			<div class="layui-text">
				<p>创建一个和平常一样的table实例，并且再创建一个tableFilter实例，挂载到table即可完成 <span class="layui-badge layui-bg-orange">本地过滤不建议开启分页和排序</span></p>
			</div>
			<table id="localtable" lay-filter="localtable"></table>

			<fieldset class="layui-elem-field layui-field-title" id="demo2"><legend>服务端过滤演示(api)</legend></fieldset>
			<div class="layui-text">
				<p>和local本地过滤类似。只是将过滤逻辑交给服务端再返回给前端，刷新表格后显示结果数据</p>
				<p>因为是本地JSON数据演示，返回数据不会变！可以打开<em>F12</em>控制台<em>Network</em>中查看请求的参数</p>
				<p style="margin:10px 0;">
					<button class="layui-btn layui-btn-primary layui-btn-sm" id="r">table.reload('apitable')</button>
				</p>
			</div>
			<table id="apitable" lay-filter="apitable"></table>

			<fieldset class="layui-elem-field layui-field-title" id="parm"><legend>核心方法和参数</legend></fieldset>
			<div class="layui-text">
				<p>tableFilter最核心的一个方法就是 <em>tableFilter.render(options)</em></p>
			</div>
			<pre class="layui-code" lay-encode="true">
			//1、加载CSS
			<link rel="stylesheet" href="tableFilter.css">

			//2、定义layui组件 得到 tableFilter 对象
			var tableFilter = layui.tableFilter;

			//3、定义一个tableFilter 挂载到 table 上
			var tableFilterIns = tableFilter.render({
			    'elem' : '#localtable',//table的选择器
			    'mode' : 'local',//过滤模式
			    'filters' : [],//过滤项配置
			    'done': function(filters){
			        //结果回调
			    }
			})

			</pre>
			<div class="layui-text">
				<p>options参数说明</p>
			</div>
			<table class="layui-table">
				<colgroup>
					<col width="120">
					<col>
					<col width="120">
					<col width="200">
				</colgroup>
				<thead>
					<tr>
						  <th>参数选项</th>
						  <th>说明</th>
						  <th>类型</th>
						  <th>示例值</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td>elem</td>
						<td>指定原始 table 容器的选择器。</td>
						<td>string</td>
						<td>"#table"</td>
					</tr>
					<tr>
						<td>mode</td>
						<td class="layui-text">
							设置过滤方式。
							<ul>
								<li>local <em>本地数据过滤，不匹配的元素将被隐藏</em></li>
								<li>api <em>服务端过滤，将过滤值放于table where参数中 重新reload()</em></li>
								<li>其他字符 <em>自定义过滤，组件将不做处理，仅仅将过滤值放在 done回调中</em></li>
							</ul>
						</td>
						<td>string</td>
						<td>"local"</td>
					</tr>
					<tr>
						<td>parent</td>
						<td>指定过滤选择器 append 到哪（可有效解决位置问题，比如本文档演示）。<em>非必填，默认在 body 底部</em></td>
						<td>string</td>
						<td>"body"</td>
					</tr>
					<tr>
						<td>filters</td>
						<td>配置过滤项，具体请详见下一张关于filters的参数说明。</td>
						<td>Array</td>
						<td>[{},{}]</td>
					</tr>
					<tr>
						<td>done</td>
						<td>每一次过滤/移除过滤都将会触发回调，返回 filters 所有过滤条件 <em>不管mode是什么方式，都将返回 filters</em></td>
						<td>Function</td>
						<td>-</td>
					</tr>
				</tbody>
			</table>

			<div class="layui-text">
				<p>filters参数说明</p>
				<p>filters 是一个对象数组 定义哪几个列使用哪种过滤类型</p>
			</div>
			<table class="layui-table">
				<colgroup>
					<col width="120">
					<col>
					<col width="120">
					<col width="200">
				</colgroup>
				<thead>
					<tr>
						  <th>参数选项</th>
						  <th>说明</th>
						  <th>类型</th>
						  <th>示例值</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td>field</td>
						<td>指定哪列使用过滤，与 table 中 cols 里的 field 同值。</td>
						<td>string</td>
						<td>"id"</td>
					</tr>
					<tr>
						<td>name</td>
						<td>用于api过滤方式，服务端需要的的参数名。<em>不填则取 field 的值</em></td>
						<td>string</td>
						<td>"ID"</td>
					</tr>
					<tr>
						<td>type</td>
						<td class="layui-text">
							设置过滤类型。
							<ul>
								<li>input <em>输入框文本过滤</em></li>
								<li>radio <em>单选过滤</em></li>
								<li>checkbox <em>多选过滤</em></li>
								<li>date <em>日期范围过滤</em></li>
							</ul>
						</td>
						<td>string</td>
						<td>"input"</td>
					</tr>
					<tr>
						<td>data</td>
						<td>用于单选/多选自定义显示过滤项，格式如下。<em>非必填</em>
							<pre class="layui-code" lay-encode="true">[{ "key":"1", "value":"有效"},{ "key":"0", "value":"失效"}]</pre>
						</td>
						<td>Array</td>
						<td>[{},{}]</td>
					</tr>
					<tr>
						<td>url</td>
						<td>用于单选/多选AJAX显示过滤项，暂只支持 GET 方式，请求url地址，务必返回格式如下。<em>非必填</em>
							<pre class="layui-code" lay-encode="true">
								{
								    "code": 0,
								    "msg": "",
								    "data": [
								        { "key":"1", "value":"有效"},
								        { "key":"0", "value":"失效"}
								    ]
								}
							</pre>
						</td>
						<td>string</td>
						<td>"josn/filter.json"</td>
					</tr>
				</tbody>
			</table>

			<fieldset class="layui-elem-field layui-field-title" id="uplog"><legend>更新日志</legend></fieldset>
			<ul class="layui-timeline">
				<li class="layui-timeline-item">
					<i class="layui-icon layui-timeline-axis"></i>
					<div class="layui-timeline-content layui-text">
						<div class="layui-timeline-title">2029/04/17 ADD 日期类型，UP 更新序号</div>
					</div>
				</li>
				<li class="layui-timeline-item">
					<i class="layui-icon layui-timeline-axis"></i>
					<div class="layui-timeline-content layui-text">
						<div class="layui-timeline-title">2019/01/23 FIX 过滤项不自动更新，合计列不更新，合计列计算精度</div>
					</div>
				</li>
				<li class="layui-timeline-item">
					<i class="layui-icon layui-timeline-axis"></i>
					<div class="layui-timeline-content layui-text">
						<div class="layui-timeline-title">2019/01/21 完成初始版本</div>
					</div>
				</li>
				<li class="layui-timeline-item">
					<i class="layui-icon layui-timeline-axis"></i>
					<div class="layui-timeline-content layui-text">
						<div class="layui-timeline-title">嗯~单位项目有需求~开始写代码</div>
					</div>
				</li>
			</ul>

		</div>
	</div>
</div>
<script type="text/javascript" src="library/layui/layui.js"></script>
<script type="text/javascript" src="library/jquery1.11.1.min.js"></script>
<script type="text/javascript">
layui.use(['jquery', 'table', 'code', 'tableFilter'], function(){
	layui.code();
	var $ = layui.jquery,
	table = layui.table,
	tableFilter = layui.tableFilter;


	//本地演示
	var localtable = table.render({
		elem: '#localtable',
		page: false,
		height : '313',
		totalRow : true,
		url:'json/list.json',
		cols: [[
			{type: 'numbers',  title: '序号', fixed: 'left', totalRowText: "合"},
			{field: 'state',  title: '状态(Tds)',fixed: 'left', width: 200},
			{field: 'id', title: '学号', width: 200},
			{field: 'date', title: '入学', width: 200},
			{field: 'username', title: '姓名(Ajax)', width: 200},
			{field: 'sex', title: '性别(Tds)', width: 150},
			{field: 'jf', title: '积分', width: 100, totalRow:true},
			{field: 'class', title: '班级(Data)', width: 150}
		]],
		done: function(res, curr, count){
			localtableFilterIns.reload()
		}
	});

	var localtableFilterIns = tableFilter.render({
		'elem' : '#localtable',
		'parent' : '#doc-content',
		'mode' : 'local',
		'filters' : [
			{field: 'state', type:'checkbox'},
			{field: 'id', type:'input'},
			{field: 'date', type:'date'},
			{field: 'username', type:'checkbox', url:'json/filter.json'},
			{field: 'sex', type:'radio'},
			{field: 'class', type:'checkbox', data:[{ "key":"12", "value":"十二班"}]}
		],
		'done': function(filters){}
	})


	//API演示
	var apitable = table.render({
		elem: '#apitable',
		page: true,
		height : '313',
		url:'json/list.json',
		cols: [[
			{checkbox: true, fixed: 'left'},
			{type: 'numbers',  title: '序号', fixed: 'left'},
			{field: 'state',  title: '状态(Tds)',fixed: 'left', width: 200},
			{field: 'id', title: '学号', width: 200},
			{field: 'date', title: '入学', width: 200},
			{field: 'username', title: '姓名(Ajax)'},
			{field: 'sex', title: '性别(Tds)', width: 150},
			{field: 'class', title: '班级(Data)', width: 150}
		]],
		done: function(res, curr, count){
			console.log("监听where:", this.where);

			//非常重要！如果使table.reload()后依然使用过滤，就必须将过滤组件也reload()一下
			apitableFilterIns.reload()
		}
	});

	var apitableFilterIns = tableFilter.render({
		'elem' : '#apitable',
		'parent' : '#doc-content',
		'mode' : 'api',
		'filters' : [
			{field: 'state', type:'checkbox'},
			{field: 'id', type:'input'},
			{field: 'date', type:'date'},
			{field: 'username', type:'checkbox', url:'json/filter.json'},
			{field: 'sex', type:'radio'},
			{field: 'class', type:'checkbox', data:[{ "key":"12", "value":"十二班"}]}
		],
		'done': function(filters){

		}
	})

	//reload演示
	$('#r').on('click', function(e) {
		table.reload('apitable')
	})

});
</script>
</body>
</html>