ASP.NET jstree 复选框获取所有选定的节点和子节点答案

【问题标题】：ASP.NET jstree checkbox get all selected nodes and childASP.NET jstree 复选框获取所有选定的节点和子节点
【发布时间】：2014-11-24 10:09:20
【问题描述】：

我遇到了这个问题，我正在使用 asp 和 jstree 复选框插件，我需要获取所有节点而不是被选中的节点（父母和他的孩子），优先选择数组上的完整路径，然后拆分它，因为我需要这样做在数据库上搜索，我需要父母和孩子。

这是我的代码：

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>

    <link href="jstree-bootstrap-theme-master/dist/libs/bootstrap/css/bootstrap-theme.min.css" rel="stylesheet" />
    <link href="jstree-bootstrap-theme-master/dist/libs/bootstrap/css/bootstrap.min.css" rel="stylesheet" />

    <link href="jstree-bootstrap-theme-master/dist/themes/proton/style.min.css" rel="stylesheet" />

    <script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
    <script src="jstree-bootstrap-theme-master/dist/libs/bootstrap/js/bootstrap.min.js"></script>
    <script src="jstree-bootstrap-theme-master/dist/jstree.min.js"></script>
    
</head>
<body>

    <div id="container">
        <ul>
            <li>Root node
      <ul>
          <li id="child_node">Child node</li>
      </ul>
            </li>
        </ul>
    </div>

    <button type="button" class="btn btn-primary" id="getChecked">Botón normal</button>
    




    <script type="text/javascript">
        $('#container').jstree({
            'plugins': ["wholerow", "checkbox"],
            'core': {
                'data': [{
                    "text": "RRRAAAA",
                    "children": [
                        {
                            "text": "S1",
                            "icon": "glyphicon glyphicon-chevron-right",
                            "state": {
                                "selected": false
                            }
                        },
                    {
                        "text": "S2",
                        "icon": "glyphicon glyphicon-chevron-right"
                    },
                    {
                        "text": "A2",
                        "icon": "glyphicon glyphicon-chevron-right"
                    },
                    {
                        "text": "A2",
                        "icon": "glyphicon glyphicon-chevron-right"
                    },
                    {
                        "text": "F",
                        "icon": "glyphicon glyphicon-chevron-right"
                    }]
                }],
                'themes': {
                    'name': 'proton',
                    'responsive': true
                }
            }
        }).on('select_node.jstree', function (e, data) {
        var i, j, nid;

        for (i = 0, j = data.selected.length; i < j; i++) {
            nid = data.instance.get_node(data.selected[i]).id;

            alert(nid);

        }
    }); 
      
      
      

        $(function () {

            $("#getChecked").click(function () {

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

        });
    </script>

</body>
</html>

【问题讨论】：

标签： twitter-bootstrap checkbox jstree

【解决方案1】：

在 Jstree 中有 2 个类可用于区分节点检查和未检查状态。它们分别是“jstree-checked”和“jstree-unchecked”

因此，为了获得所有未选中的节点，您可以使用以下逻辑

 var nodeCheckedCount= $('.jstree-unchecked').length;     
 var Ids = '';
        if (nodeCheckedCount=  > 0) {
            for (i = 0; i < nodeCheckedCount= ; i++) {
                var temp = $($('.jstree-unchecked')[i]).attr('id')
                if (Ids  == "") {
                    Ids  += temp;
                }
                else {
                    Ids= Ids + "," + temp;
                }
            }
console.log(Ids)

【讨论】：