首页
关于
文章打赏记录
搜索
1
小记一次本站从EM转移到Typecho
196 阅读
2
欢迎使用 Typecho
147 阅读
3
HTML5+Ajax上传文件
110 阅读
4
layui之树形组件使用
102 阅读
5
vue路由跳转的四种方式
95 阅读
诗于远方
学无止境
物尽其用
闲言碎语
登录
搜索
标签搜索
vue
小群
累计撰写
6
篇文章
累计收到
2
条评论
首页
栏目
诗于远方
学无止境
物尽其用
闲言碎语
页面
关于
文章打赏记录
搜索到
2
篇与
的结果
2022-02-06
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后台无限分类的三种方式》
2022年02月06日
102 阅读
0 评论
0 点赞
2021-10-25
欢迎使用 Typecho
如果您看到这篇文章,表示您的 blog 已经安装成功.
2021年10月25日
147 阅读
1 评论
0 点赞