在JQuery JStree中获取Checked元素

时间:2013-08-16 18:33:54

标签: jquery jstree

我用JSON对象创建了一个Jquery jstree。我的树工作正常

创建jstree

$("#tree").jstree({
    "json_data": {
        "data": [{
            "data": "pe_opensourcescanning",
            "id": 0,
            "pId": -1,
            "children": [{
                "data": "tags",
                "id": 30,
                "pid": 0
            }, {
                "data": "branches",
                "id": 29,
                "pid": 0
            }, {
                "data": "trunk",
                "id": 1,
                "pid": 0,
                "children": [{
                    "data": "import-export",
                    "id": 28,
                    "pid": 1
                }, {
                    "data": "custom_development",
                    "id": 12,
                    "pid": 1
                }, {
                    "data": "Connectors",
                    "id": 7,
                    "pid": 1
                }, {
                    "data": "support",
                    "id": 6,
                    "pid": 1
                }, {
                    "data": "Installation-Configuration",
                    "id": 5,
                    "pid": 1
                }, {
                    "data": "backup",
                    "id": 2,
                    "pid": 1
                }]
            }]
        }]
    },
    "plugins": ["themes", "json_data", "checkbox", "ui"]
}).bind("select_node.jstree", function (e, data) {
    alert(data.rslt.obj.data("id"));
});

现在我想要每个选中节点的“id”和“data”值。我试图写一些东西,但不幸的是,这不起作用。请帮助我如何实现这一目标。

获取已检查的节点

$("#tree").jstree("get_checked",null,true).each(function () { 
    alert(this.data);
    alert(this.id);
});

1 个答案:

答案 0 :(得分:2)

您获取已检查节点的功能是正确的,问题是您的JSON格式不正确;在树上设置属性,因此无法从方法中获取。

您必须使用属性attr,否则将不会在文档中设置任何数据:

  

attr对象将在生成的li节点上显示为属性。

代码:

$("#tree").jstree({
    "json_data": {
        "data": [{
            "data": "pe_opensourcescanning",
                "attr": {
                "id": 77,
                    "pId": -1
            },
                "children": [{
                "data": "tags",
                    "attr": {
                    "id": 30,
                        "pid": 0
                }
            }, {
                "data": {
                    "title": "branches"
                },
                    "attr": {
                    "id": 29,
                        "pid": 0
                }
            }]
        }]
    },
        "plugins": ["themes", "json_data", "checkbox", "ui"]
})

$("#getChecked").click(function () {
    $("#tree").jstree("get_checked", null, true).each(function (i, e) {
        console.log($(this).attr("id"))
    });
});

演示:http://jsfiddle.net/IrvinDominin/RYhgD/

文档:http://www.jstree.com/documentation/json_data