github
/
layui
mirror of https://github.com/layui/layui
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

优化 treeTable 属性结构

pull/1229/head
贤心 2023-04-23 11:03:30 +08:00
parent f1273b3ef2
commit c1330e026a
1 changed files with 53 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

102
src/modules/treeTable.js
View File

@ -126,8 +126,9 @@ layui.define(['table'], function (exports) {
that.tableIns = tableIns; that.tableIns = tableIns;
var treeOptions = options.tree; var treeOptions = options.tree;
var isParentKey = treeOptions.data.key.isParent; var customName = treeOptions.customName;
var childrenKey = treeOptions.data.key.children; var isParentKey = customName.isParent;
var childrenKey = customName.children;
// 处理属性 // 处理属性
var parseData = options.parseData; var parseData = options.parseData;
@ -143,8 +144,8 @@ layui.define(['table'], function (exports) {
retData = parseData.apply(parseDataThat, args) || args[0]; retData = parseData.apply(parseDataThat, args) || args[0];
} }
var dataName = parseDataThat.response.dataName; var dataName = parseDataThat.response.dataName;
// 处理simpleData // 处理 isSimpleData
if (treeOptions.data.simpleData.enable && !treeOptions.async.enable) { // 异步加载和simpleData不应该一起使用 if (treeOptions.data.isSimpleData && !treeOptions.async.enable) { // 异步加载和 isSimpleData 不应该一起使用
retData[dataName] = that.flatToTree(retData[dataName]); retData[dataName] = that.flatToTree(retData[dataName]);
} }
@ -154,8 +155,8 @@ layui.define(['table'], function (exports) {
} }
} else { } else {
options.data = options.data || []; options.data = options.data || [];
// 处理simpleData // 处理 isSimpleData
if (treeOptions.data.simpleData.enable) { if (treeOptions.data.isSimpleData) {
options.data = that.flatToTree(options.data); options.data = that.flatToTree(options.data);
} }
if (options.initSort && options.initSort.type) { if (options.initSort && options.initSort.type) {
@ -195,6 +196,17 @@ layui.define(['table'], function (exports) {
// 初始默认配置 // 初始默认配置
Class.prototype.config = { Class.prototype.config = {
tree: { tree: {
customName: {
checked: 'LAY_CHECKED', // 节点数据中保存 check 状态的属性名称
children: "children", // 节点数据中保存子节点数据的属性名称
isParent: "isParent", // 节点数据保存节点是否为父节点的属性名称
isHidden: "hidden", // 节点数据保存节点是否隐藏的属性名称
name: "name", // 节点数据保存节点名称的属性名称
url: "url", // 节点数据保存节点链接的目标 URL 的属性名称
id: "id", // 唯一标识的属性名称
pid: "parentId",
rootId: null
},
view: { view: {
indent: 14, // 层级缩进量 indent: 14, // 层级缩进量
flexIconClose: '<i class="layui-icon layui-icon-triangle-r"></i>', // 关闭时候的折叠图标 flexIconClose: '<i class="layui-icon layui-icon-triangle-r"></i>', // 关闭时候的折叠图标
@ -208,21 +220,7 @@ layui.define(['table'], function (exports) {
dblClickExpand: true, // 双击节点时，是否自动展开父节点的标识 dblClickExpand: true, // 双击节点时，是否自动展开父节点的标识
}, },
data: { data: {
key: { isSimpleData: false // 是否简单数据模式
checked: 'LAY_CHECKED', // 节点数据中保存 check 状态的属性名称
children: "children", // 节点数据中保存子节点数据的属性名称
isParent: "isParent", // 节点数据保存节点是否为父节点的属性名称
isHidden: "hidden", // 节点数据保存节点是否隐藏的属性名称
name: "name", // 节点数据保存节点名称的属性名称
title: "", // 节点数据保存节点提示信息的属性名称
url: "url", // 节点数据保存节点链接的目标 URL 的属性名称
},
simpleData: {
enable: false, // 是否简单数据模式
idKey: "id", // 唯一标识的属性名称
pIdKey: "parentId",
rootPId: null
}
}, },
async: { async: {
enable: false, // 是否开启异步加载模式，只有开启的时候其他参数才起作用 enable: false, // 是否开启异步加载模式，只有开启的时候其他参数才起作用
@ -277,20 +275,21 @@ layui.define(['table'], function (exports) {
var that = this; var that = this;
var options = that.getOptions(); var options = that.getOptions();
var treeOptions = options.tree; var treeOptions = options.tree;
var simpleDataOptions = treeOptions.data.simpleData; var customName = treeOptions.customName;
var tableId = options.id; var tableId = options.id;
tableData = tableData || table.cache[tableId]; tableData = tableData || table.cache[tableId];
return flatToTree(tableData, simpleDataOptions.idKey, simpleDataOptions.pIdKey, treeOptions.data.key.children, simpleDataOptions.rootPId) return flatToTree(tableData, customName.id, customName.pid, customName.children, customName.rootId)
} }
Class.prototype.treeToFlat = function (tableData, parentId, parentIndex) { Class.prototype.treeToFlat = function (tableData, parentId, parentIndex) {
var that = this; var that = this;
var options = that.getOptions(); var options = that.getOptions();
var treeOptions = options.tree; var treeOptions = options.tree;
var childrenKey = treeOptions.data.key.children; var customName = treeOptions.customName;
var pIdKey = treeOptions.data.simpleData.pIdKey; var childrenKey = customName.children;
var pIdKey = customName.pid;
var flat = []; var flat = [];
layui.each(tableData, function (i1, item1) { layui.each(tableData, function (i1, item1) {
@ -299,7 +298,7 @@ layui.define(['table'], function (exports) {
dataNew[childrenKey] = null; dataNew[childrenKey] = null;
dataNew[pIdKey] = item1[pIdKey] || parentId; dataNew[pIdKey] = item1[pIdKey] || parentId;
flat.push(dataNew); flat.push(dataNew);
flat = flat.concat(that.treeToFlat(item1[childrenKey], item1[treeOptions.data.simpleData.idKey], dataIndex)); flat = flat.concat(that.treeToFlat(item1[childrenKey], item1[customName.id], dataIndex));
}); });
return flat; return flat;
@ -323,7 +322,7 @@ layui.define(['table'], function (exports) {
var dataRet = tableData; var dataRet = tableData;
var tableCache = (options.url || indexArr.length > 1) ? null : table.cache[tableId]; // 只有在删除根节点的时候才需要处理 var tableCache = (options.url || indexArr.length > 1) ? null : table.cache[tableId]; // 只有在删除根节点的时候才需要处理
for (var i = 0, childrenKey = treeOptions.data.key.children; i < indexArr.length; i++) { for (var i = 0, childrenKey = treeOptions.customName.children; i < indexArr.length; i++) {
if (newValue && i === indexArr.length - 1) { if (newValue && i === indexArr.length - 1) {
if (newValue === 'delete') { if (newValue === 'delete') {
// 删除 // 删除
@ -373,9 +372,12 @@ layui.define(['table'], function (exports) {
var options = that.getOptions(); var options = that.getOptions();
var treeOptions = options.tree; var treeOptions = options.tree;
var tableId = options.id; var tableId = options.id;
data = data || that.getTableData(); data = data || that.getTableData();
var isParentKey = treeOptions.data.key.isParent;
var childrenKey = treeOptions.data.key.children; var customName = treeOptions.customName;
var isParentKey = customName.isParent;
var childrenKey = customName.children;
layui.each(data, function (i1, item1) { layui.each(data, function (i1, item1) {
if (!(isParentKey in item1)) { if (!(isParentKey in item1)) {
@ -400,7 +402,8 @@ layui.define(['table'], function (exports) {
var tableId = tableViewElem.attr('lay-id'); var tableId = tableViewElem.attr('lay-id');
var options = table.getOptions(tableId); var options = table.getOptions(tableId);
var treeOptions = options.tree || {}; var treeOptions = options.tree || {};
var isParentKey = treeOptions.data.key.isParent; var customName = treeOptions.customName || {};
var isParentKey = customName.isParent;
var trIndex = trElem.attr('lay-data-index'); // 可能出现多层 var trIndex = trElem.attr('lay-data-index'); // 可能出现多层
var treeTableThat = getThisTable(tableId); var treeTableThat = getThisTable(tableId);
var tableData = treeTableThat.getTableData(); var tableData = treeTableThat.getTableData();
@ -438,7 +441,7 @@ layui.define(['table'], function (exports) {
nodeIconElem.html(trExpand ? treeOptions.view.iconOpen : treeOptions.view.iconClose); nodeIconElem.html(trExpand ? treeOptions.view.iconOpen : treeOptions.view.iconClose);
} }
var childNodes = trData[treeOptions.data.key.children] || []; // 测试用后续需要改成子节点的字段名称 var childNodes = trData[customName.children] || []; // 测试用后续需要改成子节点的字段名称
// 处理子节点展示与否 // 处理子节点展示与否
if (trExpand) { if (trExpand) {
// 展开 // 展开
@ -506,8 +509,8 @@ layui.define(['table'], function (exports) {
flexIconElem.html('<i class="layui-icon layui-icon-refresh"></i>'); flexIconElem.html('<i class="layui-icon layui-icon-refresh"></i>');
// 事件 // 事件
} else { } else {
trData[treeOptions.data.key.children] = res[asyncResponse.dataName]; trData[customName.children] = res[asyncResponse.dataName];
treeTableThat.initData(trData[treeOptions.data.key.children], trData[LAY_DATA_INDEX]) treeTableThat.initData(trData[customName.children], trData[LAY_DATA_INDEX])
// 正常返回 // 正常返回
expandNode(treeNode, true, isToggle ? false : sonSign, focus, callbackFlag); expandNode(treeNode, true, isToggle ? false : sonSign, focus, callbackFlag);
} }
@ -527,13 +530,13 @@ layui.define(['table'], function (exports) {
if (options.initSort && !options.url) { if (options.initSort && !options.url) {
var initSort = options.initSort; var initSort = options.initSort;
if (initSort.type) { if (initSort.type) {
childNodes = trData[treeOptions.data.key.children] = layui.sort(childNodes, initSort.field, initSort.type === 'desc'); childNodes = trData[customName.children] = layui.sort(childNodes, initSort.field, initSort.type === 'desc');
} else { } else {
// 恢复默认 // 恢复默认
childNodes = trData[treeOptions.data.key.children] = layui.sort(childNodes, table.config.indexName); childNodes = trData[customName.children] = layui.sort(childNodes, table.config.indexName);
} }
} }
treeTableThat.initData(trData[treeOptions.data.key.children], trData[LAY_DATA_INDEX]); treeTableThat.initData(trData[customName.children], trData[LAY_DATA_INDEX]);
// 将数据通过模板得出节点的html代码 // 将数据通过模板得出节点的html代码
var str2 = table.getTrHtml(tableId, childNodes, null, null, trIndex); var str2 = table.getTrHtml(tableId, childNodes, null, null, trIndex);
@ -588,7 +591,7 @@ layui.define(['table'], function (exports) {
return 'tr[lay-data-index="' + value[LAY_DATA_INDEX] + '"]' return 'tr[lay-data-index="' + value[LAY_DATA_INDEX] + '"]'
}).join(',')).addClass('layui-hide'); }).join(',')).addClass('layui-hide');
} else { } else {
var childNodesFlat = treeTableThat.treeToFlat(childNodes, trData[treeOptions.data.simpleData.idKey], trIndex); var childNodesFlat = treeTableThat.treeToFlat(childNodes, trData[customName.id], trIndex);
tableViewElem.find(childNodesFlat.map(function (value, index, array) { tableViewElem.find(childNodesFlat.map(function (value, index, array) {
return 'tr[lay-data-index="' + value[LAY_DATA_INDEX] + '"]' return 'tr[lay-data-index="' + value[LAY_DATA_INDEX] + '"]'
}).join(',')).addClass('layui-hide'); }).join(',')).addClass('layui-hide');
@ -700,7 +703,8 @@ layui.define(['table'], function (exports) {
var treeOptions = options.tree || {}; var treeOptions = options.tree || {};
var treeOptionsData = treeOptions.data || {}; var treeOptionsData = treeOptions.data || {};
var treeOptionsView = treeOptions.view || {}; var treeOptionsView = treeOptions.view || {};
var isParentKey = treeOptionsData.key.isParent; var customName = treeOptions.customName || {};
var isParentKey = customName.isParent;
var tableFilterId = tableViewElem.attr('lay-filter'); var tableFilterId = tableViewElem.attr('lay-filter');
var treeTableThat = that; var treeTableThat = that;
// var tableData = treeTableThat.getTableData(); // var tableData = treeTableThat.getTableData();
@ -718,7 +722,7 @@ layui.define(['table'], function (exports) {
} }
var dataExpand = {}; // 记录需要展开的数据 var dataExpand = {}; // 记录需要展开的数据
var nameKey = treeOptions.data.key.name; var nameKey = customName.name;
var indent = treeOptions.view.indent || 14; var indent = treeOptions.view.indent || 14;
layui.each(tableView.find('td[data-field="' + nameKey + '"]'), function (index, item) { layui.each(tableView.find('td[data-field="' + nameKey + '"]'), function (index, item) {
item = $(item); item = $(item);
@ -854,7 +858,7 @@ layui.define(['table'], function (exports) {
var treeOptions = options.tree; var treeOptions = options.tree;
data = data || table.cache[options.id]; data = data || table.cache[options.id];
return updateStatus(data, statusObj, treeOptions.data.key.children); return updateStatus(data, statusObj, treeOptions.customName.children);
} }
Class.prototype.getTableData = function () { Class.prototype.getTableData = function () {
@ -971,7 +975,7 @@ layui.define(['table'], function (exports) {
delNode = that.getNodeDataByIndex(layui.type(node) === 'string' ? node : node[LAY_DATA_INDEX], false, 'delete'); delNode = that.getNodeDataByIndex(layui.type(node) === 'string' ? node : node[LAY_DATA_INDEX], false, 'delete');
var nodeP = that.getNodeDataByIndex(delNode[LAY_PARENT_INDEX]); var nodeP = that.getNodeDataByIndex(delNode[LAY_PARENT_INDEX]);
that.updateCheckStatus(nodeP, true); that.updateCheckStatus(nodeP, true);
var delNodesFlat = that.treeToFlat([delNode], delNode[treeOptions.data.simpleData.pIdKey], delNode[LAY_PARENT_INDEX]); var delNodesFlat = that.treeToFlat([delNode], delNode[treeOptions.customName.pid], delNode[LAY_PARENT_INDEX]);
layui.each(delNodesFlat, function (i2, item2) { layui.each(delNodesFlat, function (i2, item2) {
indexArr.push('tr[lay-data-index="' + item2[LAY_DATA_INDEX] + '"]'); indexArr.push('tr[lay-data-index="' + item2[LAY_DATA_INDEX] + '"]');
}) })
@ -1101,8 +1105,8 @@ layui.define(['table'], function (exports) {
return 'tr[lay-data-index="' + value[LAY_DATA_INDEX] + '"]' return 'tr[lay-data-index="' + value[LAY_DATA_INDEX] + '"]'
}).join(','))); }).join(',')));
} else { } else {
var isParentKey = treeOptions.data.key.isParent; var isParentKey = treeOptions.customName.isParent;
var childKey = treeOptions.data.key.children; var childKey = treeOptions.customName.children;
parentNode[isParentKey] = true; parentNode[isParentKey] = true;
var childrenNodes = parentNode[childKey]; var childrenNodes = parentNode[childKey];
@ -1220,7 +1224,7 @@ layui.define(['table'], function (exports) {
if (tableView.hasClass('layui-table-tree')) { if (tableView.hasClass('layui-table-tree')) {
updateObjParams(obj); updateObjParams(obj);
if (obj.field === options.tree.data.key.name) { if (obj.field === options.tree.customName.name) {
obj.tr.find('td[data-field="' + obj.field + '"]').children('div.layui-table-cell').removeClass('layui-table-tree-item') obj.tr.find('td[data-field="' + obj.field + '"]').children('div.layui-table-cell').removeClass('layui-table-tree-item')
obj.update({}); // 通过update调用执行tr节点的更新 obj.update({}); // 通过update调用执行tr节点的更新
} }
@ -1288,7 +1292,7 @@ layui.define(['table'], function (exports) {
var treeOptions = options.tree; var treeOptions = options.tree;
var tableId = options.id; var tableId = options.id;
var checkName = table.config.checkName; var checkName = table.config.checkName;
var childrenKey = treeOptions.data.key.children; var childrenKey = treeOptions.customName.children;
var dataRet = []; var dataRet = [];
dataP[LAY_CHECKBOX_HALF] = false; // 先设置为非半选，是否为半选又下面逻辑判断 dataP[LAY_CHECKBOX_HALF] = false; // 先设置为非半选，是否为半选又下面逻辑判断
@ -1378,7 +1382,7 @@ layui.define(['table'], function (exports) {
trData[checkName] = checked; trData[checkName] = checked;
form.render(trElem.find('input[type="radio"][lay-type="layTableRadio"]').prop('checked', checked)); form.render(trElem.find('input[type="radio"][lay-type="layTableRadio"]').prop('checked', checked));
} else { } else {
var isParentKey = options.tree.data.key.isParent; var isParentKey = options.tree.customName.isParent;
// 切换只能用到单条，全选到这一步的时候应该是一个确定的状态 // 切换只能用到单条，全选到这一步的时候应该是一个确定的状态
checked = layui.type(checked) === 'boolean' ? checked : !trData[checkName]; // 状态切换，如果遇到不可操作的节点待处理 todo checked = layui.type(checked) === 'boolean' ? checked : !trData[checkName]; // 状态切换，如果遇到不可操作的节点待处理 todo
// 全选或者是一个父节点，将子节点的状态同步为当前节点的状态 // 全选或者是一个父节点，将子节点的状态同步为当前节点的状态
@ -1476,16 +1480,16 @@ layui.define(['table'], function (exports) {
/** /**
* 获得数据 * 获得数据
* @param {String} id 表格id * @param {String} id 表格id
* @param {Boolean} simpleData 是否返回平铺结构的数据 * @param {Boolean} isSimpleData 是否返回平铺结构的数据
* @return {Array} 表格数据 * @return {Array} 表格数据
* */ * */
treeTable.getData = function (id, simpleData) { treeTable.getData = function (id, isSimpleData) {
var tableData = []; var tableData = [];
layui.each($.extend(true, [], table.cache[id] || []), function (index, item) { layui.each($.extend(true, [], table.cache[id] || []), function (index, item) {
// 遍历排除掉临时的数据 // 遍历排除掉临时的数据
tableData.push(item); tableData.push(item);
}) })
return simpleData ? getThisTable(id).treeToFlat(tableData) : tableData; return isSimpleData ? getThisTable(id).treeToFlat(tableData) : tableData;
} }
// 记录所有实例 // 记录所有实例