Отображение содержимого в виде дерева диджита

Question

Я использую Dojo и хотел бы создать древовидную структуру. Тем не менее, я хотел бы иметь возможность отображать содержимое в дереве, как только конечный узел в определенной ветви был расширен. например

top
- a branch
-- last item in this branch
    [some content such as a div, span, image etc]
-- another item in this branch
    [some more content]

так далее

Кто-нибудь знает, может ли это быть достигнуто с помощью дерева dijit и, если да, каких-либо указателей?

Answer 1

Покопавшись в документах, я нашел способ сделать это. Это не просто так, думал, что поделюсь. На этой странице приведен пример того, как отобразить узел дерева с расширенной текстовой меткой, а не только с текстом. Это включает в себя объявление вашего собственного класса, который наследуется от Tree._TreeNode, что позволяет вам контролировать его создание. Эту же технику можно использовать.

При создании дерева я переопределяю функцию _createTreeNode следующим образом:

    _createTreeNode: function (args) {
        if (args.item.type === "content") {
            return new LayerManagerContentNode(args);
        } else {
            return new Tree._TreeNode(args);
        }
    }

В моем магазине я добавляю объект для представления контента, который я хочу отображать в строке, и присваиваю ему тип "контента".

Я создаю класс, который наследует от Tree._TreeNode следующим образом:

define (["dojo / _base / декларировать", "dojo/_base/lang", "dojo/dom", "dojo/dom-construct", "dojo/on", "dijit/form/Button", "dijit/ Дерево " ], функция (объявлять, lang, dom, domConstruct, вкл, кнопка, дерево) {возвращать объявлять ("my/ui/platform / desktop / parts / LayerManagerContentNode ", [Tree._TreeNode], {// summary: / /...

    constructor: function () {

    },

    postCreate: function () {

        var button = new Button({
            label: "Test"
        });

        this.domNode.innerHTML = "<div></div>";
        this.domNode.innterText = "";

        button.placeAt(this.domNode, "first");

    }

});

});

в postCreate я создаю кнопку (это было только для тестирования, я, вероятно, создам панель содержимого или что-то для дальнейшего заполнения) для отображения вместо обычного узла дерева. Затем я заменяю узлы дерева innerHTML и innerText, чтобы скрыть то, что обычно отображалось бы, en вуаля, это работает!

Я осмелюсь сказать, что есть более эффективные способы сделать это, поэтому, если кто-то придет и найдет его, добавьте его.