如何获取jstree所有已检查的节点文本

时间:2015-01-18 13:42:18

标签: jstree

<html>
<head>
<script type="text/javascript">
        $("#tree").jstree({
                    "core" : {
                        "themes" : {
                            "responsive": false
                        }, 
                        "check_callback" : true,
                        'data': [
        {
            "id": "10",
            "text": "Parent Node",
            "children": [
                {
                    "id": "101",
                    "text": "Initially selected",
                    "state": {
                        "selected": true
                    }
                },
                {
                    "id": "20",
                    "text": "Custom Icon"
                },
                {
                    "id": "30",
                    "text": "Initially open",
                    "state": {
                        "opened": true
                    },
                    "children": [
                        {
                            "id": "301",
                            "text": "Another node"
                        }
                    ]
                },
                {
                    "id": "40",
                    "text": "Another Custom Icon"
                },
                {
                    "id": "50",
                    "text": "Disabled Node",
    "state": {
                        "disabled": true
                    }
                },
                {
                    "id": "60",
                    "text": "Sub Nodes",
                    "children": [
                        {
                            "id": "601",
                            "text": "Item 1"
                        },
                        {
                            "id": "602",
                            "text": "Item 2"
                        },
                        {
                            "id": "603",
                            "text": "Item 3"
                        },
                        {
                            "id": "604",
                            "text": "Item 4"
                        },
                        {
                            "id": "605",
                            "text": "Item 5"
                        }
                    ]
                }
            ]
        }
    ]},
                    "types" : {
                        "default" : {
                            "icon" : "fa fa-folder icon-state-warning icon-lg"
                        },
                        "file" : {
                            "icon" : "fa fa-file icon-state-warning icon-lg"
                        }
                    },
                    "plugins" : [ "checkbox", "state", "types" ]
                });


    $("#tree").on("changed.jstree", function (e, data) {
     for(var i=0;i<data.checked.length;i++) {
     document.getElementById("Content").value +=data.instance.get_node(data.checked[i]).text+",";
     }
     })

</script>
<body>
<div id="tree">
</div>
<textarea id="Content" name="Content" rows="10"></textarea>
</body>
</html>

https://drive.google.com/file/d/0B4PAmUA35G8FTEtvakdPazlPdGs/view?pli=1

我检查了这棵树中的四个节点,我想在textarea上显示。

“父节点,最初选择,自定义图标,最初打开,另一个节点”

如何获取所有已检查的节点文本?

1 个答案:

答案 0 :(得分:0)

试试这个:

function getAllSelectedNodesText(jsTree) {
   // this returns ids of all selected nodes
   var selectedNodes = jsTree.jstree("get_selected"); 

   var allText = [];

   // Go through all selected nodes to get text (jquery)
   $.each(selectedNodes, function (i, nodeId) {
       var node = jsTree.jstree("get_node", nodeId);
       allText.push(node.text); // Add text to array
   });

   return allText.join(); // This will join all entries with comma
}

您可以这样称呼它:

var allSelectedText = getAllSelectedNodesText($("#tree"));

有用的链接:

http://www.jstree.com/api/#/?q=(&f=get_selected([full])

http://www.jstree.com/api/#/?q=(&f=get_node(obj [, as_dom])