Can I use jsTree preloaded with JSON data and also use Ajax

问题

I have jsTree working with JSON data: the JSON data represents the server's file system, and the user can select a folder from the tree, which is then added to the folder input field). I don't want the page to load without the top three levels of the file system provided. However, I don't parse the whole file system because that would take too long.

Can I pre-populate jsTree with JSON data and use Ajax when the user opens nodes further down the tree which were not pre-populated, or do I have to use Ajax for the initial load as well?

Below I show my current code (without any Ajax), but only retrieving data down to one level for the sake of brevity: it returns C:\ and E:\ file systems from the server. This works, but I'm unclear how to introduce Ajax to this when the user tries to open a node further down the hierarchy.

    <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>

回答1:

Before I get into the ajax piece of the code I had to set the check_callback parameter in jsTree it enables editing of the jsTree. Next, I call `$('#jstree').jstree().create_node('#', parsedData, "last"); in the success method of jQuery's ajax call, and that did the trick. My solution is below:

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" }

Lastly, here is a fiddle . I wasn't sure of how to properly set up the ajax call in jsfiddle so I did it locally instead.

来源：https://stackoverflow.com/questions/48386954/can-i-use-jstree-preloaded-with-json-data-and-also-use-ajax