如何使用"jstree"将json变量附加为子节点jQuery插件-无Ajax [英] how to append json variable as child nodes using "jstree" jquery plugin - no ajax

问题描述

我有一个使用json数据格式的jsTree. 加载根节点集就可以了.

I have a jsTree using the json data format. Loading the root nodeset is fine.

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

My problem is how to append child nodes to the parent node that was clicked.

任何帮助将不胜感激.

谢谢！

    $("#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'}}]";
}

推荐答案

请参见此处的文档: jsTree文档

编辑

这是代码，您需要将url更改为目的地，然后尝试

here is the code, you need to change url to your destination, try it

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;
            }
        }
    }
});

旧零件
诸如此类的操作将在打开的节点中填充子节点(如果尚未完成的话):

OLD PART
something like that will populate opened node with children, if not already done:

 ...
    "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;
            }
        }
    }, ...

这篇关于如何使用"jstree"将json变量附加为子节点jQuery插件-无Ajax的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！