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