<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版权协议,转载请附上原文出处链接和本声明。