效果展示
layuiadmiu单页和ifram框架请参考下方链接
#数据表设计
用parent_id来控制上下级关系,如果是父级id那就是0就可以
#控制器
需要自己usemodel自己定义 ,这我写的是模板渲染,然后自己可以根据自己的适用场景来做ajax等
public function getserver() { $param = input(); $game = new G(); $cateres=$game->catetree($param); $this->assign('cateres',json_encode($cateres,JSON_UNESCAPED_UNICODE)); return $this->fetch(); }
#model层
/** * @description: 创建树 * @Date: 2022-10-28 10:54:27 * @Author: MoSheng */public function catetree($param) { $arr=Game::where('id',$param['id'])->field('name as title,parent_id,id')->find()->toarray(); $son = Game::where('parent_id',$arr['id'])->field('name as title,parent_id,id')->select()->toarray(); //1 $arr['children'] = $this->getTree($son); $list[] = $arr; return $list; }
这里传参是传的父级参数,然后根据参数查询到了自己的儿子 下面的是递归函数
function getTree(array $items) { $all = Game::where('parent_id','neq',0)->field('name as title,parent_id,id')->select()->toarray(); // halt($all); function getChildren($all,$pid){ $list = []; for ($i=count($all)-1; $i >= 0 ; $i--) { $v = $all[$i]; if($v['parent_id']==$pid){ // unset($all[$i]); $v['children'] = getChildren($all,$v['id']); $list[] = $v; } } return $list; } foreach ($items as &$item) { $item = (array)$item; $item['spread'] = true; //用于设置Layui树状组件节点展开,可忽略 $item['children'] = getChildren($all,$item['id']); } return $items; }
#view层
首先你得userlayui 的tree 然后定义 tree和data
下面就附上 这个新增和删除修改的一些ajax的操作
后台一些ajax操作根据自己的实际操作去写就行了,这里就不放代码了
tree.render({ elem: '#test-tree-demo8' ,data: data ,edit: ['add','update','del'] //操作节点的图标 ,accordion: true ,onlyIconControl: true ,operate: function (obj) { var type = obj.type; //得到操作类型:add、edit、del var data = obj.data; //得到当前节点的数据 var elem = obj.elem; //得到当前节点元素 //Ajax 操作 var id = data.id; //得到节点索引 window.id = id; if (type === 'add') { //增加节点 $.ajax({ "url": "addserver", "type": "post", "data": { "pid": window.id, }, "success": function (res) { if(res.code==1){ layer.msg(res.msg) }else{ layer.msg(res.msg) } }, "error": function () { } }) } if (type === 'update') { var title = elem.find('.layui-tree-txt').html();//得到修改后的内容 $.ajax({ "url": "updateserver", "type": "post", "data": { "pid": window.id, "name": title, }, "success": function (res) { if(res.code==1){ layer.msg(res.msg) }else{ layer.msg(res.msg) } }, "error": function () { } }) } if (type === 'del') { $.ajax({ "url": "deleteserver", "type": "post", "data": { "pid": window.id, }, "success": function (res) { if(res.code==1){ layer.msg(res.msg) }else{ layer.msg(res.msg) } }, "error": function () { } }) } }, });
我们是独立的个体,却不是孤独的存在。