mirror of
https://gitee.com/ulthon/ulthon_admin.git
synced 2026-11-10 13:00:49 +08:00
feat(table): 移除寄生多模板实现，保留搜索与核心封装
This commit is contained in:
augushong
@@ -22,33 +22,6 @@
|
|||||||
options.headers = ua.headers();
|
options.headers = ua.headers();
|
||||||
options.page = ua.parame(options.page, true);
|
options.page = ua.parame(options.page, true);
|
||||||
options.search = ua.parame(options.search, true);
|
options.search = ua.parame(options.search, true);
|
||||||
options.layout = ua.parame(options.layout, true);
|
|
||||||
options.layoutList = ua.parame(options.layoutList,
|
|
||||||
[
|
|
||||||
'table',
|
|
||||||
'card',
|
|
||||||
{
|
|
||||||
name: 'usercard',
|
|
||||||
// 优先级1
|
|
||||||
tplFunction() {
|
|
||||||
|
|
||||||
},
|
|
||||||
// 优先级3
|
|
||||||
tplVue() {
|
|
||||||
|
|
||||||
},
|
|
||||||
// 优先级2
|
|
||||||
tplLay() {
|
|
||||||
|
|
||||||
},
|
|
||||||
// 优先级4
|
|
||||||
tplLayId: '',
|
|
||||||
// 优先级5
|
|
||||||
tplVueId: ''
|
|
||||||
}
|
|
||||||
]
|
|
||||||
);
|
|
||||||
options.layoutDefault = ua.parame(options.layoutDefault, true);
|
|
||||||
options.skin = options.skin || 'line';
|
options.skin = options.skin || 'line';
|
||||||
options.autoSort = options.autoSort || false;
|
options.autoSort = options.autoSort || false;
|
||||||
options.limit = options.limit || 15;
|
options.limit = options.limit || 15;
|
||||||
@@ -57,27 +30,6 @@
|
|||||||
options.rowDisableCallback = options.rowDisableCallback || null;
|
options.rowDisableCallback = options.rowDisableCallback || null;
|
||||||
|
|
||||||
var defaultToolbar = ['filter', 'print'];
|
var defaultToolbar = ['filter', 'print'];
|
||||||
if (options.layout === true) {
|
|
||||||
defaultToolbar.push({
|
|
||||||
title: '视图',
|
|
||||||
layEvent: 'TABLE_LAYOUT',
|
|
||||||
icon: 'layui-icon-template-1',
|
|
||||||
extend: 'data-table-id="' + options.id + '"'
|
|
||||||
});
|
|
||||||
|
|
||||||
if (options.layoutDefault === true) {
|
|
||||||
// 自动判断，手机端默认card，电脑端默认table
|
|
||||||
if (ua.checkMobile()) {
|
|
||||||
options.layoutDefault = 'card';
|
|
||||||
} else {
|
|
||||||
options.layoutDefault = 'table';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
options.layoutDefault = ua.trySetPageSetting('table-layout-default', options.layoutDefault);
|
|
||||||
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
if (options.search) {
|
if (options.search) {
|
||||||
defaultToolbar.push({
|
defaultToolbar.push({
|
||||||
@@ -154,12 +106,6 @@
|
|||||||
options = ua.table.renderSearch(options.cols, options.elem, options.id, options);
|
options = ua.table.renderSearch(options.cols, options.elem, options.id, options);
|
||||||
}
|
}
|
||||||
|
|
||||||
// 初始化模板切换
|
|
||||||
if (options.layout === true) {
|
|
||||||
|
|
||||||
options = ua.table.renderLayout(options);
|
|
||||||
}
|
|
||||||
|
|
||||||
// 初始化表格左上方工具栏
|
// 初始化表格左上方工具栏
|
||||||
options.toolbar = options.toolbar || ['refresh', 'add', 'delete', 'export'];
|
options.toolbar = options.toolbar || ['refresh', 'add', 'delete', 'export'];
|
||||||
|
|
||||||
@@ -557,202 +503,6 @@
|
|||||||
|
|
||||||
return options;
|
return options;
|
||||||
},
|
},
|
||||||
renderLayout: function (options) {
|
|
||||||
|
|
||||||
if (!options.layoutList) {
|
|
||||||
return options;
|
|
||||||
}
|
|
||||||
|
|
||||||
var tableId = options.id;
|
|
||||||
|
|
||||||
var layuiTableElemName = '[lay-table-id="' + tableId + '"]';
|
|
||||||
var elem = options.elem;
|
|
||||||
|
|
||||||
// 初始化参数
|
|
||||||
options.layoutList = options.layoutList.map((item) => {
|
|
||||||
if (item == 'table') {
|
|
||||||
return {
|
|
||||||
name: 'table',
|
|
||||||
icon: 'layui-icon layui-icon-table',
|
|
||||||
title: '默认表格',
|
|
||||||
|
|
||||||
};
|
|
||||||
} else if (item == 'card') {
|
|
||||||
return {
|
|
||||||
name: 'card',
|
|
||||||
title: '默认卡片',
|
|
||||||
icon: 'layui-icon layui-icon-form',
|
|
||||||
tplFunction: function (options, res, container) {
|
|
||||||
console.log('card func');
|
|
||||||
|
|
||||||
console.log(options);
|
|
||||||
console.log(res);
|
|
||||||
console.log(container);
|
|
||||||
|
|
||||||
var baseItem = `
|
|
||||||
<div class="ul-data-card">
|
|
||||||
<div class="header">
|
|
||||||
<div class="main">
|
|
||||||
#
|
|
||||||
<span></span>
|
|
||||||
</div>
|
|
||||||
<div class="plus">
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="body">
|
|
||||||
<div class="main">
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="footer">
|
|
||||||
<div class="main">
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<div class="plus">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>`;
|
|
||||||
var baseDataItem = `
|
|
||||||
<div class="item">
|
|
||||||
<div class="item-title">
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<div class="item-value">
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>`;
|
|
||||||
|
|
||||||
res.data.forEach(row => {
|
|
||||||
|
|
||||||
var rowItem = $.extend(true, {}, row);
|
|
||||||
|
|
||||||
var baseElem = $(baseItem).appendTo(container);
|
|
||||||
|
|
||||||
if (options.cols[0][0].type == 'checkbox' || options.cols[0[0]].type == 'radio') {
|
|
||||||
$('<input name="layTableCheckbox" type="' + options.cols[0][0].type + '">')
|
|
||||||
.appendTo(baseElem.find('.header').find('.plus'));
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
rowItem.LAY_COL = $.extend(true, {}, options.cols[0][1]);
|
|
||||||
baseElem.find('.header').find('.main').find('span').html(
|
|
||||||
options.cols[0][1].templet(rowItem)
|
|
||||||
);
|
|
||||||
|
|
||||||
options.cols[0].forEach(LAY_COL => {
|
|
||||||
var dataItem = $.extend(true, {}, row);
|
|
||||||
dataItem.LAY_COL = $.extend(true, {}, LAY_COL);
|
|
||||||
if (LAY_COL.type == 'checkbox' || LAY_COL.type == 'radio') {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (LAY_COL.templet == ua.table.tool) {
|
|
||||||
// 暂时隐藏按钮
|
|
||||||
// baseElem.find('.footer .plus').html(dataItem.LAY_COL.templet(dataItem));
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (LAY_COL.field == 'create_time') {
|
|
||||||
baseElem.find('.footer .main').html(dataItem.LAY_COL.templet(dataItem));
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
var baseDataItemElem = $(baseDataItem).appendTo(baseElem.find('.body .main'));
|
|
||||||
baseDataItemElem.find('.item-title').html(
|
|
||||||
dataItem.LAY_COL.title + ':'
|
|
||||||
);
|
|
||||||
baseDataItemElem.find('.item-value').html(
|
|
||||||
dataItem.LAY_COL.templet(dataItem)
|
|
||||||
);
|
|
||||||
});
|
|
||||||
|
|
||||||
});
|
|
||||||
|
|
||||||
return '';
|
|
||||||
}
|
|
||||||
};
|
|
||||||
} else {
|
|
||||||
if (item.icon == undefined) {
|
|
||||||
item.icon = 'layui-icon layui-icon-component';
|
|
||||||
}
|
|
||||||
if (item.title == undefined) {
|
|
||||||
item.title = item.name;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return item;
|
|
||||||
});
|
|
||||||
|
|
||||||
var optionBefore = options.before;
|
|
||||||
options.before = function (res, curr, count) {
|
|
||||||
optionBefore(res, curr, count);
|
|
||||||
console.log('layout before fun');
|
|
||||||
|
|
||||||
var currentLayout = ua.getPageSetting('table-layout-default', 'table');
|
|
||||||
// 隐藏所有数据体内容
|
|
||||||
var layuiTableElem = $(layuiTableElemName);
|
|
||||||
|
|
||||||
options.layoutList.forEach((item) => {
|
|
||||||
if (item.name == 'table') {
|
|
||||||
layuiTableElem.find('.layui-table-box').hide();
|
|
||||||
} else {
|
|
||||||
layuiTableElem.find('.layui-table-custom.layui-table-custom-' + item.name).hide();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
if (currentLayout == 'table') {
|
|
||||||
layuiTableElem.find('.layui-table-box').show();
|
|
||||||
} else {
|
|
||||||
var className = '.layui-table-custom.layui-table-custom-' + currentLayout;
|
|
||||||
// 如果不存在则创建
|
|
||||||
if (!layuiTableElem.find(className).length) {
|
|
||||||
layuiTableElem.find('.layui-table-box').before('<div class="layui-table-custom layui-table-custom-' + currentLayout + '"></div>');
|
|
||||||
}
|
|
||||||
layuiTableElem.find(className).show();
|
|
||||||
loading.show();
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
var optionDone = options.done;
|
|
||||||
options.done = function (res, curr, count) {
|
|
||||||
optionDone(res, curr, count);
|
|
||||||
console.log('layout done fun');
|
|
||||||
|
|
||||||
var currentLayout = ua.getPageSetting('table-layout-default', 'table');
|
|
||||||
// 隐藏所有数据体内容
|
|
||||||
var layuiTableElem = $(layuiTableElemName);
|
|
||||||
|
|
||||||
options.layoutList.forEach((item) => {
|
|
||||||
if (currentLayout == 'table') {
|
|
||||||
// 如果是table，则不用生成数据，显示出来就行，before已经显示过了
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (currentLayout != item.name) {
|
|
||||||
// 如果不是，则不进行任何操作
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
var className = '.layui-table-custom.layui-table-custom-' + item.name;
|
|
||||||
|
|
||||||
// 清空里面的数据
|
|
||||||
layuiTableElem.find(className).html('');
|
|
||||||
loading.hide();
|
|
||||||
|
|
||||||
item.tplFunction(options, res, layuiTableElem.find(className));
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
});
|
|
||||||
|
|
||||||
};
|
|
||||||
|
|
||||||
return options;
|
|
||||||
|
|
||||||
},
|
|
||||||
|
|
||||||
renderSwitch: function (cols, tableInit, tableId, modifyReload) {
|
renderSwitch: function (cols, tableInit, tableId, modifyReload) {
|
||||||
tableInit.modifyUrl = tableInit.modifyUrl || false;
|
tableInit.modifyUrl = tableInit.modifyUrl || false;
|
||||||
cols = cols[0] || {};
|
cols = cols[0] || {};
|
||||||
@@ -1431,66 +1181,6 @@
|
|||||||
_that.addClass('layui-hide');
|
_that.addClass('layui-hide');
|
||||||
}
|
}
|
||||||
break;
|
break;
|
||||||
case 'TABLE_LAYOUT':
|
|
||||||
var layoutElemId = 'layout-list-option-' + tableId;
|
|
||||||
var layoutElemIdName = '#' + layoutElemId;
|
|
||||||
|
|
||||||
var currentLayout = ua.getPageSetting('table-layout-default', 'table');
|
|
||||||
|
|
||||||
// 构建下拉选择
|
|
||||||
var layoutHtml = '<div id="' + layoutElemId + '" class="ul-nav-block table-tpl-container">';
|
|
||||||
|
|
||||||
options.layoutList.forEach(item => {
|
|
||||||
var currentClassName = '';
|
|
||||||
if (item.name == currentLayout) {
|
|
||||||
currentClassName = 'current';
|
|
||||||
}
|
|
||||||
layoutHtml += `
|
|
||||||
<div class="item ${currentClassName}" data-name="${item.name}">
|
|
||||||
<div class="item-icon"><i class="${item.icon}"></i></div>
|
|
||||||
<div class="item-title">${item.title}</div>
|
|
||||||
</div>`;
|
|
||||||
});
|
|
||||||
|
|
||||||
layoutHtml += '</div>';
|
|
||||||
|
|
||||||
var toolbarLayoutElem = $('[lay-table-id="' + tableId + '"]').find('[lay-event="TABLE_LAYOUT"]');
|
|
||||||
if (toolbarLayoutElem.find(layoutElemIdName).length > 0) {
|
|
||||||
// If it is, remove the HTML
|
|
||||||
$(layoutElemIdName).remove();
|
|
||||||
}
|
|
||||||
layoulElem = $(layoutHtml);
|
|
||||||
layoulElem.appendTo(toolbarLayoutElem);
|
|
||||||
|
|
||||||
|
|
||||||
layoulElem.on('click', function (event) {
|
|
||||||
|
|
||||||
var item = $(event.target).closest('.item');
|
|
||||||
if (item.length > 0) {
|
|
||||||
// 点击操作
|
|
||||||
item.addClass('current').siblings().removeClass('current');
|
|
||||||
|
|
||||||
var layoutName = item.data('name');
|
|
||||||
ua.setPageSetting('table-layout-default', layoutName);
|
|
||||||
|
|
||||||
table.reloadData(tableId, {}, true);
|
|
||||||
} else {
|
|
||||||
// 其他区域操作
|
|
||||||
}
|
|
||||||
|
|
||||||
// 不要冒泡
|
|
||||||
event.stopPropagation();
|
|
||||||
});
|
|
||||||
|
|
||||||
// Remove any existing click event listeners to avoid duplicates
|
|
||||||
$(document).off('click.table-layout').on('click.table-layout', function (event) {
|
|
||||||
|
|
||||||
if (!$(event.target).closest(toolbarLayoutElem).length) {
|
|
||||||
// If it is, remove the HTML
|
|
||||||
$(layoutElemIdName).remove();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
break;
|
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
|||||||
Reference in New Issue
Block a user