码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2020-01-04 12:16:57      阅读:180      评论:0      收藏:0      [点我收藏+]

标签:oct   text   影响   doc   事件   log   keep   body   meta   

 

 

 

 

 

 

 

 

 

<!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选中事件 和 节点选中事件 分离版

标签:oct   text   影响   doc   事件   log   keep   body   meta   

原文地址:https://www.cnblogs.com/guxingy/p/12148215.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!