标签搜索
搜索到
2
篇与
的结果
-
layui之树形组件使用 下载：https://gitee.com/kevin402502/layui-authtree演示：http://authtree.wj2015.com/教程：https://blog.csdn.net/weixin_37933545/article/details/101037358 《layui 扩展 authtree 无限级权限控制树》为前端页面引入layui树形组件第一步：为权限树提供容器注意：id="LAY-auth-tree-index" 是整颗树的容器，需要包含在 form.layui-form > div.layui-form-item > div.layui-input-block 中，否则依照 layui 的规则无法渲染多选框添加代码： <div class="layui-form-item"> <label class="layui-form-label">选择权限</label> <div class="layui-input-block"> <div id="LAY-auth-tree-index"></div> </div> </div>例子：<form class="layui-form"> <div class="layui-form-item"> <label class="layui-form-label">角色名称</label> <div class="layui-input-block"> <input class="layui-input" type="text" name="name" placeholder="请输入角色名称" /> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">选择权限</label> <div class="layui-input-block"> <div id="LAY-auth-tree-index"></div> </div> </div> <div class="layui-form-item"> <div class="layui-input-block"> <button class="layui-btn" type="submit" lay-submit lay-filter="LAY-auth-tree-submit">提交</button> <button class="layui-btn layui-btn-primary" type="reset">重置</button> </div> </div> </form>第二步：下载源码并引入插件如果使用 layuiadmin,则只需要将插件(extends/authtree.js)放到 controller/下,然后 layui.use 即可,或者可以放在 lib/extend 中,只不过需要改 config.js非 layuiadmin 初始化如下：layui.config({ base: 'extends/', }).extend({ authtree: 'authtree', });第三步：异步获取权限数据并渲染render 传递的第一个参数，即为树的目标容器，这也是以后操作这颗树的重要标志listConvert 是 authtree 提供的内置函数，可以将普通的列表数据转换为 权限树需要的数据结构，如有此需求请查看该函数对应文档layui.use(['authtree', 'form', 'layer'], function(){ var $ = layui.$; var authtree = layui.authtree; var form = layui.form; var layer = layui.layer; // 一般来说，权限数据是异步传递过来的 $.ajax({ url: 'tree.json', dataType: 'json', success: function(res){ let trees = authtree.listConvert(res.data.list, { primaryKey: 'id' ,startPid: 0 ,parentKey: 'pid' ,nameKey: 'name' ,valueKey: 'id' ,checkedKey: res.data.checkedId ,disabledKey: res.data.disabledId }); // 如果后台返回的不是树结构，请使用 authtree.listConvert 转换 authtree.render('#LAY-auth-tree-index', trees, { layfilter: 'lay-check-auth', autowidth: true, }); } //监听提交 form.on('submit(saveBtn)', function (data) { let field = data.field field['menu_id'] = authtree.getChecked('#LAY-auth-tree-index') $.post('save',field,res => { if (res.status == 0) return layer.msg(res.msg) }) return false; }); });php后台无限分类的三种方式来自--https://blog.csdn.net/u012442504/article/details/107924836/** * @Description: 无限极分类一 * @Author: Yang * @param $data 数据库数据 * @param int $parent_id 父级ID * @return array */ function getTree1($data, $parent_id = 0) { $tree = array(); foreach ($data as $k => $v) { if ($v["parent_id"] == $parent_id) { unset($data[$k]); if (!empty($data)) { $children = getTree1($data, $v["id"]); if (!empty($children)) { $v["_child"] = $children; } } $tree[] = $v; } } return $tree; } /** * @Description: 无限极分类二 * @Author: Yang * @param $data 数据库数据 * @param int $parent_id 父级ID * @param int $level 等级 * @return array */ function getTree2($data, $parent_id = 0, $level = 0) { static $tree = array(); foreach ($data as $k => $v) { if ($v["parent_id"] == $parent_id) { $v["level"] = $level; $tree[] = $v; getTree2($data, $v["id"], $level + 1); } } return $tree; } /** * @Description: 无限分类三：面包屑导航 * @Author: Yang * @param $data 数据库数据 * @param $id 分类ID * @return array */ function getCrumbsBar($data, $id) { static $tree = array(); foreach ($data as $k => $v) { if ($v["id"] == $id) { getCrumbsBar($data, $v["parent_id"]); $tree[] = $v; } } return $tree; }附件：https://blog.csdn.net/weixin_43345943/article/details/97485813 《layui后台管理系统 - 权限树表格》https://blog.csdn.net/weixin_37933545/article/details/101037358 《layui 扩展 authtree 无限级权限控制树》https://blog.csdn.net/u012442504/article/details/107924836 《php后台无限分类的三种方式》 -
