Древовидное меню jQuery EasyUI -Добавление узлов в древовидное меню

В этом руководстве показано, как добавлять узлы в Tree. Мы создадим дерево продуктов, содержащее узлы фруктов и овощей, затем добавим некоторые другие фрукты к существующему узлу фруктов.

Создание дерева продуктов

Сначала мы создаём дерево продуктов, как показано в следующем коде:

    <div style="width:200px;height:auto;border:1px solid #ccc;">
        <ul id="tt" class="easyui-tree" url="tree_data.json"></ul>
    </div>

Обратите внимание, что компонент Tree определён в теге <ul>, а данные узлов дерева загружаются из URL "tree_data.json".

Получение родительского узла

Затем мы выбираем узел фруктов, щёлкнув по узлу, и добавим данные о других фруктах. Выполните метод getSelected, чтобы получить узел для обработки:

    var node = $('#tt').tree('getSelected');

Возвращаемое значение метода getSelected — это объект JavaScript, имеющий атрибуты id, text и target. Атрибут target — это объект DOM, ссылающийся на выбранный узел; его метод append будет использоваться для добавления дочерних узлов.

Добавление узлов

    var node = $('#tt').tree('getSelected');
    if (node){
        var nodes = [{
            "id":13,
            "text":"Raspberry"
        },{
            "id":14,
            "text":"Cantaloupe"
        }];
        $('#tt').tree('append', {
            parent:node.target,
            data:nodes
        });
    }

Когда вы добавите несколько фруктов, вы увидите:

Как видите, использовать плагин EasyUI Tree для добавления узлов не так уж сложно.

Скачать примеры jQuery EasyUI

jeasyui-tree-tree3.zip