floraachy/layui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

完善 treeTable expandAll 实现展开所有节点的功能

Browse Source
This commit is contained in:
sunxiaobin89 2023-05-03 19:00:18 +08:00
parent 585f1c4301
commit 075cca611b
1 changed files with 79 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

117
src/modules/treeTable.js
View File

@ -646,16 +646,19 @@ layui.define(['table'], function (exports) {
var sonSign = opts.inherit; var sonSign = opts.inherit;
var callbackFlag = opts.callbackFlag; var callbackFlag = opts.callbackFlag;
var options = that.getOptions(); var options = that.getOptions();
var tableViewElem = options.elem.next(); var tableViewElem = options.elem.next();
return expandNode({trElem: tableViewElem.find('tr[lay-data-index="' + index + '"]').first()}, expandFlag, sonSign, null, callbackFlag) return expandNode({trElem: tableViewElem.find('tr[lay-data-index="' + index + '"]').first()}, expandFlag, sonSign, null, callbackFlag)
}; };
// 目前还有性能问题特别是在data模式需要优化暂时不能使用 todo /**
* 展开或关闭全部节点
* @param {String} id 树表id
* @param {Boolean} expandFlag 展开或关闭
* */
treeTable.expandAll = function (id, expandFlag) { treeTable.expandAll = function (id, expandFlag) {
if (layui.type(expandFlag) !== 'boolean') { if (layui.type(expandFlag) !== 'boolean') {
return hint.error('expandAll的展开状态参数只接收true/false') return hint.error('expandAll 的展开状态参数只接收true/false')
} }
var that = getThisTable(id); var that = getThisTable(id);
@ -670,62 +673,100 @@ layui.define(['table'], function (exports) {
// 将所有已经打开的节点的状态设置为关闭， // 将所有已经打开的节点的状态设置为关闭，
that.updateStatus(null, {LAY_EXPAND: false}); // 只处理当前页，如果需要处理全部表格，需要用treeTable.updateStatus that.updateStatus(null, {LAY_EXPAND: false}); // 只处理当前页，如果需要处理全部表格，需要用treeTable.updateStatus
// 隐藏所有非顶层的节点 // 隐藏所有非顶层的节点
tableView.find('.layui-table-box tbody tr[data-level!="0"]').addClass('layui-hide'); tableView.find('.layui-table-box tbody tr[data-level!="0"]').addClass(HIDE);
// 处理顶层节点的图标 // 处理顶层节点的图标
var trLevel0 = tableView.find('tbody tr[data-level="0"]'); var trLevel0 = tableView.find('tbody tr[data-level="0"]');
trLevel0.find('.layui-table-tree-flexIcon').html(treeOptions.view.flexIconClose); trLevel0.find('.layui-table-tree-flexIcon').html(treeOptions.view.flexIconClose);
treeOptions.view.showIcon && trLevel0.find('.layui-table-tree-nodeIcon').html(treeOptions.view.iconClose); treeOptions.view.showIcon && trLevel0.find('.layui-table-tree-nodeIcon').html(treeOptions.view.iconClose);
treeTable.resize(id);
} else { } else {
return hint.error('暂不支持展开全部'); var tableDataFlat = treeTable.getData(id, true);
// 展开所有 // 展开所有
// 存在异步加载
if (treeOptions.async.enable) { if (treeOptions.async.enable) {
// 存在异步加载 // 判断是否有未加载过的节点
var isAllAsyncDone = true;
} else { var isParentKey = treeOptions.customName.isParent;
// 先判断是否全部打开过了
var tableDataFlat = treeTable.getData(id, true);
var isAllExpanded = true;
layui.each(tableDataFlat, function (i1, item1) { layui.each(tableDataFlat, function (i1, item1) {
if (!item1[LAY_HAS_EXPANDED]) { if (item1[isParentKey] && !item1[LAY_ASYNC_STATUS]) {
isAllExpanded = false; isAllAsyncDone = false;
return true; return true;
} }
}) })
// 如果全部节点已经都打开过，就可以简单处理跟隐藏所有节点反操作 // 有未加载过的节点
if (isAllExpanded) { if (!isAllAsyncDone) {
that.updateStatus(null, {LAY_EXPAND: true}); // 只处理当前页，如果需要处理全部表格，需要用treeTable.updateStatus // 逐个展开
// 隐藏所有非顶层的节点 layui.each(treeTable.getData(id), function (i1, item1) {
tableView.find('tbody tr[data-level!="0"]').removeClass('layui-hide'); treeTable.expandNode(id, {
// 处理顶层节点的图标 index: item1[LAY_DATA_INDEX],
// var trLevel0 = tableView.find('tbody tr[data-level="0"]'); expandFlag: true,
tableView.find('.layui-table-tree-flexIcon').html(treeOptions.view.flexIconOpen); inherit: true
tableView.find('.layui-table-tree-nodeIcon').html(treeOptions.view.iconOpen); })
})
treeTable.resize(); return;
} else {
// 如果有未打开过的父节点，将内容全部生成
that.updateStatus(null, {LAY_EXPAND: true, LAY_HAS_EXPANDED: true});
var trsAll = table.getTrHtml(id, tableDataFlat);
} }
} }
// 先判断是否全部打开过了
var isAllExpanded = true;
layui.each(tableDataFlat, function (i1, item1) {
if (!item1[LAY_HAS_EXPANDED]) {
isAllExpanded = false;
return true;
}
})
// 如果全部节点已经都打开过，就可以简单处理跟隐藏所有节点反操作
if (isAllExpanded) {
that.updateStatus(null, {LAY_EXPAND: true});
// 隐藏所有非顶层的节点
tableView.find('tbody tr[data-level!="0"]').removeClass(HIDE);
// 处理顶层节点的图标
// var trLevel0 = tableView.find('tbody tr[data-level="0"]');
tableView.find('.layui-table-tree-flexIcon').html(treeOptions.view.flexIconOpen);
tableView.find('.layui-table-tree-nodeIcon').html(treeOptions.view.iconOpen);
} else {
// 如果有未打开过的父节点，将内容全部生成
that.updateStatus(null, {LAY_EXPAND: true, LAY_HAS_EXPANDED: true});
var trAll = table.getTrHtml(id, tableDataFlat);
// 如果是异步加载子节点模式 如何处理 var trAllObj = {
// 如果有部分节点未打开过，也需要重新 trs: $(trAll.trs.join('')),
trs_fixed: $(trAll.trs_fixed.join('')),
trs_fixed_r: $(trAll.trs_fixed_r.join(''))
}
layui.each(tableDataFlat, function (dataIndex, dataItem) {
// debugger;
var dataLevel = dataItem[LAY_DATA_INDEX].split('-').length - 1;
trAllObj.trs.eq(dataIndex).attr({
'data-index': dataItem[LAY_DATA_INDEX],
'lay-data-index': dataItem[LAY_DATA_INDEX],
'data-level': dataLevel
})
trAllObj.trs_fixed.eq(dataIndex).attr({
'data-index': dataItem[LAY_DATA_INDEX],
'lay-data-index': dataItem[LAY_DATA_INDEX],
'data-level': dataLevel
})
trAllObj.trs_fixed_r.eq(dataIndex).attr({
'data-index': dataItem[LAY_DATA_INDEX],
'lay-data-index': dataItem[LAY_DATA_INDEX],
'data-level': dataLevel
})
})
layui.each(['main', 'fixed-l', 'fixed-r'], function (i, item) {
tableView.find('.layui-table-' + item + ' tbody').html(trAllObj[['trs', 'trs_fixed', 'trs_fixed_r'][i]]);
});
that.renderTreeTable(tableView, 0, false);
}
} }
treeTable.resize(id);
} }
Class.prototype.renderTreeTable = function (tableView, level, sonSign) { Class.prototype.renderTreeTable = function (tableView, level, sonSign) {
var that = this; var that = this;
var options = that.getOptions(); var options = that.getOptions();
var tableViewElem = options.elem.next(); var tableViewElem = options.elem.next();
tableViewElem.addClass('layui-table-tree'); tableViewElem.addClass(TABLE_TREE);
var tableId = options.id; var tableId = options.id;
var treeOptions = options.tree || {}; var treeOptions = options.tree || {};
var treeOptionsData = treeOptions.data || {}; var treeOptionsData = treeOptions.data || {};
@ -775,10 +816,10 @@ layui.define(['table'], function (exports) {
var flexIconElem = item.find('div.layui-table-cell') var flexIconElem = item.find('div.layui-table-cell')
.html(['<div class="layui-inline layui-table-tree-flexIcon" ', .html(['<div class="layui-inline layui-table-tree-flexIcon" ',
'style="', 'style="',
'margin-left: ' + (indent * level) + 'px;', 'margin-left: ' + (indent * trElem.attr('data-level')) + 'px;',
(trData[isParentKey] || treeOptionsView.showFlexIconIfNotParent) ? '' : ' visibility: hidden;', (trData[isParentKey] || treeOptionsView.showFlexIconIfNotParent) ? '' : ' visibility: hidden;',
'">', '">',
treeOptions.view.flexIconClose, // 折叠图标 trData[LAY_EXPAND] ? treeOptions.view.flexIconOpen : treeOptions.view.flexIconClose, // 折叠图标
'</div>', '</div>',
'<div class="layui-inline layui-table-tree-nodeIcon">', '<div class="layui-inline layui-table-tree-nodeIcon">',
treeOptions.view.showIcon ? (trData.icon || treeOptions.view.icon || (trData[isParentKey] ? treeOptions.view.iconClose : treeOptions.view.iconLeaf) || '') : '', treeOptions.view.showIcon ? (trData.icon || treeOptions.view.icon || (trData[isParentKey] ? treeOptions.view.iconClose : treeOptions.view.iconLeaf) || '') : '',