layui 树形菜单展示

ゝ一纸荒年。 2023-02-22 07:52 19阅读 0赞

<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][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;
    }

[https_www.layui.com_doc_modules_tree.html]: https://www.layui.com/doc/modules/tree.html