【LayUI】LayUI拓展组件：TreeSelect树形下拉选择器

LayUI拓展组件：TreeSelect树形下拉选择器

项目介绍

基于 layui 的树形下拉选择器。支持异步加载，提供点击回调函数，提供设置占位符、选中节点等方法。
组件下载地址：https://gitee.com/sang93/treeselect

效果图

使用示例

<input type="text" id="pidSelect" lay-filter="pidSelect" placeholder="选择父节点" class="layui-input">

<script>
    layui.use(['treeSelect'], function () {
   
   
        var treeSelect= layui.treeSelect;
            
            // 初始化下拉选择器
            treeSelect.render({
   
   
                // css选择器，推荐使用id
                elem: '#pidSelect',   
                // 请求地址
                data: '/system/menu/layui/tree', 
                // ajax请求方式：post/get
                type: 'post',  
                // 返回数据中主键的属性名称，默认值为id
                key: {
   
   
                    id: 'id',
                },
                // 节点点击回调函数
                click: function (d) {
   
     
                    console.log(d);
                }
            });
            
            /* 
             *  手动设置占位符placeholder（不常用）
             *  第一个参数为lay-filter属性的值
             *  第二个参数为需要修改的提示内容
             */
            treeSelect.setTitle('pidSelect', '这里填写要改的内容');
            
            /* 
             *  选中节点（常用于更新时默认选中节点）
             *  第一个参数为lay-filter属性的值
             *  第二个参数为需要选中的节点的id
             */
            treeSelect.checkNode('pidSelect', 0);
    });
</script>

数据格式参考

[
  
  {
   
   
    "children": [
      {
   
   
        "name": "留言列表",
        "icon": "",
        "id": 5,
        "spread": false
      },
      {
   
   
        "name": "发表留言",
        "icon": "",
        "id": 6,
        "spread": false
      }
    ],
    "name": "评论",
    "icon": "",
    "id": 4,
    "spread": false
  },
  {
   
   
    "children": [
      {
   
   
        "children": [
          {
   
   
            "name": "添加用户",
            "icon": "",
            "id": 40,
            "spread": false
          },
          {
   
   
            "name": "编辑用户",
            "icon": "",
            "id": 41,
            "spread": false
          },
          {
   
   
            "name": "删除用户",
            "icon": "",
            "id": 42,
            "spread": false
          }
        ],
        "name": "用户列表",
        "icon": "",
        "id": 8,
        "spread": false
      },
      {
   
   
        "name": "角色列表",
        "icon": "",
        "id": 11,
        "spread": false
      },
      {
   
   
        "children": [
          {
   
   
            "name": "添加权限",
            "icon": "",
            "id": 34,
            "spread": false
          },
          {
   
   
            "name": "编辑权限",
            "icon": "",
            "id": 37