JQuery/JS插件 jstree 設置節點的圖標樣式

 

 

方法一：

　　1、在配置文件中增加預設樣式

　　

 

 

 　　

            $("#plugins1").jstree({
                "checkbox": {
                    //"keep_selected_style": true//顯示選中的樣式
                    //"keep_selected_style": false,// 保持選中樣式 true為保持，false為不保存，樣式不影響功能
                    'three_state': true,//父子節點關聯，true為關聯，false為不關聯
                    'tie_selection': false, //
                    'whole_node': false,//復選框與節點關聯 true 為關聯 false為不關聯
                },
                "types": {
                    'nouser': {
                        "icon": 'layui-icon layui-icon-ok'
                    }
                },
                "plugins": ["checkbox", "types"],//加載插件 checkbox
                'core': {
                    'expand_selected_onload': true,//加載完成后默認展開所有選中節點true為選中 false為不展開
                    'themes': {
                        dots: true //取消連接線
                    },
                    'data': data
                }
            });

 

核心代碼：

                "types": {
                    'nouser': {
                        "icon": 'layui-icon layui-icon-ok'
                    }
                },
                "plugins": ["types"],//加載插件 checkbox

 

 

　　2、修改數據源，增加type字段

　　

 

 

 　　

type: 'nouser'//設置圖標類型

 

 

方法二：

　　1、在配置文件中增加預設樣式，跟方法一一樣

　　2、

　　

            $('#plugins1').on("load_node.jstree", function (event, data) {
                var nodes = data.instance._model.data;
                for (var i in nodes) {
                    var node = nodes[i];
                    data.instance.set_type(node, 'nouser');//關鍵代碼
                }
            });

 

 

效果預覽：