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

2021-05-01 02:28

阅读:261

标签: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


评论


亲,登录后才可以留言!