Отображение контента внутри с помощью дерева dijit

Я использую 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 Tree, и если да, то какие-либо указатели?


dojo dijit.tree
person Kate    schedule 23.05.2014    source источник
comment
Лучше всего начать с с нескольких примеров.   -  person Bucket    schedule 23.05.2014
comment
Спасибо за комментарий. Я уже читал эту страницу, но, перечитав ее, понял, что в примере с форматированным текстом есть намек на то, что делать. Я опубликую то, что я сделал для будущих поколений.   -  person Kate    schedule 23.05.2014

Ответы (1)


arrow_upward
0
arrow_downward

Покопавшись в документах, я нашел способ сделать это. Это не просто, поэтому решил поделиться. На этой странице приведен пример отображения узла дерева с метка с форматированным текстом, а не просто текст. Это включает в себя объявление собственного класса, наследуемого от 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/declare", "dojo/_base/lang", "dojo/dom", "dojo/dom-construct", "dojo/on", "dijit/form/Button", "dijit/ Tree" ], function (declare, lang, dom, domConstruct, on, Button, Tree) { return declare("my/ui/platforms/desktop/parts/LayerManagerContentNode", [Tree._TreeNode], { // резюме: / / ...

    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, чтобы скрыть то, что обычно отображается, и вуаля, все работает!

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

person Kate    schedule 23.05.2014