JQuery/JS插件 jsTree checkbox选中事件 和 节点选中事件 分离版

Posted guxingy

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JQuery/JS插件 jsTree checkbox选中事件 和 节点选中事件 分离版相关的知识，希望对你有一定的参考价值。

 

 

 

 

 

 

 

 

 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>



    <div id="plugins1"></div>


    <link href="dist/themes/default/style.min.css" rel="stylesheet" />
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
    <script src="dist/jstree.min.js"></script>


    <script type="text/javascript">

        //Checkbox plugin
        $(function () {


            $("#plugins1").jstree({
                "checkbox": {
                    "keep_selected_style": false,// 保持选中样式 true为保持，false为不保存，样式不影响功能
                    ‘three_state‘: true,//父子节点关联，true为关联，false为不关联
                    ‘tie_selection‘: false, //
                    ‘whole_node‘: false,//复选框与节点关联 true 为关联 false为不关联
                },
                "plugins": ["checkbox"],//加载插件 checkbox
                ‘core‘: {
                    ‘expand_selected_onload‘: true,//加载完成后默认展开所有选中节点true为选中 false为不展开
                    ‘themes‘: {
                        dots: true //取消连接线
                    },
                    ‘data‘: [
                        {
                            "text": "Root node 1",
                            "id": "1",
                            "state": { "opened": true,"checked": true },
                            "children": [
                                {
                                    "text": "Child node 11", "id": "11", "state": {
                                        "opened": false,
                                        "checked": true
                                    }
                                },
                                {
                                    "text": "Child node 22", "id": "22", "state": {
                                        "opened": false,
                                        "checked": true
                                    },
                                    "children": [
                                        {
                                            "text": "Child node 221", "id": "221", "state": {
                                                "opened": false,
                                                "checked": true
                                            }
                                        },
                                        {
                                            "text": "Child node 222", "id": "222", "state": {
                                                "opened": false,
                                                "checked": true
                                            },
                                        }
                                    ]
                                },
                                {
                                    "text": "Child node 33", "id": "33", "state": {
                                        "opened": false,
                                        "checked": true
                                    }
                                }
                            ]
                        }
                    ]
                }
            });





            //checkbox 选中事件
            $(‘#plugins1‘).on("check_node.jstree", function (node, data, event) {
                var instance = $(‘#plugins1‘).jstree(true);//获取jstree对象
                console.log(instance.get_checked(false));//获取 所有选中的节点 参数：true（返回对象） false/null（返回ids）

                var d = instance.get_checked(false);
                var i = 1;

            });


            //checkbox 取消选中事件
            $(‘#plugins1‘).on("uncheck_node.jstree", function (node, data, event) {
                var instance = $(‘#plugins1‘).jstree(true);//获取jstree对象
                console.log(instance.get_checked(false));//获取 所有选中的节点 参数：true（返回对象） false/null（返回ids）

                var d = instance.get_checked(false);
                var i = 1;
            });





        });


    </script>



</body>
</html>

 

以上是关于JQuery/JS插件 jsTree checkbox选中事件 和 节点选中事件 分离版的主要内容，如果未能解决你的问题，请参考以下文章

JQuery/JS插件 jsTree checkbox选中事件 和 节点选中事件 分离版

如何在 Ember 中使用 jsTree 插件

Jstree 状态插件不保存树状态

jsTree v 3+：如何在制作 jsTree 时使用 JSON 格式为“类型”插件传递 [类型] 信息？

react项目可以引入jstree插件吗

JQuery/JS鎻掍欢 jsTree鍔犺浇鏍戯紝鍒濆鍖栨椂鍔犺浇鍓嶄笁绾ц妭鐐癸紝褰撳睍寮€绗笁绾ц妭鐐规椂 灏卞姞杞借鑺傜偣涓嬬殑鎵€鏈夊瓙鑺傜偣