使用 dijit 树内嵌显示内容答案

【问题标题】：Display content inline with a dijit Tree使用 dijit 树内嵌显示内容
【发布时间】：2023-03-20 16:15:01
【问题描述】：

我正在使用 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 树来实现，如果可以，任何指针？

【问题讨论】：

一个好的起点是looking at some examples。
感谢您的评论。我已经阅读了该页面，但在重新阅读后，我意识到富文本示例中有一些提示。我将发布我为后代所做的事情。

标签： dojo dijit.tree

【解决方案1】：

在文档中四处挖掘之后，我找到了一种方法来做到这一点。这并不简单，所以我想我会分享。 This page 有一个示例，说明如何使用富文本标签而不是仅显示文本来显示树节点。这涉及声明您自己的继承自 Tree._TreeNode 的类，允许您控制它的创建。可以使用相同的技术。

创建树时，我重写了_createTreeNode函数如下：

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

在我的商店中，我添加了一个对象来表示我想内联显示的内容，并给它一种“内容”类型。

我创建了一个继承自 Tree._TreeNode 的类，如下所示：

定义（[ "dojo/_base/declare", "道场/_base/lang", "道场/dom", "dojo/dom-construct", “道场/开”， "dijit/表单/按钮", “dijit/树” ]、函数（声明、语言、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 以隐藏通常显示的内容，瞧，它可以工作了！

我敢说有更好的方法可以做到这一点，所以如果有人出现并且有一个，请添加它。

【讨论】：