2

我正在使用 jsTree 在 ASP.NET 中创建文件结构可视化工具。我发现只要所有节点都在根级别，我就可以很好地渲染树结构。当我合并子节点时，它们不会被渲染。我已经尝试使用来自 stackoverflow 和其他帮助站点的（据说）已知良好的 JSON，但它都不起作用，即使我只是复制并粘贴提供的代码而没有修改。

我在预先存在的 .NET 4.5 Web 项目上使用 Visual Studio 2012 中的 jQuery 1.8.0 和 jsTree 1.0-rc3。脚本和 uls 位于 Web 用户控件中。我已经在 IE 8、Firefox 21.0 和 Chrome 28.0 中对此进行了测试，结果都相同。

第一个树是一个测试，基于我要移植到 .NET 的 PHP 应用程序中的现有菜单。

HTML 很简单：

<div class="span-24" id="treeheader">    
<ul> 
    <li class="active"><a href="#" id="header-tab">Header/Trailer</a></li> 
    <li><a href="#" id="employee-tab">Employee</a></li> 
    <li><a href="#" id="dependent-tab">Dependent</a></li>
    <li><a href="#">Toggle Advanced</a></li> 
</ul>

树化该 ul 的脚本：

        jQuery("#treeheader").jstree({
        "plugins": ["themes", "html_data", "ui", "crrm"], // "hotkeys"],
        "core": { "initially_open": ["hhtml_1"] }
    });

到目前为止，一切都很好。然而，对于实际的文件结构，我不能对 ul 进行硬编码；相反，我从服务接收 json 并使用它为我构建 ul：

        $('#treeviewer').jstree({
        "json_data": {
            "data": "834 - v5010 File",
            "attr": "phtml_1",
            "state": "open",
            "children":
                [
                    {
                        "data": "BGN - Beginning Segment",
                        "attr": "phtml_2"
                    },
                    {
                        "data": "REF - Transaction Set Policy Number",
                        "attr": "phtml_3"
                    },
                    {
                        "data": "DTP LOOP - File Effective Date",
                        "attr": "phtml_4"
                    },
                    {
                        "data": "N1 - Sponsor Name",
                        "attr": "phtml_5"
                    },
                    {
                        "data": "N1 - Payer",
                        "attr": "phtml_6"
                    }
                ]
        },
        "themes": {
            "theme": "default",
            "url": "../../scripts/Default/style.css",
            "dots": false
        },
        "plugins": ["themes", "json_data", "ui", "crrm"]
    });
});

...在一个空的 div 中：

<div class="span-24" id="treeviewer">

不幸的是，我没有足够的信誉点来上传显示结果的图像，但顶部菜单清楚地显示了四个不同的元素，它们都相互对齐，而第二个树只显示了根元素。我在 json 上尝试了各种变体；这是最简单的一组（因为所有子节点都是一个根节点的子节点，而不是具有测试数据的分支结构）。

我看不出 json 有什么问题，也没有报告错误。我可能需要进行任何类型的处理或格式化才能完成这项工作吗？或者这可能是这个版本的 jsTree 的问题？提前致谢。

4

0 回答 0