精华内容
下载资源
问答
  • 2019-07-23 17:05:29
    $('#LAY-auth-tree-index input[type="checkbox"]').prop('disabled',true)
    

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

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

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

    更多相关内容
  • layui自身提供一个tree形菜单,但是并不适用于权限控制中,比如:选择用户组的权限形结构),需要使用form表单提交用户所选权限数据。
  • 要实现的效果 : ... 是选中状态(在角色修改权限的时候用到) disabledId => 是不可选中的状态 { "code": 0, "msg": "获取成功", "data": { "list": [ { "id": 1, "name": "用户管理", "pid":.

    要实现的效果 :

    执行:
    一:下载 authtree.js 官网
    二:把 authtree.js 放在 layuiadmin 文件下面
    三:代码

    主要的是接口的返回数据规则
    其中: checkedId => 是选中状态(在角色修改权限的时候用到)
    disabledId => 是不可选中的状态

    {
      "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 ]
      }
    }
    

     (1.) 添加时 => html 代码段

        <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>
    

    js代码

    <script>
        layui.config({
            base: '/static/layuiadmin/',//你存放authtree.js文件的位置
        }).extend({
            authtree: 'authtree',
        });
        layui.use(['jquery', 'authtree', 'code' ], function(){
            var $ = layui.jquery;
            var authtree = layui.authtree;
            $.ajax({
                url: '/admin/role/findaccess',
                dataType: 'json',
                success: function(res){
                    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中的数据
                    });
                    // 如果页面中多个树共存,需要注意 layfilter 需要不一样
                    authtree.render('#LAY-auth-tree-convert-index', trees, {
                        inputname: 'authids[]',
                        layfilter: 'lay-check-convert-auth',
                        openall: false,
                        autowidth: true,
                    });
                },
            });
        });
    </script>
    

     (2.)修改时遇到的问题 => 需要获取 form 表单角色的信息,jq 代码如下:

    <script>
        layui.config({
            base: '/static/layuiadmin/',//你存放authtree.js文件的位置
        }).extend({
            authtree: 'authtree',
        });
        layui.use(['jquery', 'authtree', 'code' ], function(){
            var $ = layui.jquery;
            var authtree = layui.authtree;
            //获取表单信息,最主要是获取角色的 id ,在后台进行判断它的权限有哪些
            var d = {};
            var t = $('#recordListSearchForm [name]').serializeArray();
            $.each(t, function() {
                d[this.name] = this.value;
            });
            data = JSON.stringify(d);
            $.post('/admin/role/update_findaccess', {'data': data}, function (res) {
                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中的数据
                });
                // 如果页面中多个树共存,需要注意 layfilter 需要不一样
                authtree.render('#LAY-auth-tree-convert-index', trees, {
                    inputname: 'authids[]',
                    layfilter: 'lay-check-convert-auth',
                    openall: false,
                    autowidth: true,
                })
            })
        })
    </script>
    

     

     

    展开全文
  • 从零开始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-tree形模板

    2019-05-30 11:46:40
    layui-tree是layui提供的形管理,可以用于后台做权限列表的使用,只需要后台整理好数据给前台展示,勾选之后提交给后台即可。
  • layui菜单页面,用火狐浏览器打开index.html可以查看演示,非常好用的
  • 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树状图完成权限管理

    千次阅读 2019-07-27 11:17:54
    开发工具与关键技术:Visual Studio 2015 layui 作者:孙水兵 撰写时间:2019年7月27 一、 达到的效果 根据不同的用户类型显示出不同的菜单栏。右边的是超级管理员的菜单栏显示,左边是售票员的菜单栏显示。 二、 ...
  • Layui树形列表,Layui树形菜单列表

    千次阅读 2021-10-06 19:16:18
    Layui树形列表 比较简单请耐心查看 效果图 实现方式 首先引入组件(代码放到最后面了) layui.config({ base: $projectPath+"/js/util/layui-module/" }).extend({ treeSelect: "treeSelect", treeTable: ...
  • layui后台管理系统 - 权限树表格

    千次阅读 2019-07-27 09:23:03
    layui后台管理系统 - 权限树表格 先上截图: 采用的是layui -tree 插件 : 演示地址:https://whvse.gitee.io/treetable-lay/ 项目地址: https://gitee.com/whvse/treetable-lay 后端: @GetMapping("/permission...
  • Layui 挺久了,觉得Layui 界面美观 , 实用。最近闲着使用spring boot layui想写个系统 就用上了。 效果图如下 为此我专门为这么技术出了个网课 链接地址...
  • 通过读取代码注释的方式控制权限,实现后台最细化的权限管理,这是一种思路,读取代码注释的方式也可以用在别的地方,可以有效的简化各种复杂的定义,资源里面附带了表
  • 基于layui自定义形组件

    千次阅读 2019-12-10 15:58:43
    基于layui自定义形组件文档 - layui.sw365tree 简介:针对于自己的需求所自定义的形组件 模块加载名称:sw365tree 1· 快速使用 var tree = layui.sw365tree; 通过 tree.render() 方法指定一个元素,便可快速...
  • 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...
  • ThinkPHP6+layui权限管理)纯净后台管理 不想二开别人的代码,自己照葫芦画瓢开发一套完整的后台管理系统,无偿开源,有任何问题欢迎及时联系本人, 预览地址:http://admin.laopifu.top/master 代码地址:...
  • SpringBoot+Shiro+LayUI权限管理系统项目-1.项目介绍

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

    千次阅读 2019-04-09 16:17:41
    需求:点击左边菜单,右边表格内容跟着... ... 2、JS: layui.use(['form', 'layer', 'table', 'tree', 'laydate', 'laypage', 'element'], function() { $(window).resize(function() { //右边展示数据的表格 ...
  • layui后台管理系统 - 权限树右侧菜单

    千次阅读 2019-07-27 09:10:58
    layui后台管理系统 - 权限树 最近一直在使用layui做后台管理系统,但遇到一些bug,特此记录踩坑记录 1. 关于权限树,先上截图: 2.实现代码: 后端: service @Override public List<TreeMenu> ...
  • } /** * 获取数据库权限树 * @return */ @RequestMapping("/tree") public String treeString(@Param("roleId") Integer roleId) { return permissionService.getPermissionTreeString(roleId); } } 6.编写tree页面...
  • 基于Layui实现的形菜单页面

    千次阅读 2021-03-19 10:25:10
    基于Layui实现的形菜单页面具体方法实现方法一:针对Layui模板的前后端统一更新1. 删除2. 添加3. 后端方法二:基于Dtree实现的纯前端形增删改文中的组件地址 具体方法实现 实现形菜单,本文将给出两种实现方式...
  • layui实现Tree组件前后端交互

    千次阅读 2020-07-03 03:40:46
    文章目录前言运行效果Tree组件1.Tree组件的加载方式1.1选项卡2.Tree组件的渲染格式3....关于组件的话,layui官方提供的文档资料不太全面,本篇将分享Tree组件与后台交互实现动态加载数据。 运行效果 Tree组件 1
  • Layui实现TreeTable(形数据表格)

    千次阅读 2021-10-21 17:51:41
    Layui实现TreeTable(形数据表格) LayUI树形表格treetable使用详解 gitee:ele-admin / treetable-lay 开发背景 在开源项目看到layui-treetable实现的菜单配置,页面简洁,手上刚好又有个菜单页面可以进行优化(整...
  • 新的项目需求是要做一个菜单权限的界面--弹框界面,界面里面是形表格,然后表格要有checkbox去控制菜单的添加、删除。可修改菜单名字。百度查了一下,layui有拓展的组件treetable,要下载js。但是我下载的treetable...
  • 是一款基于Golang、GoFrame、Layui、MySQL等技术栈开发平台框架,拥有完善的(RBAC)权限架构和基础核心管理模块,为了缩短研发周期,系统框架集成了代码生成器,内置平台自定义研发的模板引擎,可以一键CRUD生成整个...
  • 关于layui形表格回显

    千次阅读 2019-08-06 18:08:25
    关于layui默认的tree再回显时会进行级联勾选,这是个bug,已有人在社区发表讨论与建议了。目前个人采用的解决办法:是在后台判断当前角色拥有的子级id进行...// layui 菜单权限 start /** * layui 的tree 方式...
  • layui树形表格支持非异步和异步加载。使用示例如下:展开全部展开一层折叠全部折叠一层layui.config({base: '/uui/treetable-lay/module/'}).extend({treetable: 'treetable-lay/treetable'}).use(['treetable'], ...
  • 在上一篇文章中主要简单说明了如何使用springboot与shiro进行整合,同时简单的说明了下shiro相关核心模块,当然关于shiro的说明其实...由于很久没了解前端的知识了,上篇也说的,这次将使用layui来搭建整个系统,里面会

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,294
精华内容 517
关键字:

layui权限树