javascript - 如何使用 "jstree"jquery 插件将 json 变量附加为子节点 - 无 ajax

Question

我有一个使用 json 数据格式的 jsTree。 加载根节点集没问题。

我的问题是如何将子节点附加到被点击的父节点。

如有任何帮助，我们将不胜感激。

谢谢!

    $("#tree-cat1")
    .bind("open_node.jstree", function (event, data) {
        console.log(data.rslt.obj.attr("id"));
        //eval(loadChild());
        //at this point i need to append the result of loadChild() to the tree under the relevant node
    })
    .jstree({
        "json_data": {
            "data": eval(loadRoot())
        },
        "themes": {"theme": "classic","dots": true,"icons": true},
        "plugins": ["themes", "json_data", "ui"]
    })

function loadRoot() {
    return "[{'data':'A node','state':'closed','attr':{'id':'A'}}]";
}
function loadChild() {
    return "[{'data':'A1 node','attr':{'id':'A1'}}]";
}

Answer 1

请参阅此处的文档:jsTree docu

编辑

这里是代码，你需要把url改成你的目的地，试一下

HTML:

<div id="tree-cat1"></div>

js:

 $("#tree-cat1").jstree({
    "plugins": ["themes", "json_data", "ui"],
    "themes": {"theme": "classic","dots": true,"icons": true},
    "json_data": {
          //root elements
        "data": [{"data":'A node',"state":'closed',"attr":{"id":'A'}}], 
        "ajax": {
            "type": 'POST',
            "data": {"action": 'getChildren'},
            "url": function (node) { 
                var nodeId = node.attr('id'); //id="A"

                return 'yuorPathTo/GetChildrenScript/' + nodeId;
            },
            "success": function (new_data) {
                //where new_data = node children 
                //e.g.: [{'data':'A1 node','attr':{'id':'A1'}}, {'data':'A2 node','attr':{'id':'A2'}}]
                return new_data;
            }
        }
    }
});

旧部分
类似的东西将用 child 填充打开的节点，如果还没有完成的话:

 ...
    "json_data": {
          //root elements
        "data": [{"data":'A node',"state":'closed',"attr":{"id":'group_A'}}], 
        "ajax": {
            "type": 'POST',
            "data": {"action": act.GET_GROUPREPORTS},
            "url": function (node) { 
                var nid = node.attr('id'); //id="group_A"
                nid = nid.substr(nid.lastIndexOf('_')+1);

                return module.getDBdata_path + nid;
            },
            "success": function (data) {
                var rid, new_data = data;

                if (typeof data[0] === 'undefined') {
                    new_data = [];
                    for (rid in data) {
                        if(data.hasOwnProperty(rid)) {
                          new_data.push({"data": data[rid], 
                               "attr": {"id": 'rprefix_'+rid, 
                                        "title": ' ', 
                                        "rel": 'report',
                                        "href": module.repView_path+rid
                              }
                          });
                        }
                    }
                }
                return new_data;
            }
        }
    }, ...