mirror of
https://gitee.com/ulthon/ulthon_admin.git
synced 2026-07-01 15:32:48 +08:00
refactor(table): 重构搜索表单的HTML结构和事件处理
- 简化搜索表单的HTML结构，移除外层div，直接使用fieldset - 将表单监听逻辑提取为独立的listenTableSearch方法 - 改进搜索表单的显示/隐藏逻辑，使用layui-hide类控制 - 统一搜索按钮的样式和事件绑定方式
This commit is contained in:
augushong
@@ -458,27 +458,20 @@
|
||||
}
|
||||
});
|
||||
var html = '';
|
||||
html += '<div class="search-form">\n';
|
||||
html += ' <fieldset class="table-search-fieldset">\n';
|
||||
html += ' <legend>搜索信息</legend>\n';
|
||||
html += ' <div style="margin: 10px">\n';
|
||||
html += ' <form class="layui-form layui-form-pane" action="" lay-filter="' + tableId + '_filter_form" id="' + tableId + '_filter_form">\n';
|
||||
html += ' <div class="layui-form-item">\n';
|
||||
html += '<fieldset id="searchFieldset_' + tableId + '" class="table-search-fieldset layui-hide">\n';
|
||||
html += ' <legend>条件搜索</legend>\n';
|
||||
html += ' <form class="layui-form layui-form-pane form-search" lay-filter="' + tableId + '_filter_form">\n';
|
||||
html += formHtml;
|
||||
html += ' <div class="layui-inline">\n';
|
||||
html += ' <button type="submit" class="layui-btn layui-btn-primary" lay-submit lay-filter="' + tableId + '_filter_form_submit" data-table-filter="' + tableId + '" data-table-target="' + tableId + '">\n';
|
||||
html += ' <i class="layui-icon layui-icon-search"></i> 搜 索\n';
|
||||
html += ' </button>\n';
|
||||
html += ' <button type="reset" class="layui-btn layui-btn-primary" data-table-reset="' + tableId + '"><i class="layui-icon layui-icon-refresh"></i> 重 置</button>\n';
|
||||
html += ' </div>\n';
|
||||
html += ' </div>\n';
|
||||
html += ' </form>\n';
|
||||
html += ' <div class="layui-form-item layui-inline" style="margin-left: 115px">\n';
|
||||
html += ' <button type="submit" class="layui-btn layui-btn-normal" data-type="tableSearch" data-table="' + tableId + '" lay-submit lay-filter="' + tableId + '_filter"> 搜 索</button>\n';
|
||||
html += ' <button type="reset" class="layui-btn layui-btn-primary" data-table-reset="' + tableId + '"> 重 置 </button>\n';
|
||||
html += ' </div>\n';
|
||||
html += ' </fieldset>\n';
|
||||
html += '</div>\n';
|
||||
html += ' </form>\n';
|
||||
html += '</fieldset>\n';
|
||||
|
||||
if ($(elem).prev().hasClass("search-form")) {
|
||||
$(elem).prev().remove();
|
||||
var searchFieldsetId = '#searchFieldset_' + tableId;
|
||||
if ($(searchFieldsetId).length) {
|
||||
$(searchFieldsetId).remove();
|
||||
}
|
||||
$(elem).before(html);
|
||||
|
||||
@@ -488,8 +481,11 @@
|
||||
laydate.render(val);
|
||||
});
|
||||
|
||||
// 监听表单提交事件
|
||||
form.on('submit(' + tableId + '_filter_form_submit)', function (data) {
|
||||
admin.table.listenTableSearch(tableId);
|
||||
return options;
|
||||
},
|
||||
listenTableSearch: function (tableId) {
|
||||
form.on('submit(' + tableId + '_filter)', function (data) {
|
||||
var dataField = data.field;
|
||||
var formatFilter = {},
|
||||
formatOp = {};
|
||||
@@ -517,7 +513,6 @@
|
||||
}, 'data');
|
||||
return false;
|
||||
});
|
||||
return options;
|
||||
},
|
||||
renderLayout: function (options) {
|
||||
var tableId = options.id;
|
||||
@@ -1236,14 +1231,17 @@
|
||||
},
|
||||
listenToolbar: function (layFilter, tableId) {
|
||||
table.on('toolbar(' + layFilter + ')', function (obj) {
|
||||
var options = obj.config;
|
||||
var tableId = obj.config.id;
|
||||
var item = obj.event;
|
||||
switch (item) {
|
||||
case 'TABLE_SEARCH':
|
||||
if (!$('#' + tableId + '_filter_form').is(':visible')) {
|
||||
$('#' + tableId + '_filter_form').removeClass('layui-hide');
|
||||
$('#' + tableId + '_filter_form').show();
|
||||
var searchFieldsetId = 'searchFieldset_' + tableId;
|
||||
var _that = $("#" + searchFieldsetId);
|
||||
if (_that.hasClass("layui-hide")) {
|
||||
_that.removeClass('layui-hide');
|
||||
} else {
|
||||
$('#' + tableId + '_filter_form').hide();
|
||||
_that.addClass('layui-hide');
|
||||
}
|
||||
break;
|
||||
case 'TABLE_LAYOUT':
|
||||
|
||||
@@ -779,27 +779,20 @@
|
||||
}
|
||||
});
|
||||
var html = '';
|
||||
html += '<div class="search-form">\n';
|
||||
html += ' <fieldset class="table-search-fieldset">\n';
|
||||
html += ' <legend>搜索信息</legend>\n';
|
||||
html += ' <div style="margin: 10px">\n';
|
||||
html += ' <form class="layui-form layui-form-pane" action="" lay-filter="' + tableId + '_filter_form" id="' + tableId + '_filter_form">\n';
|
||||
html += ' <div class="layui-form-item">\n';
|
||||
html += '<fieldset id="searchFieldset_' + tableId + '" class="table-search-fieldset layui-hide">\n';
|
||||
html += ' <legend>条件搜索</legend>\n';
|
||||
html += ' <form class="layui-form layui-form-pane form-search" lay-filter="' + tableId + '_filter_form">\n';
|
||||
html += formHtml;
|
||||
html += ' <div class="layui-inline">\n';
|
||||
html += ' <button type="submit" class="layui-btn layui-btn-primary" lay-submit lay-filter="' + tableId + '_filter_form_submit" data-table-filter="' + tableId + '" data-table-target="' + tableId + '">\n';
|
||||
html += ' <i class="layui-icon layui-icon-search"></i> 搜 索\n';
|
||||
html += ' </button>\n';
|
||||
html += ' <button type="reset" class="layui-btn layui-btn-primary" data-table-reset="' + tableId + '"><i class="layui-icon layui-icon-refresh"></i> 重 置</button>\n';
|
||||
html += ' </div>\n';
|
||||
html += ' </div>\n';
|
||||
html += ' </form>\n';
|
||||
html += ' <div class="layui-form-item layui-inline" style="margin-left: 115px">\n';
|
||||
html += ' <button type="submit" class="layui-btn layui-btn-normal" data-type="tableSearch" data-table="' + tableId + '" lay-submit lay-filter="' + tableId + '_filter"> 搜 索</button>\n';
|
||||
html += ' <button type="reset" class="layui-btn layui-btn-primary" data-table-reset="' + tableId + '"> 重 置 </button>\n';
|
||||
html += ' </div>\n';
|
||||
html += ' </fieldset>\n';
|
||||
html += '</div>\n';
|
||||
html += ' </form>\n';
|
||||
html += '</fieldset>\n';
|
||||
|
||||
if ($(elem).prev().hasClass("search-form")) {
|
||||
$(elem).prev().remove();
|
||||
var searchFieldsetId = '#searchFieldset_' + tableId;
|
||||
if ($(searchFieldsetId).length) {
|
||||
$(searchFieldsetId).remove();
|
||||
}
|
||||
$(elem).before(html);
|
||||
|
||||
@@ -809,8 +802,11 @@
|
||||
laydate.render(val);
|
||||
});
|
||||
|
||||
// 监听表单提交事件
|
||||
form.on('submit(' + tableId + '_filter_form_submit)', function (data) {
|
||||
admin.table.listenTableSearch(tableId);
|
||||
return options;
|
||||
},
|
||||
listenTableSearch: function (tableId) {
|
||||
form.on('submit(' + tableId + '_filter)', function (data) {
|
||||
var dataField = data.field;
|
||||
var formatFilter = {},
|
||||
formatOp = {};
|
||||
@@ -838,7 +834,6 @@
|
||||
}, 'data');
|
||||
return false;
|
||||
});
|
||||
return options;
|
||||
},
|
||||
renderLayout: function (options) {
|
||||
var tableId = options.id;
|
||||
@@ -1557,14 +1552,17 @@
|
||||
},
|
||||
listenToolbar: function (layFilter, tableId) {
|
||||
table.on('toolbar(' + layFilter + ')', function (obj) {
|
||||
var options = obj.config;
|
||||
var tableId = obj.config.id;
|
||||
var item = obj.event;
|
||||
switch (item) {
|
||||
case 'TABLE_SEARCH':
|
||||
if (!$('#' + tableId + '_filter_form').is(':visible')) {
|
||||
$('#' + tableId + '_filter_form').removeClass('layui-hide');
|
||||
$('#' + tableId + '_filter_form').show();
|
||||
var searchFieldsetId = 'searchFieldset_' + tableId;
|
||||
var _that = $("#" + searchFieldsetId);
|
||||
if (_that.hasClass("layui-hide")) {
|
||||
_that.removeClass('layui-hide');
|
||||
} else {
|
||||
$('#' + tableId + '_filter_form').hide();
|
||||
_that.addClass('layui-hide');
|
||||
}
|
||||
break;
|
||||
case 'TABLE_LAYOUT':
|
||||
|
||||
Reference in New Issue
Block a user