mkm/dev_oa
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
HDM58\hdm58 2023-08-26 00:55:42 +08:00
parent bc8f9f4976
commit 741562a7f6
3 changed files with 42 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
app/article/view/index/index.html
View File

@ -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 type="reset" class="layui-btn layui-btn-reset" lay-filter="reset">清空</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="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}

27
app/article/view/index/list.html
View File

@ -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 type="reset" class="layui-btn layui-btn-reset" lay-filter="reset">清空</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="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}

39
public/static/assets/gougu/module/tablePlus.js
View File

@ -1,8 +1,7 @@
layui.define(['jquery','layer','table'], function(exports) {
layui.define(function(exports) {
//tablePlus在原来的table模块的基础上实现了批量数据导出功能，实现defaultToolbar中筛选列记忆功能
var $ = layui.$,
layer = layui.layer,
table = layui.table;
var table = layui.table;
var form = layui.form;
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);
};