layui treeSelect

官方地址：https://fly.layui.com/extend/treeSelect/

下面介绍一下这个插件的使用方法

1.html页面

<div class="layui-input-block">
      <input name="pid" value="" type="text" id="tree" lay-filter="tree" class="layui-input">
</div>

2.js引入插件(引入多个插件的方法)

layui.config({
    base: '__ROOT__/static/'      //公共的文件夹
    ,version: new Date().getTime()
  }).extend({                    //需要引入的插件
        treetable: 'plugs/treetable-lay/treetable',
        treeSelect: 'treeSelect', //这是此文章需要的插件
        authtree: 'authtree'
  });

3.写入js方法

treeSelect.render({
            // 选择器
            elem: '#tree',
            // 数据
            data: "{:url('systemmenu/getAllRule')}",   //写成自己的接口（切记这里的数据一定是json格式）
            // 异步加载方式：get/post，默认get
            type: 'get',
            // 占位符
            placeholder: '修改默认提示信息',
            // 是否开启搜索功能：true/false，默认false
            search: true,
            // 一些可定制的样式
            style: {
                folder: {
                    enable: true
                },
                line: {
                    enable: true
                }
            },
            // 点击回调（可以获取到点击时候的值）
            click: function(d){
                $('#tree').val(d.current.id);
            },
            // 加载完成后的回调函数
            success: function (d) {
               //选中节点，根据id筛选
             treeSelect.checkNode('tree',$("#tree").val());

               //获取zTree对象，可以调用zTree方法
               var treeObj = treeSelect.zTree('tree');

            }
        });

4.PHP接口（这里根据自己的需求写好接口处理成树形接口，返回方式必须是json格式）

public function  getAllRule(){
        $list = $this->modelSystemMenuModel->field(['id', 'pid', 'name'])->order('sort desc,id desc')
            ->select()
            ->toArray();
        $list = list_to_tree($list);
        array_unshift($list, ['id' => 0, 'pid' => -1, 'name' => '顶级菜单']);

        return json($list);
    }

function list_to_tree($list, $pk = 'id', $pid = 'pid', $child = 'children', $root = 0) {
        // 创建Tree
        $tree = array();

        if (is_array($list)) {
            // 创建基于主键的数组引用
            $refer = array();
            foreach ($list as $key => $data) {
                $refer[$data[$pk]] = & $list[$key];
            }
            foreach ($list as $key => $data) {
                // 判断是否存在parent
                $parentId = $data[$pid];
                if ($root == $parentId) {
                    $tree[] = & $list[$key];
                } else {
                    if (isset($refer[$parentId])) {
                        $parent = & $refer[$parentId];
                        $parent[$child][] = & $list[$key];
                    }
                }
            }
        }
        return $tree;
    }

下面就是完成后的显示样子

 

作者：dream