Question

我试图从数据集的结果作为对象数组构建一棵树，但是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秒。相同的代码在1秒钟左右的时间内运行到Chrome 70.0.3538.67中。

有一种方法可以改善代码？我需要尽可能减少IE的时间。

谢谢。

谷

Answer 1

您可以基于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>

以下截图：

从具有根和子条件的数组构建分层树的最佳方法

1 个答案: