layui treeSelect
WidgetBox 人气:4官方地址: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
加载全部内容