Question

我正在使用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的问题？提前谢谢。

jsTree和子元素的问题

0 个答案: