layui 树形菜单展示

<div id="test1"></div> <script> layui.use('tree', function(){ var tree = layui.tree; //渲染 var inst1 = tree.render({ elem: '#test1' //绑定元素 ,accordion:true, data: getData(), }); }); function getData() { var data = []; $.ajax({ url: "get_cate_menu_data", //后台数据请求地址 type: "post", async: false, success: function (resut) { console.log(resut); data = resut; } }); return data; } </script>

后端: get_cate_menu_data:

后端数组带title 和children 字段 ，没有就起个别名。title 是名字，children 是子节点。 参考：https://www.layui.com/doc/modules/tree.html

public function get_cate_menu_data(){ $res = D('StoreCate') ->field('id,cate_name as title,parent_id ,remark , spread') ->select(); $tmpArr = generateTree($res); // dump($tmpArr);exit; return $this->ajaxReturn($tmpArr); } /**此方法写在公共文件中 * 多层分类树状图 * @param $list 原始数组 * @param string $pk 当前分类id * @param string $pid 父类id * @param string $child 子类键名 * @param int $root 顶级分类 * @return array 多级结构数组 */ function generateTree($list, $pk = 'id', $pid = 'parent_id', $child = 'children', $root = 0) { $tree = array(); $packData = array(); foreach ($list as $data) { $packData[$data[$pk]] = $data; } foreach ($packData as $key => $val) { if ($val[$pid] == $root) { $tree[] = &$packData[$key]; } else { $packData[$val[$pid]][$child][] = &$packData[$key]; } } return $tree; }