jquery - 获取 JQuery JStree 中选中的元素

Question

我使用 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);
});

Answer 1

您获取已检查节点的函数是正确的，问题是您的 JSON 格式不正确；在树上设置属性，因此无法从方法中获取它们。

您必须使用属性attr，否则不会在节点上设置任何数据，来自文档:

The attr object will appear as attributes on the resulting li node.

代码:

$("#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