精华内容
下载资源
问答
  • Layui 权限菜单遍历

    2021-06-24 09:33:48
    贴一个layui权限菜单遍历代码,对你有用吗! <ul class="layui-nav layui-nav-tree" lay-shrink="all" id="LAY-system-side-menu" lay-filter="layadmin-system-side-menu"> </ul> $.ajax({ url: ...

    贴一个layui权限菜单树遍历代码,对你有用吗!

    <ul class="layui-nav layui-nav-tree" lay-shrink="all" id="LAY-system-side-menu" lay-filter="layadmin-system-side-menu">
    </ul>
    
    $.ajax({
                        url: cms_admin_get_by_id ,
                        type: "Get",
                        content: "application/x-www-form-urlencoded;charset=utf-8",
                        data: {'id':userId},
                        success: function (res) {
                            if (res.code === 0) {
                                window.localStorage.setItem('region', res.data.region);
                                $("#account").html(res.data.name);
                                var data = res.data.menuPermission;
                                var ul = '';
                                var li = '';
                                var dl = '';
                                var dd = '';
                                for (var i = 0; i < data.length; i++) {
                                    if (data[i].parentId == 0) {
                                        li = "<li data-name='" + data[i].menuName + "' class='layui-nav-item'>" +
                                            "                            <a href='javascript:;' lay-tips='" + data[i].menuName + "' lay-direction='2'>" +
                                            "                            <i class='layui-icon layui-icon-home'></i>" +
                                            "                            <cite>" + data[i].menuName + "</cite>" +
                                            "                            </a>";
                                        // $("#LAY-system-side-menu").html();
                                        for (var j = 0; j < data[i].children.length; j++) {
                                            if (data[i].children[j].parentId === data[i].id) {
                                                dl = "<dl class='layui-nav-child'>";
                                                dd += "<dd>" +
                                                    "                            <a lay-href='" + data[i].children[j].menuPath + "'>" + data[i].children[j].menuName + "</a>" +
                                                    "                            </dd>"
                                            }
                                        }
                                        if (dl != "" && dl != null) {
                                            li += dl;
                                            if (dd != "" && dd != null) {
                                                li += dd;
                                            }
                                            li += "</dl>";
                                        }
                                        if (li != '' && li != null) {
                                            li += "</li>";
                                            ul += li;
                                            li = '';
                                            dl = '';
                                            dd = '';
                                        }
                                    }
                                    $("#LAY-system-side-menu").html(ul);
                                    layui.use('element', function () {
                                        var element = layui.element;
                                        var layFilter = $("#LAY-system-side-menu").attr('lay-filter');
                                        element.render('nav', layFilter);
                                    })
                                }
                            }else if (res.code === 1003){
                                loginInvalid();
                            }
                        }
                    });
    
    展开全文
  • layui自身提供一个tree形菜单,但是并不适用于权限控制中,比如:选择用户组的权限形结构),需要使用form表单提交用户所选权限数据。
  • 从零开始layui树,authtree权限树

    千次阅读 2019-04-23 13:44:46
    本文主要解决layui树,authtree权限树使用表格直接转化json数据生成权限树; 内容主要参考:《authtree插件github网址》 主要在使用表格直接转化json数据生成权限树添加自己理解的注释和使用结果,干货在解析表格...

     

    本文主要解决layui树,authtree权限树使用表格直接转化json数据生成权限树;

    内容主要参考:《authtree插件github网址》  主要在使用表格直接转化json数据生成权限树添加自己理解的注释和使用结果,干货在解析表格转化json注释中,有利于理解;核心还是官网中的内容

    第一步:为权限树提供容器

    注意:id="LAY-auth-tree-index" 是整颗树的容器,需要包含在 form.layui-form > div.layui-form-item > div.layui-input-block 中,否则依照 layui 的规则无法渲染多选框
    <form class="layui-form">
        <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>

    第二步:下载源码并引入插件   下载

    1、如果使用 layuiadmin,则只需要将插件(extends/authtree.js)放到 controller/下,然后 layui.use 即可,或者可以放在 lib/extend 中,只不过需要改 config.js

    2、非 layuiadmin 初始化如下:

    layui.config({
    	base: 'extends/',//你存放authtree.js文件的位置
    }).extend({
    	authtree: 'authtree',
    });

    第三步:异步获取权限数据并渲染

    render 传递的第一个参数,即为树的目标容器,这也是以后操作这颗树的重要标志

    listConvert 是 authtree 提供的内置函数,可以将普通的列表数据转换为 权限树需要的数据结构,如有此需求请查看该函数对应文档

     

    layui.use(['jquery', 'authtree', 'form', 'layer'], function(){
    	var $ = layui.jquery;
    	var authtree = layui.authtree;
    	var form = layui.form;
    	var layer = layui.layer;
    	// 一般来说,权限数据是异步传递过来的
    	$.ajax({
    		url: 'tree.json',
    		dataType: 'json',
    		success: function(data){
                var trees = data.data.trees;
                // 如果后台返回的不是树结构,请使用 authtree.listConvert 转换
                authtree.render('#LAY-auth-tree-index', trees, {
    				inputname: 'authids[]', 
    				layfilter: 'lay-check-auth', 
    				autowidth: true,
    			});
            }
        });
    });

     

    至此,一个最基础的权限树就已经完成了,、

    但是其中 tree.json 结构为

     

     

    非常不方便。

    当json数据是直接从表格转化而来时,可采取

     

    html:

    <form class="layui-form" action="">
                <div class="layui-form-item">
                    <div class="layui-form-item" style="height:700px;">
                        <label class="layui-form-label">选择权限</label>
                        <div class="layui-input-block">
                            <div id="LAY-auth-tree-convert-index"></div>
                        </div>
                    </div>
    
                </div>
            </form>

    注意到<div id="LAY-auth-tree-convert-index"></div>中权限树的id改变,其他都与前面一样,id保持与前面相同也可以,后面js中id一致就好,不要弄混

    使用前需要引用:

    layui.use(['jquery', 'authtree', 'form', 'layer', 'code' ], function () {})

    1、当json数据为

    {
      "code": 0,
      "msg": "获取成功",
      "data": {
        "list": [
          { "id": 1, "name": "用户管理", "pid": 0 },
          { "id": 2, "name": "用户组管理", "pid": 0 },
          { "id": 3, "name": "角色管理", "pid": 2 },
          { "id": 4, "name": "添加角色", "pid":  3},
          { "id": 5, "name": "角色列表", "pid": 3 },
          { "id": 6, "name": "管理员管理", "pid": 0 },
          { "id": 7, "name": "添加管理员", "pid": 6 },
          { "id": 8, "name": "管理员列表", "pid": 6 }
        ],
        "checkedId": [ 1,  2, 3, 4 ],
        "disabledId": [ 7, 8 ]
      }
    }

     

    js解析可用:

    $.ajax({
    	url: url,
    	dataType: 'json',
    	success: function(res){
    		// 支持自定义递归字段、数组权限判断等
    		// 深坑注意:如果API返回的数据是字符串,那么 startPid 的数据类型也需要是字符串
    		var trees = authtree.listConvert(res.data.list, {
                      primaryKey: 'id' //标志,名字根据json可改
    		    ,startPid: 0  //起始id(根节点),根据json填写
    		    ,parentKey: 'pid' //父节点id,名字根据json可改
    		    ,nameKey: 'name' //名称,名字根据json可改
    		    ,valueKey: 'id' //value值,名字根据json可改
                    ,checkedKey: res.data.checkedId//控制是否选中,checkedId是json中的数据
                    ,disabledKey: res.data.disabledId//控制是否可以获得,disabledId是json中的数据
    		});
    		layui.code({
    		});
    		// 如果页面中多个树共存,需要注意 layfilter 需要不一样
    		authtree.render('#LAY-auth-tree-convert-index', trees, {//权限树的id
    			inputname: 'authids[]',//监听权限树改变,获取节点信息使用
    			layfilter: 'lay-check-convert-auth',//监听权限树时使用
    			openall: true,//展开所有节点
    			autowidth: true,
    		});
    	},
    });

    效果为:

     

    2、当json数据为(与上面相同只是改了字段名字)

    json:

    {
      "code": 0,
      "msg": "获取成功",
      "data": {
        "list": [
          { "id": 1, "name": "用户管理", "alias": "yhgl", "palias": "0" },
          { "id": 2, "name": "用户组管理", "alias": "yhzgl", "palias": "0" },
          { "id": 3, "name": "角色管理", "alias": "yhzgl-jsgl", "palias": "yhzgl" },
          { "id": 4, "name": "添加角色", "alias": "yhzgl-jsgl-tjjs", "palias": "yhzgl-jsgl" },
          { "id": 5, "name": "角色列表", "alias": "yhzgl-jsgl-jslb", "palias": "yhzgl-jsgl" },
          { "id": 6, "name": "管理员管理", "alias": "glygl", "palias": "0" },
          { "id": 7, "name": "添加管理员", "alias": "glygl-tjgly", "palias": "glygl" },
          { "id": 8, "name": "管理员列表", "alias": "glygl-glylb", "palias": "glygl" }
        ],
        "checkedAlias": [ "yhgl",  "yhzgl", "yhzgl-jsgl", "yhzgl-jsgl-tjjs" ],
        "disabledAlias": [ "glygl-tjgly",  "glygl-glylb" ]
      }
    }

     

    js解析:

    $.ajax({
    	url: url,
    	dataType: 'json',
    	success: function(res){
    		// 支持自定义递归字段、数组权限判断等
    		// 深坑注意:如果API返回的数据是字符串,那么 startPid 的数据类型也需要是字符串
    		var trees = authtree.listConvert(res.data.list, {
    			primaryKey: 'alias'
    			,startPid: '0'
    			,parentKey: 'palias'
    			,nameKey: 'name'
    			,valueKey: 'alias'
    			,checkedKey: res.data.checkedAlias//控制是否选中,checkedAlias是json中的数据
    			,disabledKey: res.data.disabledAlias//控制是否可以获得,disabledAlias是json中的数据
    		});
    		layui.code({
    		});
    		// 如果页面中多个树共存,需要注意 layfilter 需要不一样
    		authtree.render('#LAY-auth-tree-convert-index', trees, {
    			inputname: 'authids[]',
    			layfilter: 'lay-check-convert-auth',
    			// openall: true,
    			autowidth: true,
    		});
    	},
    	error: function(xml, errstr, err) {
    		layer.alert(errstr+',获取样例数据失败,请检查是否部署在本地服务器中!');
    	}
    });

     效果与上相同:

     

     

    展开全文
  • layui实现菜单

    2020-04-15 20:33:19
    layui实现菜单 页面HTML <div class="layui-fluid"> <div class="layui-card"> <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;"> <lege...

    layui实现树菜单

    页面HTML

    <div class="layui-fluid">
    
        <div class="layui-card">
            <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
                <legend>设置角色菜单按钮</legend>
            </fieldset>
            <div class="layui-btn-container">
                <button type="button" class="layui-btn layui-btn-sm" lay-demo="getChecked">设置权限</button>
                <button type="button" class="layui-btn layui-btn-sm" lay-demo="setChecked">重置</button>
                <button type="button" class="layui-btn layui-btn-sm" lay-demo="reload">清空勾选</button>
            </div>
            <div id="test12" class="demo-tree-more"></div>
        </div>
    </div>
    

    js

    		var treeData = new Array(); //树数据
            var dataIntArr = [];//保存转换后的整型字符串
            $.ajax({
                type: "post",
                url: "/",
                datatype: "json",
                data: {
                    id: id
                }
                , success: function (succ) {
                    if (succ.code == "1") {
                     	//把所有菜单的数据设置给treeData
                        treeData = succ.data.treeData;
                        //拿到用户拥有的菜单
                        var checkStr = succ.data.checkData;
                        if (checkStr == "" || checkStr == undefined || checkStr == null ||
                            (checkStr.length > 0 && checkStr.trim().length == 0)) {
                        } else {
                            var dataStrArr = checkStr.split(",");  //分割成字符串数组
                            dataIntArr = dataStrArr.map(function (i) {
                                return Number(i)
                            });
                        }
                        //渲染页面dom
                        tree.render({
                            elem: '#test12'
                            , data: treeData //整个菜单树数据
                            , showCheckbox: true  //是否显示复选框
                            , id: 'demoId1'  //设置id
                            , isJump: false //是否允许点击节点时弹出新窗口跳转
                        });
                        //设置用户有的菜单选项
                        tree.setChecked('demoId1', dataIntArr);
                    } else if (succ.code == "0") {
                        layer.msg(succ.msg);
                    }
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    layer.msg('服务器响应超时,请刷新后重试...');
                    layer.close(index);
                }
            });
            
            // 页面按钮事件
            util.event('lay-demo', {
                 //设置权限
                getChecked: function (othis) {
                    var checkedData = tree.getChecked('demoId1'); //获取选中节点的数据
                    $.ajax({
                        type: "post",
                        url: "/",
                        data: {
                            json: JSON.stringify(checkedData),
                            id: id
                        },
                        dataType: 'json',
                        success: function (succ) {
                            if (succ.code == "1") {
                                layer.msg(succ.msg);
    
                            } else if (succ.code == "0") {
                                layer.msg(succ.msg);
                            }
                        },
                        error: function (XMLHttpRequest, textStatus, errorThrown) {
                            layer.msg('服务器响应超时,请刷新后重试...');
                            layer.close(index);
                        }
                    });
                }
                //重置
                , setChecked: function () {
                    console.log(dataIntArr);
                    tree.setChecked('demoId1', dataIntArr); //勾选指定节点
                }
                //清空勾选
                , reload: function () {
                    //重载实例
                    tree.reload('demoId1', {});
    
                }
            });
    
    展开全文
  • $('#LAY-auth-tree-index input[type="checkbox"]').prop('disabled',true) 用disabled这个属性在此起不了作用,但是需求提出要有禁止功能,于是想出给div添加 ...$('#LAY-auth-tree-index').css('pointer-events','...
    $('#LAY-auth-tree-index input[type="checkbox"]').prop('disabled',true)
    

    用disabled这个属性在此起不了作用,但是需求提出要有禁止功能,于是想出给div添加
    pointer-events:none禁止点击属性

    $('#LAY-auth-tree-index').css('pointer-events','none')
    

    虽然颜色没有发生变化,但是禁止功能是可以了,目前想到的解决办法就这个了。

    展开全文
  • 基于layui自定义形组件

    千次阅读 2019-12-10 15:58:43
    基于layui自定义形组件文档 - layui.sw365tree 简介:针对于自己的需求所自定义的形组件 模块加载名称:sw365tree 1· 快速使用 var tree = layui.sw365tree; 通过 tree.render() 方法指定一个元素,便可快速...
  • Layui 挺久了,觉得Layui 界面美观 , 实用。最近闲着使用spring boot layui想写个系统 就用上了。 效果图如下 为此我专门为这么技术出了个网课 链接地址...
  • layui-形控件

    千次阅读 2019-04-09 16:17:41
    需求:点击左边菜单,右边表格内容跟着... ... 2、JS: layui.use(['form', 'layer', 'table', 'tree', 'laydate', 'laypage', 'element'], function() { $(window).resize(function() { //右边展示数据的表格 ...
  • 关于layui形表格回显

    千次阅读 2019-08-06 18:08:25
    关于layui默认的tree再回显时会进行级联勾选,这是个bug,已有人在社区发表讨论与建议了。目前个人采用的解决办法:是在后台判断当前角色拥有的子级id进行...// layui 菜单权限 start /** * layui 的tree 方式...
  • layui后台管理系统 - 权限树右侧菜单

    千次阅读 2019-07-27 09:10:58
    layui后台管理系统 - 权限树 最近一直在使用layui做后台管理系统,但遇到一些bug,特此记录踩坑记录 1. 关于权限树,先上截图: 2.实现代码: 后端: service @Override public List<TreeMenu> ...
  • layui后台管理系统 - 权限树表格

    千次阅读 2019-07-27 09:23:03
    layui后台管理系统 - 权限树表格 先上截图: 采用的是layui -tree 插件 : 演示地址:https://whvse.gitee.io/treetable-lay/ 项目地址: https://gitee.com/whvse/treetable-lay 后端: @GetMapping("/permission...
  • //数据表的父级id elem: '#munu-table', url: '/menu/getMenu', page: false, cols: [ [ {type: 'numbers'}, {field: 'authorityName', minWidth: 200, title: '权限名称'}, {field: 'authority', title: '权限标识'...
  • SpringBoot+Shiro+LayUI权限管理系统项目-1.项目介绍

    千次阅读 多人点赞 2021-04-13 23:33:09
    此处以组织机构形式动态扩展。 角色管理 包括角色信息的增删改查、权限授予、取消操作。 权限管理 包括权限信息的增删改查操作,权限类型有3种:目录、菜单和按钮。也就是说本系统可以控制到按钮级别的权限。 用户...
  • LayUI—tree形结构的使用

    万次阅读 多人点赞 2019-09-01 21:46:46
    形结构在实际开发中很长用到,比如部门管理,权限菜单等。因为用形结构来展示会显的很清晰明了。最近写了一个个人博客小项目中用到了LayUI形结构,之后写了一个小案例整理一下。 官网地址:...
  • layui-tree形模板

    2019-05-30 11:46:40
    layui-tree是layui提供的形管理,可以用于后台做权限列表的使用,只需要后台整理好数据给前台展示,勾选之后提交给后台即可。
  • 这个系统主要实现了权限管理的功能,通过PathMatchingFilter这个类实现了url的鉴权(控制到按钮级别哦(*^▽^*)),同时还包括了ehcache的用法,layui树形表格,formSelects的用法等多个前台后台的知识点,csdn已经...
  • 新的项目需求是要做一个菜单权限的界面--弹框界面,界面里面是形表格,然后表格要有checkbox去控制菜单的添加、删除。可修改菜单名字。百度查了一下,layui有拓展的组件treetable,要下载js。但是我下载的treetable...
  • 感谢layui社区,及无限极权限控制的作者。 首先下载authtree.js,为了你能正确使用该模块,建议放在extends文件夹下(没有就创建一个),该文件夹与layui同级,为了方便你的使用,第三方组件都可放在里面 配置该...
  • layui 弹框加载

    千次阅读 2019-04-23 11:10:50
    * 角色权限树 */ @ResponseBody @GetMapping("/authTree") public List, Object>> authTree(Integer roleId) { List<Authorities> roleAuths = authoritiesService.listByRoleId(roleId); List<Authorities> ...
  • 要实现的效果 : ... 是选中状态(在角色修改权限的时候用到) disabledId => 是不可选中的状态 { "code": 0, "msg": "获取成功", "data": { "list": [ { "id": 1, "name": "用户管理", "pid":.
  • layUI展示树状treetable形表格完整代码

    万次阅读 多人点赞 2018-10-23 10:01:33
    前言:因项目功能需要,在shiro权限管理模块中需要使用树状展示,前端使用的layUI框架,在官网的开发文档上没有找到树状表格的内容。只有树状菜单的文档:https://www.layui.com/doc/modules/tree.html 树状表格...
  • layui 动态加载数据

    千次阅读 2020-07-13 15:57:14
    效果图: 前端样式代码: <div > <div id="trees" class="demo-tree demo-tree-box">... base: '/static/layui-v2.5.6/ext/',// 第三方模块所在目录 version: 'v1.5.10' // 插件版本号 }).extend({
  • layui树形组件获取选中id

    千次阅读 2020-08-06 14:44:50
    编写权限分配用到的 layui树形组件 官方文档https://www.layui.com/doc/modules/tree.html //基本演示 tree.render({ elem: '#test12' ,data: data //具体data格式看官方文档 ,showCheckbox: true //是否显示复...
  • layui扩展的形表格treetable

    千次阅读 2019-09-30 15:21:34
    开发时,遇到类似这样的需求 要求做成这样的形表格。...layui.config({ base: '/js/' //直接在项目中引用 }).extend({ treetable: 'treetable/treetable', ztree: 'ztree/ztree-object'...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 519
精华内容 207
关键字:

layui权限树