javascript - 从具有根和子条件的数组构建分层树的最佳方法
问题描述
我试图从数据集的结果构建一棵树作为对象数组,但 IE 对它有不好的感觉。问题在于时机。
我必须处理这样的数据来构建树:
var DataSet = [{
NodeId: 1,
Label: 'Root',
ParentId: null,
Icon: 'icon'
}, {
NodeId: 2,
Label: 'Children',
ParentId: 1,
Icon: 'icon1'
}, {
NodeId: 3,
Label: 'Children',
ParentId: 1,
Icon: 'icon1'
}, {
NodeId: 4,
Label: 'Children_lvl2',
ParentId: 2,
Icon: 'icon2'
}];
成为孩子或根的条件是对象:
var ForBeChild = { ParentId: '%@' }
var ForBeRoot = { ParentId: null }
其中 '%@' 是对象的任何值,也可以按条件设置:
var ColNameAsId = 'NodeId';
对于作为树的订单数据,我创建了以下函数:
var CreateTree = function (Parents, DataToAssign) {
if (!Parents.length) return [];
for (var i = 0; i < Parents.length; i++) {
var ParentData = Parents[i];
var Children = DataToAssign.filter(function (data) {
for (var key in ForBeChild) {
var value = ForBeChild[key];
if (value === '%@') {
if (ParentData[ColNameAsId] != data[key]) {
return false;
}
} else {
if (data[key] != value) {
return false;
}
}
}
return true;
});
ParentData._children = CreateTree(Children, DataToAssign);
}
return Parents;
};
在调用它之前,我检索父母作为参数传递:
var RootNodes = DataSet.filter(function (data) {
for (var key in ForBeRoot) {
if (data[key] != ForBeRoot[key])
return false;
}
return true;
});
然后构建所有树:
var JsonTree = CreateTree(RootNodes, DataSet);
在 IE 11.0.60 (Win10) 中进行测试 - 我知道这不是最后一次 - 创建树的时间是 5/6 秒。运行到 Chrome 70.0.3538.67 的相同代码的时间约为 1 秒。
有一种方法可以改进代码吗?我需要尽可能减少 IE 的时间。
提前致谢。
谷
解决方案
您可以根据 ParentId 和 NodeId 属性创建树,这样就无需遍历属性。它将减少创建树的时间。
代码如下:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
var DataSet = [{
NodeId: 1,
Label: 'Root',
ParentId: 0,
Icon: 'icon'
}, {
NodeId: 2,
Label: 'Children',
ParentId: 1,
Icon: 'icon1'
}, {
NodeId: 3,
Label: 'Children',
ParentId: 1,
Icon: 'icon1'
}, {
NodeId: 4,
Label: 'Children_lvl2',
ParentId: 2,
Icon: 'icon2'
}];
$(document).ready(function () {
var data = PopulateTreeNode(DataSet, 0);
});
function PopulateTreeNode(data, parentid) {
var newdata = data.filter(function (value) {
return (value.ParentId == parentid);
});
newdata.forEach(function (e) {
e._children = PopulateTreeNode(data, e.NodeId);
})
return newdata;
};
</script>
截图如下: