Лучший способ построить иерархическое дерево из массива с корневыми и дочерними условиями - PullRequest
Новая
       24

Лучший способ построить иерархическое дерево из массива с корневыми и дочерними условиями

0 голосов
/ 19 октября 2018

Я пытался построить дерево из результатов набора данных в виде массива объектов, но у 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 как можно меньше.

Заранее спасибо.

Vale

1 Ответ

0 голосов
/ 23 октября 2018

Вы можете создать дерево на основе свойств 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>

снимок экрана, как показано ниже:

enter image description here

...