优化tablePlus组件，支持表格列表数据快捷搜索。

app/article/view/index/index.html

@@ -15,8 +15,8 @@
 			<input type="text" name="keywords" placeholder="标题/分类/描述/内容" class="layui-input" autocomplete="off" />
 		</div>
 		<div class="layui-input-inline" style="width:150px;">
-			<button class="layui-btn layui-btn-normal" lay-submit="" lay-filter="webform"><i class="layui-icon layui-icon-search mr-1"></i>搜索</button>
+			<button class="layui-btn layui-btn-normal" lay-submit="" lay-filter="table-search"><i class="layui-icon layui-icon-search mr-1"></i>搜索</button>
-			<button type="reset" class="layui-btn layui-btn-reset" lay-filter="reset">清空</button>
+			<button type="reset" class="layui-btn layui-btn-reset" lay-filter="table-search-reset">清空</button>
 		</div>
 	</form>
 	<table class="layui-hide" id="test" lay-filter="test"></table>
@@ -31,17 +31,13 @@
 <!-- 脚本 -->
 {block name="script"}
 <script>
-	const moduleInit = ['tool'];
+	const moduleInit = ['tool','tablePlus'];
 	function gouguInit() {
-		var table = layui.table, tool = layui.tool ,form = layui.form;
+		var table = layui.tablePlus, tool = layui.tool ,form = layui.form;
 		layui.pageTable = table.render({
 			elem: '#test',
 			title: '文章列表',
-			defaultToolbar: false,
 			url: "/article/index/index", //数据接口
-			cellMinWidth: 80,
-			page: true, //开启分页
-			limit: 20,
 			cols: [
 				[ //表头
 					{
@@ -82,20 +78,6 @@
 				]
 			]
 		});
-
-		//监听搜索提交
-		form.on('submit(webform)', function(data) {
-			layui.pageTable.reload({
-				where: {
-					keywords: data.field.keywords,
-					cate_id: data.field.cate_id
-				},
-				page: {
-					curr: 1
-				}
-			});
-			return false;
-		});
 	}
 </script>
 {/block}

app/article/view/index/list.html

@@ -15,8 +15,8 @@
 			<input type="text" name="keywords" placeholder="标题/分类/描述/内容" class="layui-input" autocomplete="off" />
 		</div>
 		<div class="layui-input-inline" style="width:150px;">
-			<button class="layui-btn layui-btn-normal" lay-submit="" lay-filter="webform"><i class="layui-icon layui-icon-search mr-1"></i>搜索</button>
+			<button class="layui-btn layui-btn-normal" lay-submit="" lay-filter="table-search"><i class="layui-icon layui-icon-search mr-1"></i>搜索</button>
-			<button type="reset" class="layui-btn layui-btn-reset" lay-filter="reset">清空</button>
+			<button type="reset" class="layui-btn layui-btn-reset" lay-filter="table-search-reset">清空</button>
 		</div>
 	</form>
 	<table class="layui-hide" id="test" lay-filter="test"></table>
@@ -42,18 +42,15 @@
 <!-- 脚本 -->
 {block name="script"}
 <script>
-	const moduleInit = ['tool'];
+	const moduleInit = ['tool','tablePlus'];
 	function gouguInit() {
-		var table = layui.table, tool = layui.tool ,form = layui.form;
+		var table = layui.tablePlus, tool = layui.tool ,form = layui.form;
 		layui.pageTable = table.render({
 			elem: '#test',
 			title: '文章列表',
 			toolbar: '#toolbarDemo',
-			defaultToolbar: false,
+			defaultToolbar:false,
 			url: "/article/index/list", //数据接口
-			cellMinWidth: 80,
-			page: true, //开启分页
-			limit: 20,
 			cols: [
 				[ //表头
 					{
@@ -145,20 +142,6 @@
 				});
 			}
 		});
-
-		//监听搜索提交
-		form.on('submit(webform)', function(data) {
-			layui.pageTable.reload({
-				where: {
-					keywords: data.field.keywords,
-					cate_id: data.field.cate_id
-				},
-				page: {
-					curr: 1
-				}
-			});
-			return false;
-		});
 	}
 </script>
 {/block}

public/static/assets/gougu/module/tablePlus.js

@@ -1,8 +1,7 @@
-layui.define(['jquery','layer','table'], function(exports) {
+layui.define(function(exports) {
 	//tablePlus在原来的table模块的基础上实现了批量数据导出功能，实现defaultToolbar中筛选列记忆功能
-	var $ = layui.$,
+	var table = layui.table;	
-	layer = layui.layer,
+	var form = layui.form;	
-	table = layui.table;	
     var MOD_NAME='tablePlus';	
     var tablePlus=$.extend({},table);	
     tablePlus._render = tablePlus.render;	
@@ -63,15 +62,25 @@ layui.define(['jquery','layer','table'], function(exports) {
 		let is_excel = params.is_excel||false;
 		let cols_save = params.cols_save||false;
 		let excel_limit = params.excel_limit||1000;
+		if(params.limit === undefined){
+			params.limit = 20;
+		}
+		if(params.page === undefined){
+			params.page = true;
+		}
+		if(params.cellMinWidth === undefined){
+			params.cellMinWidth = 80;
+		}	
 		if(is_excel){
 			let toolbar = ['filter', {title:'导出EXCEL',layEvent: 'LAYTABLE_EXCEL',icon: 'layui-icon-export'},{title:'数据说明',layEvent: 'LAYTABLE_HELP',icon: 'layui-icon-help'}];
-			if(!params.defaultToolbar){
+			if(params.defaultToolbar == false){
 				params.defaultToolbar = toolbar;
 			}	
 			else{
-				let _toolbar = params.defaultToolbar;
+				let _toolbar = params.defaultToolbar||[];
 				params.defaultToolbar = _toolbar.concat(toolbar);
 			}
+			
 			if(typeof params.done === "function"){
 				let _done = params.done;
 				params.done = function(data, curr, count){
@@ -118,6 +127,24 @@ layui.define(['jquery','layer','table'], function(exports) {
 			params.cols = cols;
 		}
 		var init = tablePlus._render(params);
+		//监听搜索提交
+		form.on('submit(table-search)', function(data) {
+			init.reload({
+				where: data.field,
+				page: {curr: 1}
+			});
+			return false;
+		});
+		//重置搜索提交
+		$('body').on('click', '[lay-filter="table-search-reset"]', function () {
+			let prev = $(this).prev();
+			if (typeof(prev) != "undefined") {
+				setTimeout(function () {
+					prev.click();
+				}, 10)
+			}
+		});
+		
 		return init;
 		//console.log(params);
     };