我可以使用预加载了JSON数据的jsTree，并同时使用Ajax吗？

Question

我可以使用预加载了JSON数据的jsTree，并同时使用Ajax吗？

3

我已经成功使用JSON数据使jsTree工作：JSON数据表示服务器的文件系统，用户可以从树形结构中选择一个文件夹，然后将其添加到文件夹输入字段中。我不希望页面在未提供顶层三个级别的文件系统的情况下加载。但是，我不解析整个文件系统，因为这需要太长时间。

我能否使用预先填充的JSON数据预先填充jsTree，并在用户打开未预先填充的树下进一步节点时使用Ajax，或者我必须在初始加载时也使用Ajax？

以下是我的当前代码（没有任何Ajax），但仅出于简洁起见，仅检索到一级数据：它从服务器返回C:\和E:\文件系统。这很有效，但我不清楚如何引入Ajax，当用户尝试打开更深层次的节点时。

    <label for="folder">Selected Folder</label>
    <input type="text" name="folder" id="folder">
    <br>
    <script type="text/javascript">
    function createJSTree(jsondata) 
    {            
      $('#jstree').jstree(
        {
          "plugins" : ["themes","html_data","ui","cookie"],
          'core': 
          {
              'data': jsondata
          }
        }
      )
      .bind("select_node.jstree",   
                function (e, data) 
                {
                    var objNode = data.instance.get_node(data.selected);
                    document.getElementById('folder').value=objNode.id;
                }
        )
      ;
    }

    $(function() { var jsondata ={"text":"pclaptop","children":[{"id":"C:\\","text":"C:\\","children":[]},{"id":"E:\\","text":"E:\\","children":[]}]}; createJSTree(jsondata); })
    </script>

- Paul Taylor

你使用的jsTree版本是多少？ - Jonathan Chaplin

@JonathanChaplin 我认为最新的版本是3.3.5。 - Paul Taylor

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Jonathan Chaplin · Answer 1

在我讲解代码的ajax部分之前，我必须设置jsTree中的check_callback参数以启用jsTree的编辑功能。接下来，在jQuery的ajax调用成功方法中调用`$('#jstree').jstree().create_node('#'，parsedData，"last")；就能解决问题了。我的解决方案如下：

index.html

<label for="folder">Selected Folder</label>
    <input type="text" name="folder" id="folder">
    <br>
    <button id="create-node-button">
       Create Node
    </button>
<div id="jstree"></div>
<script type="text/javascript">
    function createJSTree(jsondata) {
        $('#jstree').jstree({
                "plugins": ["themes", "html_data", "ui", "cookie"],
                'core': {
                    'check_callback': true,
                    'data': jsondata
                }
            })
            .bind("select_node.jstree",
                function(e, data) {
                    var objNode = data.instance.get_node(data.selected);
                    document.getElementById('folder').value = objNode.id;
                }
            );
    }

    $(function() {
        var jsondata = [{
                "id": "pclaptop",
                "parent": "#",
                "text": "pclaptop"
            },
            {
                "id": "C:\\",
                "parent": "pclaptop",
                "text": "C:\\"
            },
            {
                "id": "E:\\",
                "parent": "pclaptop",
                "text": "E:\\"
            },
            {
                "id": "F:\\",
                "parent": "pclaptop",
                "text": "F:\\"
            }
        ];
        createJSTree(jsondata);

        $("#create-node-button").on("click", function() {
            $.ajax({
                url: "./data.json",
                success: function(data){
                    var parsedData = JSON.parse(data);
                    $('#jstree').jstree().create_node('#', parsedData, "last");
                }
            });
        });
    });
</script>

data.json

{ "id" : "ajson5", "text" : "newly added" }

最后，这里有个小例子。我不太确定在jsfiddle中如何正确设置ajax调用，所以我选择了本地操作。