优化 treeTable 树表节点渲染方法

pull/1260/head
sunxiaobin89 2 years ago
parent 5b54593d84
commit cdd8934d6d

@ -623,9 +623,7 @@ layui.define(['table'], function (exports) {
tableViewElem.find(ELEM_FIXR).find('tbody tr[lay-data-index="' + dataIndex + '"]').after(str2Obj.trs_fixed_r); tableViewElem.find(ELEM_FIXR).find('tbody tr[lay-data-index="' + dataIndex + '"]').after(str2Obj.trs_fixed_r);
// 初始化新增的节点中的内容 // 初始化新增的节点中的内容
layui.each(str2Obj, function (key, item) { treeTableThat.renderTreeTable(str2Obj.trs, dataLevelNew);
treeTableThat.renderTreeTable(item, dataLevelNew);
})
if (sonSign && !isToggle) { // 非状态切换的情况下 if (sonSign && !isToggle) { // 非状态切换的情况下
// 级联展开/关闭子节点 // 级联展开/关闭子节点
@ -830,7 +828,7 @@ layui.define(['table'], function (exports) {
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(TABLE_TREE); !tableViewElem.hasClass(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 || {};
@ -853,7 +851,7 @@ layui.define(['table'], function (exports) {
}) })
} }
var dataExpand = {}; // 记录需要展开的数据 var dataExpand = null; // 记录需要展开的数据
var nameKey = customName.name; var nameKey = customName.name;
var indent = treeOptionsView.indent || 14; var indent = treeOptionsView.indent || 14;
layui.each(tableView.find('td[data-field="' + nameKey + '"]'), function (index, item) { layui.each(tableView.find('td[data-field="' + nameKey + '"]'), function (index, item) {
@ -863,21 +861,26 @@ layui.define(['table'], function (exports) {
if (itemCell.hasClass('layui-table-tree-item')) { if (itemCell.hasClass('layui-table-tree-item')) {
return; return;
} }
itemCell.addClass('layui-table-tree-item');
var trIndex = trElem.attr('lay-data-index'); var trIndex = trElem.attr('lay-data-index');
if (!trIndex) { // 排除在统计行中的节点 if (!trIndex) { // 排除在统计行中的节点
return; return;
} }
trElem = tableViewElem.find('tr[lay-data-index="' + trIndex + '"]');
var trData = treeTableThat.getNodeDataByIndex(trIndex); var trData = treeTableThat.getNodeDataByIndex(trIndex);
if (trData[LAY_EXPAND]) { if (trData[LAY_EXPAND]) {
// 需要展开 // 需要展开
dataExpand = dataExpand || {};
dataExpand[trIndex] = true; dataExpand[trIndex] = true;
} }
if (trData[LAY_CHECKBOX_HALF]) {
trElem.find('input[type="checkbox"][name="layTableCheckbox"]').prop('indeterminate', true);
}
var tableCellElem = item.find('div.layui-table-cell'); var htmlTemp = itemCell.html();
var htmlTemp = tableCellElem.html(); itemCell = trElem.find('td[data-field="' + nameKey + '"]>div.layui-table-cell');
itemCell.addClass('layui-table-tree-item');
var flexIconElem = item.find('div.layui-table-cell') var flexIconElem = itemCell
.html(['<div class="layui-inline layui-table-tree-flexIcon" ', .html(['<div class="layui-inline layui-table-tree-flexIcon" ',
'style="', 'style="',
'margin-left: ' + (indent * trElem.attr('data-level')) + 'px;', 'margin-left: ' + (indent * trElem.attr('data-level')) + 'px;',
@ -886,10 +889,10 @@ layui.define(['table'], function (exports) {
trData[LAY_EXPAND] ? treeOptionsView.flexIconOpen : treeOptionsView.flexIconClose, // 折叠图标 trData[LAY_EXPAND] ? treeOptionsView.flexIconOpen : treeOptionsView.flexIconClose, // 折叠图标
'</div>', '</div>',
treeOptionsView.showIcon ? '<div class="layui-inline layui-table-tree-nodeIcon' + treeOptionsView.showIcon ? '<div class="layui-inline layui-table-tree-nodeIcon' +
((trData.icon || treeOptionsView.icon) ? ' layui-table-tree-iconCustom' : '') + ((trData[customName.icon] || treeOptionsView.icon) ? ' layui-table-tree-iconCustom' : '') +
(trData[isParentKey] ? '' : ' layui-table-tree-iconLeaf') + (trData[isParentKey] ? '' : ' layui-table-tree-iconLeaf') +
'">' + '">' +
(trData.icon || treeOptionsView.icon || (trData[customName.icon] || treeOptionsView.icon ||
(trData[isParentKey] ? (trData[isParentKey] ?
(trData[LAY_EXPAND] ? treeOptionsView.iconOpen : treeOptionsView.iconClose) : (trData[LAY_EXPAND] ? treeOptionsView.iconOpen : treeOptionsView.iconClose) :
treeOptionsView.iconLeaf) || treeOptionsView.iconLeaf) ||
@ -1204,22 +1207,16 @@ layui.define(['table'], function (exports) {
trs_fixed_r: $(newNodesHtml.trs_fixed_r.join('')) trs_fixed_r: $(newNodesHtml.trs_fixed_r.join(''))
} }
var attrs = {};
layui.each(newNodes, function (newNodeIndex, newNodeItem) { layui.each(newNodes, function (newNodeIndex, newNodeItem) {
newNodesHtmlObj.trs.eq(newNodeIndex).attr({ attrs = {
'data-index': newNodeItem[LAY_DATA_INDEX],
'lay-data-index': newNodeItem[LAY_DATA_INDEX],
'data-level': '0'
})
newNodesHtmlObj.trs_fixed.eq(newNodeIndex).attr({
'data-index': newNodeItem[LAY_DATA_INDEX],
'lay-data-index': newNodeItem[LAY_DATA_INDEX],
'data-level': '0'
})
newNodesHtmlObj.trs_fixed_r.eq(newNodeIndex).attr({
'data-index': newNodeItem[LAY_DATA_INDEX], 'data-index': newNodeItem[LAY_DATA_INDEX],
'lay-data-index': newNodeItem[LAY_DATA_INDEX], 'lay-data-index': newNodeItem[LAY_DATA_INDEX],
'data-level': '0' 'data-level': '0'
}) };
newNodesHtmlObj.trs.eq(newNodeIndex).attr(attrs)
newNodesHtmlObj.trs_fixed.eq(newNodeIndex).attr(attrs)
newNodesHtmlObj.trs_fixed_r.eq(newNodeIndex).attr(attrs)
}) })
var trIndexPrev = parseInt(newNodes[0][LAY_DATA_INDEX]) - 1; var trIndexPrev = parseInt(newNodes[0][LAY_DATA_INDEX]) - 1;
var tableViewElemMAIN = tableViewElem.find(ELEM_MAIN); var tableViewElemMAIN = tableViewElem.find(ELEM_MAIN);

Loading…
Cancel
Save