Layui-TreeSelect 树形下拉框的使用

桃扇骨 2022-11-26 04:55 1066阅读 0赞

## 使用 ##

### 下载Layui-TreeSelect源码 ###

[码云地址][Link 1]

### 获取核心 js 文件 treeSelect.js ###

文件目录 /module/treeSelect/treeSelect.js

### 引入工程 ###

目录结构  
![format_png][]

### 示例demo ###

<html>
    
    <head>
        <meta charset="UTF-8" />
        <title>测试</title>
        <link href="${base}/static/layui/css/layui.css" rel="stylesheet" type="text/css" />
    </head>
    
    <body>
    
        <input type="text" id="tree" lay-filter="tree" class="layui-input">
    
    
        <script type="text/javascript" src="${base}/static/layui/layui.js"></script>
        <script type="text/javascript" src="${base}/static/js/jquery-3.5.0.min.js"></script>
        <script>
            // 引入treeSelect 组件
            layui.config({
         
                base: "/static/layui/"
            }).extend({
         
                treeSelect: "treeSelect/treeSelect"
            });
    
            layui.use(['treeSelect'], function () {
         
                var treeSelect = layui.treeSelect;
                treeSelect.render({
         
                    // 选择器
                    elem: '#tree',
                    // 数据
                    data: '/system/resource/treeSelectList',
                    // 异步加载方式：get/post，默认get
                    type: 'get',
                    // 占位符
                    placeholder: '修改默认提示信息',
                    // 是否开启搜索功能：true/false，默认false
                    search: true,
                    // 点击回调
                    click: function (d) {
         
                        console.log(d);
                    },
                    // 加载完成后的回调函数
                    success: function (d) {
         
                        console.log(d);
                    }
                });
    
            });
    
        </script>
    </body>
    
    </html>

### 返回数据参考 ###

[{
        
    	"id": 1,
    	"name": "zzz",
    	"open": true,
    	"children": [{
        
    		"id": 2,
    		"name": "1",
    		"open": false,
    		"checked": true
    	}, {
        
    		"id": 3,
    		"name": "2",
    		"open": false,
    		"checked": true
    	}, {
        
    		"id": 17,
    		"name": "3z",
    		"open": false,
    		"checked": true
    	}],
    	"checked": true
    }, {
        
    	"id": 4,
    	"name": "评论",
    	"open": false,
    	"children": [{
        
    		"id": 5,
    		"name": "留言列表",
    		"open": false,
    		"checked": false
    	}, {
        
    		"id": 6,
    		"name": "发表留言",
    		"open": false,
    		"checked": false
    	}, {
        
    		"id": 333,
    		"name": "233333",
    		"open": false,
    		"checked": false
    	}],
    	"checked": false
    }, {
        
    	"id": 10,
    	"name": "权限管理",
    	"open": false,
    	"children": [{
        
    		"id": 8,
    		"name": "用户列表",
    		"open": false,
    		"children": [{
        
    			"id": 40,
    			"name": "添加用户",
    			"open": false,
    			"url": null,
    			"title": "40",
    			"checked": false,
    			"level": 2,
    			"check_Child_State": 0,
    			"check_Focus": false,
    			"checkedOld": false,
    			"dropInner": false,
    			"drag": false,
    			"parent": false
    		}, {
        
    			"id": 41,
    			"name": "编辑用户",
    			"open": false,
    			"checked": false
    		}, {
        
    			"id": 42,
    			"name": "删除用户",
    			"open": false,
    			"checked": false
    		}],
    		"checked": false
    	}, {
        
    		"id": 11,
    		"name": "角色列表",
    		"open": false,
    		"checked": false
    	}, {
        
    		"id": 13,
    		"name": "所有权限",
    		"open": false,
    		"children": [{
        
    			"id": 34,
    			"name": "添加权限",
    			"open": false,
    			"checked": false
    		}, {
        
    			"id": 37,
    			"name": "编辑权限",
    			"open": false,
    			"checked": false
    		}, {
        
    			"id": 38,
    			"name": "删除权限",
    			"open": false,
    			"checked": false
    		}],
    		"checked": false
    	}, {
        
    		"id": 15,
    		"name": "操作日志",
    		"open": false,
    		"checked": false
    	}],
    	"checked": false
    }]

### 数据格式解析 ###

主要属性 id, name, children, checked, open

## 问题记录 ##

因为在修改页面中需要有默认选中的功能，在使用官方提供的 api treeSelect.checkNode(‘tree’, 3); 时报错 Cannot read property ‘getNodeByParam’ of null  
　　原因：该方法 checkNode(‘tree’, 3) 需要在渲染完成后执行，即在 success 回调方法中使用

$.ajax({
        
                        url: '/system/resource/' + menuId,
                        method: 'get',
                        success: function (res) {
        
                            if (res.code == 200) {
        
                                console.log(res.data);
                                form.val('example', res.data);
                                treeSelect.render({
        
                                    // 选择器
                                    elem: '#tree',
                                    // 数据
                                    data: '/system/resource/treeSelectList',
                                    // 异步加载方式：get/post，默认get
                                    type: 'get',
                                    // 占位符
                                    placeholder: '修改默认提示信息',
                                    // 是否开启搜索功能：true/false，默认false
                                    search: true,
                                    // 点击回调
                                    click: function (d) {
        
                                    },
                                    // 加载完成后的回调函数
                                    success: function (d) {
        
                                        treeSelect.checkNode('tree', res.data.parentId);
                                    }
                                });
                            }
                        }
                    })

[Link 1]: https://gitee.com/wujiawei0926/treeselect
[format_png]: /images/20221124/d5fbccf9efb54506b4fc8d739239adf7.png