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

版权声明:本文为weixin_42433970原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。