精华内容
下载资源
问答
  • layui树形权限
    2020-12-19 14:05:26

    layui树形表格支持非异步和异步加载。

    使用示例如下:

    展开全部

    展开一层

    折叠全部

    折叠一层

    layui.config({

    base: '/uui/treetable-lay/module/'

    }).extend({

    treetable: 'treetable-lay/treetable'

    }).use(['treetable'], function () {

    var treetable = layui.treetable;

    treetable.render({

    treeColIndex: 1,

    treeSpid: 0,

    treeIdKey: 'code',

    treePidKey: 'pcode',

    treeIsLeafKey: 'isleaf',

    treeDefaultClose: false,

    treeLinkage: false,

    treeNodeAsync: true,

    elem: '#list',

    toolbar: '#toolbarList',

    url: '/admin/regions',

    method: 'post',

    parseData: parseData,

    cols: [[

    {field: 'id', title: 'ID', width:80}

    ,{field: 'name', title: '名称', width: 288}

    ,{field: 'code', title: '编码', width:168}

    ,{field: 'abbr', title: '简称', width: 100}

    ,{field: 'created_at', title: '添加时间'}

    ]]

    });

    treetable.on('toolbar(list)', function(obj){

    if(obj.event == 'expandOne'){

    treetable.expandOne('#list');

    } else if(obj.event == 'expandAll'){

    treetable.expandAll('#list');

    } else if(obj.event == 'foldOne'){

    treetable.foldOne('#list');

    } else {

    treetable.foldAll('#list');

    }

    });

    });

    180807-Quick-Task 动态脚本支持框架之Groovy脚本加载执行

    Quick-Task 动态脚本支持框架之Groovy脚本加载执行 上一篇简答说了如何判断有任务动态添加.删除或更新,归于一点就是监听文件的变化,判断目录下的Groovy文件是否有新增删除和改变,从而判 ...

    180729-Quick-Task 动态脚本支持框架之任务动态加载

    Quick-Task 动态脚本支持框架之任务动态加载 前面几篇博文分别介绍了整个项目的基本架构,使用说明,以及整体框架的设计与实现初稿,接下来则进入更细节的实现篇,将整个工程中核心实现捞出来,从为什么 ...

    D3树状图异步按需加载数据

    D3.js这个绘图工具,功能强大不必多说,完全一个Data Driven Document的绘图工具,用户可以按照自己的数据以及希望实现的图形,随心所欲的绘图. 图形绘制,D3默认采用的是异步加载,但 ...

    layui的几个简单使用(简单弹窗,加载效果,移除加载效果)

    1.加载效果和移除加载效果 function layuiLoading(msg){ layui.use(['layer', 'form'], function(){ index = layer.loa ...

    mpvue支持小程序的分包加载

    目录 clone mpvue-quickstart 模板 分包体验 现有项目的分包改造 这个功能可以说是让我们这些用 mpvue 的等的很焦灼,眼看着项目的大小一天天地逼近 2M,mpvue 还不能很 ...

    001_Chrome 76支持原生HTML 图片懒加载Lazy loading

    Table Of Content 什么是懒加载? 语法参数及使用方式? 有哪些特点? 与js有关的实践 什么是懒加载? 技术背景 Web应用需要经常向后台服务器请求资源(通过查询数据库,是非常耗时耗资 ...

    js实现所有异步请求全部加载完毕后,loading效果消失

    在实际开发中,一定有情况是这样的,一个页面我们有多个地方请求了ajax,在这种情况下,我们要实现数据没来之前出现我们炫酷的loading效果,而且要等到所有的ajax都请求完毕后,才让我们的loadi ...

    LayUI中实现上级下拉框动态加载下级下拉框js

    js代码: var form = layui.form, layer = layui.layer; form.on("select(上级)", function(data){ va ...

    webpack在nodejs中应用(支持es6语法及热加载)

    安装 npm i webpack webpack-cli @babel/core babel-loader @babel/preset-env @babel/node clean-webpack-pl ...

    随机推荐

    一个优秀windows C++程序员的知识体系[转]

    转自:一个优秀windows C++程序员的知识体系 思考一个优秀windows C++ 程序员该有哪些知识,可最终发现什么知识都不能少, 看下图: 除了上面知识,程序员还要不断学习, 保持对新知识的 ...

    使用ssh协议挂载远程文件目录

    安装sshfs 命令:sudo apt-get install sshfs 使用modprobe加载模块 命令:sudo modprobe fuse 设置权限 把下面的 ...

    button按钮点击不刷新(前端交流学习:452892873)

    确认买单 可实现页面点击不刷新效果

    ASP.NET网页发布以及相关问题的解决

    今天做了一个统计站点的网页,想要发布一下,中间碰到不少问题,现在和大家分享一下! 这是我想要最终的网页结果: 1.发布站点到桌面(任意路径)       2.安装IIS   3.安装好后,打开IIS, ...

    如何清除Windows10中的恢复分区

    在Windows搜索框中键入Cmd.出现结果列表. 右键单击命令提示符并选择以管理员身份运行. 在命令提示符下键入diskpart,然后按Enter键. 输入list disk并按Enter键. 出现 ...

    Sql_连接查询中on筛选与where筛选的区别

    sql中的连接查询分为3种, cross join,inner join,和outer join ,  在 cross join和inner join中,筛选条件放在on后面还是where后面是没区别 ...

    文本分类-TensorRT优化结果对比图

    做的文本二分类,使用tensorRT进行图优化和加速,输出预测概率结果对比如下: 从结果对比来看,概率值有微小的变化,但不影响最终的分类

    hexo搭建个人博客

    本文讲述如何用`hexo`搭建个人博客,并托管到`github`.不需要租赁服务器,可完成网站博客的搭建. 安装Hexo安装hexo之前,要先下载安装Node.js和Git,百度搜索找到下载即可.[G ...

    Android Studio运行程序,检测不到(夜神、Genymotion)模拟器

    用了统一给的android studio,运行程序,检测不到模拟器(夜神). 又新建了一个系统的模拟器,运行,提示ANDROID_SDK_ROOT is undefined 在环境变量中配置之后,夜神 ...

    jquery ajax 的封装

    var tooAjaxData = new Object(); tooAjaxData = function () { this.AjaxUrl =" ";}; bookInfoC ...

    更多相关内容
  • layui 树形表格.rar

    2020-09-10 17:37:02
    利用layui实现的树形表格,从后台获取list数据,解析成json,实现对数据的增删改查。这功能写了一周,花了不少功夫,希望可以帮到大家。
  • Layui树形列表,Layui树形菜单列表

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

    Layui树形列表

    比较简单请耐心查看

    效果图
    Layui树形列表
    实现方式
    首先引入组件(源码放到最后面了)
    在这里插入图片描述

    layui.config({
        base: $projectPath+"/js/util/layui-module/"
    }).extend({
        treeSelect: "treeSelect",
        treeTable: "treeTable",
    });
    

    js 中

    var layer;
    var form;
    var table;
    var treeTable;
    var interUrl = {
    		select: $projectPath+'/sys/menu/selecTreeTable',
    }
    /**
     * layui 组件引入
     * @returns
     */
    layui.use([ 'layer', 'form', 'table', "treeTable"], function() {
    	layer = layui.layer;
    	form = layui.form;
    	table = layui.table;
    	treeTable = layui.treeTable;
    	
    	// 执行一个 table 实例
        var treeTablParam = treeTable.render({
    		elem : '#data_table',
    		id : 'data_table',
    		url : interUrl.select, 
    		height:'full-120',
    		page: false,
    		toolbar : '#toolberLeft',
    		treeColIndex: 1,// 树形图标显示在第几列
            treeSpid: 0,// 最上级的父级id
            treeIdName: 'mid',// id字段的名称
            treePidName: 'parentId',// pid字段的名称
            treeDefaultClose: false,// 是否默认折叠
            treeLinkage: true,// 父级展开时是否自动展开所有子级
    		cols : [[ // 表头
    			{type : 'checkbox', fixed : 'left', hide: true},  
    			{field : 'mname', title : '菜单名称', align : 'left', width: '150'},
    			{field : 'mid', title : 'ID',  align : 'center', width: '80', hide: true}, 
    			{field : 'code', title : '编码', align : 'center', width: '100',}, 
    			{field : 'isProject', title : '权限', align : 'center', width: '100', templet: (d) => getDictText("is_project",d.isProject)}, 
    			{field : 'url', title : '跳转路径', align : 'center', width: '300'}, 
    			{field : 'iconCls', title : '图标样式', align : 'center', width: '150',
    				templet:function(res){
    					return '<i class="font-icon">'+res.iconCls+'</i>';
    				}
    		    },{title : '操作', align : 'center', width: '300', toolbar : '#toolRow'} 
    		    // fixed : 'right',
    		]]
    	});
        
    	// 头部左侧事件
        table.on('toolbar(data_table)',  function(obj) {
    		if (obj.event === 'search') {
    			select();
    			// treeTablParam = treeTable.render(treeTablParam); // 重载
    		}else if(obj.event === 'add'){
    			
    		}else if(obj.event === 'expand'){
    			treeTable.expandAll('#data_table');
    		}else if(obj.event === 'fold'){
    			treeTable.foldAll('#data_table');
    		}
    	})
    	
    	// 监听行工具事件
    	table.on('tool(data_table)', function(obj) {
    		var data = obj.data;
    		if (obj.event === 'add') {
    			
    		}else if (obj.event === 'del') {
    			
    		} else if (obj.event === 'edit') {
    
    		}else if (obj.event === 'detail') {
    			
    		}
    	});
    
    })
    function select() {
    	var name = $("#serarch_name").val();
    	var searchCount = 0;
    	if (name) {
    		$('.layui-table').find('tbody tr td').each(function() {
    			$(this).css('background-color', 'transparent');
    			var text = $(this).text();
    			if (text.indexOf(name) != -1) {
    				$(this).css('background-color', '#e0f1c5');
    				searchCount++;
    			}
    		});
    		if (searchCount == 0) {
    			layer.msg("无匹配");
    		}
    	} else {
    		layer.msg("请输入搜索内容");
    	}
    }
    

    html 中

    <table id="data_table" class="layui-hide" lay-filter="data_table"></table>
    
    <script type="text/html" id="toolberLeft">
    	<div class="layui-form">
    		<a class="layui-btn layui-btn-sm layui-btn-primary" lay-event="expand" style="margin-left: 5px;" title="展开"><i class="layui-icon">&#xe624;</i></a>
    		<a class="layui-btn layui-btn-sm layui-btn-primary" lay-event="fold" style="margin-left: 5px;" title="折叠"><i class="layui-icon">&#xe67e;</i></a>
    		<div class="layui-input-inline">
    			<input type="text" name="name" class="layui-input" id="serarch_name" style="height: 33px;" placeholder="请输入名称关键字">
    		</div>
    	    <div class="layui-inline" style="text-align: center;">
    			<a class="layui-btn layui-btn-sm" lay-event="search" style="margin-left: 5px;"><i class="layui-icon">&#xe615;</i>搜索</a>
    		</div>
    		<a class="layui-btn layui-btn-sm layui-btn-primary" lay-event="add" style="margin-left: 5px;"><i class="layui-icon">&#xe654;</i>新增</a>
    	</div>
    </script>
    
    <script type="text/html" id="toolRow">
    	<a class="layui-btn layui-btn-xs layui-btn-primary" lay-event="add">添加下降菜单</a>
    	<a class="layui-btn layui-btn-xs layui-btn-primary" lay-event="detail">查看</a>
    	<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    	<a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del">删除</a>
    </script>
    

    java 中(serviceImpl层)

    	/**
    	 * 获取树形表格
    	 * @param m
    	 * @return
    	 */
    	public Result<?> selecTreeTable(MenuEntity m) {
    		List<MenuEntityResp> list = dao.selectTreeAll();// 一次性查出所有
    		// 这里的Result是分页的数据和总数,我这里直接查询所有并没有分页
    		return Result.success(list, (long)list.size());
    	}
    

    需要去除下面这个图标的话
    在这里插入图片描述

    /** 隐藏树形表格的图标*/
    .treeTable-icon .layui-icon-layer{
    	display: none;
    }
    

    效果如下
    在这里插入图片描述

    treetable.css和treeTable.js代码(组件源码)

    treetable.css

    .treeTable-empty {
        width: 20px;
        display: inline-block;
    }
    
    .treeTable-icon {
        cursor: pointer;
    }
    
    .treeTable-icon .layui-icon-triangle-d:before {
        content: "\e623";
    }
    
    .treeTable-icon.open .layui-icon-triangle-d:before {
        content: "\e625";
        background-color: transparent;
    }
    
    

    treeTable.js

    layui.define(['layer', 'table'], function (exports) {
        var $ = layui.jquery;
        var layer = layui.layer;
        var table = layui.table;
    
        var treetable = {
            // 渲染树形表格
            render: function (param) {
                // 检查参数
                if (!treetable.checkParam(param)) {
                    return;
                }
                // 复制一个新对象
                var newParam = $.extend(true,{},param) ;
                // 获取数据
                if (!param.where && param.data) {
                    treetable.init(param, param.data);
                } else {
                    $.getJSON(param.url, param.where, function (res) {
                        treetable.init(param, res.data);
                    });
                }
                return newParam;
            },
            // 渲染表格
            init: function (param, data) {
                var mData = [];
                var doneCallback = param.done;
                var tNodes = data;
                // 补上id和pid字段
                for (var i = 0; i < tNodes.length; i++) {
                    var tt = tNodes[i];
                    if (!tt.id) {
                        if (!param.treeIdName) {
                            layer.msg('参数treeIdName不能为空', {icon: 5});
                            return;
                        }
                        tt.id = tt[param.treeIdName];
                    }
                    if (!tt.pid) {
                        if (!param.treePidName) {
                            layer.msg('参数treePidName不能为空', {icon: 5});
                            return;
                        }
                        tt.pid = tt[param.treePidName];
                    }
                }
    
                // 对数据进行排序
                var sort = function (s_pid, data) {
                    for (var i = 0; i < data.length; i++) {
                        if (data[i].pid == s_pid) {
                            var len = mData.length;
                            if (len > 0 && mData[len - 1].id == s_pid) {
                                mData[len - 1].isParent = true;
                            }
                            mData.push(data[i]);
                            sort(data[i].id, data);
                        }
                    }
                };
                sort(param.treeSpid, tNodes);
                if(mData.length < 1){
                	mData = tNodes;
                }
                // 重写参数
                param.url = undefined;
                param.data = mData;
                param.page = {
                    count: param.data.length,
                    limit: param.data.length
                };
                param.cols[0][param.treeColIndex].templet = function (d) {
                    var mId = d.id;
                    var mPid = d.pid;
                    var isDir = d.isParent;
                    var emptyNum = treetable.getEmptyNum(mPid, mData);
                    var iconHtml = '';
                    for (var i = 0; i < emptyNum; i++) {
                        iconHtml += '<span class="treeTable-empty"></span>';
                    }
                    if (isDir) {
                        iconHtml += '<i class="layui-icon layui-icon-triangle-d"></i> <i class="layui-icon layui-icon-layer"></i>';
                    } else {
                        iconHtml += '<i class="layui-icon layui-icon-file"></i>';
                    }
                    iconHtml += '&nbsp;&nbsp;';
                    var ttype = isDir ? 'dir' : 'file';
                    var vg = '<span class="treeTable-icon open" lay-tid="' + mId + '" lay-tpid="' + mPid + '" lay-ttype="' + ttype + '">';
                    return vg + iconHtml + d[param.cols[0][param.treeColIndex].field] + '</span>'
                };
    
                param.done = function (res, curr, count) {
                    $(param.elem).next().addClass('treeTable');
                    $('.treeTable .layui-table-page').css('display', 'none');
                    $(param.elem).next().attr('treeLinkage', param.treeLinkage);
                    // 绑定事件换成对body绑定
                    /*$('.treeTable .treeTable-icon').click(function () {
                        treetable.toggleRows($(this), param.treeLinkage);
                    });*/
                    if (param.treeDefaultClose) {
                        treetable.foldAll(param.elem);
                    }
                    if (doneCallback) {
                        doneCallback(res, curr, count);
                    }
                };
    
                // 渲染表格
                table.render(param);
            },
            // 计算缩进的数量
            getEmptyNum: function (pid, data) {
                var num = 0;
                if (!pid) {
                    return num;
                }
                var tPid;
                for (var i = 0; i < data.length; i++) {
                    if (pid == data[i].id) {
                        num += 1;
                        tPid = data[i].pid;
                        break;
                    }
                }
                return num + treetable.getEmptyNum(tPid, data);
            },
            // 展开/折叠行
            toggleRows: function ($dom, linkage) {
                var type = $dom.attr('lay-ttype');
                if ('file' == type) {
                    return;
                }
                var mId = $dom.attr('lay-tid');
                var isOpen = $dom.hasClass('open');
                if (isOpen) {
                    $dom.removeClass('open');
                } else {
                    $dom.addClass('open');
                }
                $dom.closest('tbody').find('tr').each(function () {
                    var $ti = $(this).find('.treeTable-icon');
                    var pid = $ti.attr('lay-tpid');
                    var ttype = $ti.attr('lay-ttype');
                    var tOpen = $ti.hasClass('open');
                    if (mId == pid) {
                        if (isOpen) {
                            $(this).hide();
                            if ('dir' == ttype && tOpen == isOpen) {
                                $ti.trigger('click');
                            }
                        } else {
                            $(this).show();
                            if (linkage && 'dir' == ttype && tOpen == isOpen) {
                                $ti.trigger('click');
                            }
                        }
                    }
                });
            },
            // 检查参数
            checkParam: function (param) {
                if (!param.treeSpid && param.treeSpid != 0) {
                    layer.msg('参数treeSpid不能为空', {icon: 5});
                    return false;
                }
    
                if (!param.treeColIndex && param.treeColIndex != 0) {
                    layer.msg('参数treeColIndex不能为空', {icon: 5});
                    return false;
                }
                return true;
            },
            // 展开所有
            expandAll: function (dom) {
                $(dom).next('.treeTable').find('.layui-table-body tbody tr').each(function () {
                    var $ti = $(this).find('.treeTable-icon');
                    var ttype = $ti.attr('lay-ttype');
                    var tOpen = $ti.hasClass('open');
                    if ('dir' == ttype && !tOpen) {
                        $ti.trigger('click');
                    }
                });
            },
            // 折叠所有
            foldAll: function (dom) {
                $(dom).next('.treeTable').find('.layui-table-body tbody tr').each(function () {
                    var $ti = $(this).find('.treeTable-icon');
                    var ttype = $ti.attr('lay-ttype');
                    var tOpen = $ti.hasClass('open');
                    if ('dir' == ttype && tOpen) {
                        $ti.trigger('click');
                    }
                });
            }
        };
        // 引入图标
        layui.link(layui.cache.base + '/treetable.css');
    
        // 给图标列绑定事件
        $('body').on('click', '.treeTable .treeTable-icon', function () {
            var treeLinkage = $(this).parents('.treeTable').attr('treeLinkage');
            if ('true' == treeLinkage) {
                treetable.toggleRows($(this), true);
            } else {
                treetable.toggleRows($(this), false);
            }
        });
    
        exports('treeTable', treetable);
    });
    
    
    展开全文
  • layui-tree树形模板

    2019-05-30 11:46:40
    layui-tree是layui提供的树形管理,可以用于后台做权限列表的使用,只需要后台整理好数据给前台展示,勾选之后提交给后台即可。
  • layui树形组件使用(tree.render())ssm

    千次阅读 2021-05-25 17:57:04
    layui树形组件使用(tree.render())基于ssm实现功能 一、演示效果 二、后端返回数据格式 注意:使用树形组件回显的字段必须有id,title,checked。否则会无数据,并且父节点一定要为false,子节点打勾的为true。 ...

    layui树形组件使用(tree.render())基于ssm实现功能

    一、演示效果
    在这里插入图片描述
    二、后端返回数据格式
    在这里插入图片描述
    注意:使用树形组件回显的字段必须有id,title,checked。否则会无数据,并且父节点一定要为false,子节点打勾的为true。

    三、前端代码
    1.HTML部分

    <script type="text/html" id="barDemo">
    	<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="setModule"><i class="layui-icon">&#xe620;</i>设置权限</a>
    </script>
    <!--设置权限-->
    <div id="diaSetRight" style="display: none;" title="设置权限" style="width:300px;height:600px; margin: 10px auto;">
    	<table id="tabEdit">
    		<tr>
    			<td>
    				<div id="rightTree"></div>
    			</td>
    		</tr>
    		<tr>
    			<td style="text-align: center; padding: 10px;">
    				<a id="setRole" href="#" class="layui-btn"><i class="layui-icon">&#xe605;</i>保存设置</a>
    			</td>
    		</tr>
    	</table>
    </div>
    

    2.js部分

    //监听数据行工具栏按钮事件
    table.on('tool(test)', function(obj) { //注:tool是工具条事件名,test是table原始容器的属性 lay-filter="对应的值"
    	var data = obj.data; //获得当前行数据
    	var layEvent = obj.event; //获得 lay-event 对应的值(也可以是表头的 event 参数对应的值)
    	var tr = obj.tr; //获得当前行 tr 的DOM对象
    
    	if(layEvent === 'setModule') { //设置模块
    		arr = [];
    		$.post(globalData.server + "roles/GetModulesByRoleIdLayUI", {
    			token: globalData.token,
    			rolesIds: data.id
    		}, function(r) {
    			tree.render({
    				elem: '#rightTree',
    				data: r,
    				id: 'roleTreeId',
    				showCheckbox: true
    			})
    			cur_roleId = data.id;
    		}, "json");
    		//打开设置权限窗口
    		setIndex = layer.open({
    			type: 1,
    			content: $('#diaSetRight'),
    			title: "正在设置角色[" + data.name + "]的权限模块",
    			area: ['300px', '400px']
    		});
    	}
    });
    
    //给角色设置权限
    $("#setRole").click(function() {
    	var nodes = tree.getChecked('roleTreeId');
    	//字符串拼接基本功,要求手熟
    	for(var i = 0; i < nodes.length; i++) {
    		getChildenId(nodes[i]); //调用递归的方法来获取所有选中节点的Id
    	}
    	//调用远程接口保存设置
    	$.post(globalData.server + "roles/SetSysRights", {
    		parentIds: arr.join(","),
    		rId: cur_roleId,
    		token: globalData.token
    	}, function(r) {
    		if(r) {
    			layer.msg('保存权限成功!', {
    				icon: 1,
    				time: 1000
    			}, function() {
    				layer.close(setIndex); //关闭修改弹出层
    				window.top.getMenu();
    			});
    		} else {
    			layer.msg('保存权限失败!', {
    				icon: 2,
    				time: 1000
    			})
    		}
    	}, "json");
    });
    
    //var active={del:3,reload:1,load:2};
    $('.demoTable .layui-btn').on('click', function() {
    	var type = $(this).data('type');
    	active[type] ? active[type].call(this) : '';
    });
    
    });
    var arr = [];
    //递归获取选中节点的Id
    function getChildenId(node) {
    	if(node != null) {
    		arr.push(node.id);
    		for(var i = 0; node.children != null && i < node.children.length; i++) {
    			getChildenId(node.children[i]);
    		}
    	}
    }
    

    四、后端代码
    1.mapper接口

    /**
     * 根据角色id查询全部树形<用户设置权限>
     * @param rolesIds List<ModulesTreeNode>
     * @return
     */
    List<ModulesTreeNode> selectAllTree(String rolesIds);
    
    /**
     * 移除角色权限
     * @param roleid
     * @param moduleid
     * @return
     */
    int deleteByUidAndModuleid(String roleid,String moduleid);
     
     /**
      * 分配角色权限
      * @param id
      * @param roleid
      * @param moduleid
      * @return
      */
    int insertByUidAndModuleid(String id,String roleid,String moduleid);
    

    2.service层

    /**
     * 根据角色id查询全部树形<用户设置权限>
     * @param rolesIds List<ModulesTreeNode>
     * @return
     */
    List<ModulesTreeNode> selectAllTree(String rolesIds);
    
    /**
     * 移除角色权限
     * @param roleid
     * @param moduleid
     * @return
     */
    int deleteByUidAndModuleid(String roleid,String moduleid);
     
     /**
      * 分配角色权限
      * @param id
      * @param roleid
      * @param moduleid
      * @return
      */
    int insertByUidAndModuleid(String id,String roleid,String moduleid);
    

    3.serviceImpl层

    @Override
    public List<ModulesTreeNode> selectAllTree(String rolesIds) {
    	// TODO Auto-generated method stub
    	return modulesMapper.selectAllTree(rolesIds);
    }
    
    @Override
    public int deleteByUidAndModuleid(String roleid, String moduleid) {
    	// TODO Auto-generated method stub
    	return rolesModulesMapper.deleteByUidAndModuleid(roleid, moduleid);
    }
    
    @Override
    public int insertByUidAndModuleid(String id, String roleid, String moduleid) {
    	// TODO Auto-generated method stub
    	return rolesModulesMapper.insertByUidAndModuleid(id, roleid, moduleid);
    }
    

    4.controller层

    /**
    * 查询所有的权限
    * 这里是查询所有的权限模块,然后给夫模块赋予false前台才可以显示树形组件
    * @return List
    */
    public List<ModulesTreeNode> getRolesTreeNodes(String rolesIds) {
    	List<ModulesTreeNode> modulesTreeNodes = modulesService.selectAllTree(rolesIds);
    	for (ModulesTreeNode modulesTreeNode : modulesTreeNodes) {
    		if (modulesTreeNode.getParentid()==0) {
    			modulesTreeNode.setChecked(false);
    		}
    	}
    	return modulesTreeNodes;
    }
    
    /**
    * 生成模块类型树
    * @return List
    */
    @RequestMapping("/GetModulesByRoleIdLayUI")
    public List<ModulesTreeNode> getRolesTreeNode(String rolesIds) {
    	List<ModulesTreeNode> rolesTreeList = this.getRolesTreeNodes(rolesIds);
    	List<ModulesTreeNode> rolesTreeNodes = new ArrayList<ModulesTreeNode>();
    	for (ModulesTreeNode rolesTreeNode : rolesTreeList) {
    		if (rolesTreeNode.getParentid()==0) {
    			rolesTreeNodes.add(findChildren(rolesTreeNode, rolesTreeList));
    		}
    	}
    	return rolesTreeNodes;
    }
    
    /**
    * 查找子类型
    * @return List
    */
    public ModulesTreeNode findChildren(ModulesTreeNode rolesTreeNode, List<ModulesTreeNode> rolesTreeList) {
    	for (ModulesTreeNode item : rolesTreeList) {
    		 if (rolesTreeNode.getId()==item.getParentid()) {
    			 if(rolesTreeNode.getChildren()==null) {
    				 rolesTreeNode.setChildren(new ArrayList<ModulesTreeNode>());
    			 } 
    			 rolesTreeNode.getChildren().add(findChildren(item,rolesTreeList));
    		 } 
    	}
    	return rolesTreeNode;
    }
    
    /**
    * 修改角色权限
    * 首先先要根据角色id把本身的权限删除,然后在进行添加权限
    * @return boolean 
    */
    @RequestMapping("/SetSysRights")
    @Transactional
    public boolean SetSysRights(String parentIds,String rId) {
    	//根据rId删除权限
    	rolesModulesService.deleteByUidAndModuleid(rId,"");
    	if (parentIds != null && !"".equals(parentIds) && parentIds != "") {//parentIds为空则视为取消全部权限
    		int flag = 0;
    		String[] m = parentIds.split(",");
    		for (int i = 0; i < m.length; i++) {
    			String id = UUIDUtil.getUUID();
    			flag = rolesModulesService.insertByUidAndModuleid(id, rId, m[i]);
    		}
    		if (flag<=0) {
    			return false;
    		}
    	}
    	return true;
    }
    

    5.mapper.xml
    注:我的数据库设计没有checked字段,所以我在sql里面添加了此字段并赋予boolean值

    <select id="selectAllTree" resultType="modulesTreeNode">
    	    SELECT
    		distinct m.id,
    		m. NAME title,
    		m.parentid,m.weight,
    		CASE
    	WHEN m.id IN (
    		SELECT
    			moduleid
    		FROM
    			rolemodules
    		WHERE
    			roleid = #{rolesIds}
    	) THEN
    		'true'
    	ELSE
    		'false'
    	END checked
    	FROM
    		modules m
    	LEFT JOIN rolemodules rm ON m.Id = rm.moduleid
    	ORDER BY
    		weight DESC
    </select>
    
    <delete id="deleteByUidAndModuleid">
        delete from rolemodules
        where RoleId = #{roleid} 
        <if test="moduleid != null and moduleid != ''">
        	and ModuleId = #{moduleid}
        </if>
    </delete>
    
    <insert id="insertByUidAndModuleid">
        insert into rolemodules(Id,RoleId,ModuleId) values(#{id},#{roleid},#{moduleid})
    </insert>
    

    到此就结束了!!!!!感谢大家的支持哦!!!!
    温馨提示:1.在设计表的时候要设计checked字段,不然就像我一样sql写的比较麻烦
    2.我使用了token的拦截,童鞋们可以根据自身情况使用。

    展开全文
  • link rel="stylesheet" href="../../../js/layuiadmin/layui/css/layui.css" media="all"> <link rel="stylesheet" href="../../../js/layuiadmin/style/admin.css" media="all"> <script src="../../....

    引入基础css和JS脚本

    <link rel="stylesheet" href="../../../js/layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="../../../js/layuiadmin/style/admin.css" media="all">
    
    <script src="../../../js/jquery/jquery-1.11.3.min.js"></script>
    <script src="../../../js/layuiadmin/layui/layui.js"></script>

    正式HTML代码

     <input type="text" id="tree" lay-filter="tree" class="layui-input">			          

    JQuery

    <script>
    layui.config({
    		base: '../../../js/layuiadmin/layui/lay/modules/treeSelect/'//引入treeselect.js脚本
    	}).extend({
    		treeGrid:'treeSelect'
    	}).use(['jquery','treeSelect','layer','form'], function(){
    		var $=layui.jquery;
    		layer=layui.layer;
    
    		var treeSelect= layui.treeSelect;
    
    		treeSelect.render({
    			// 选择器
    			elem: '#tree',
    			// 数据
    			data: '../../../js/ztree/data3.json',//json数据
    			// 异步加载方式:get/post,默认get
    			type: 'get',
    			// 占位符
    			placeholder: '修改默认提示信息',
    			// 是否开启搜索功能:true/false,默认false
    			search: true,
    			// 点击回调
    			click: function(d){
    				console.log(d);
    			},
    			// 加载完成后的回调函数
    			success: function (d) {
    				console.log(d);
    //                选中节点,根据id筛选
    //                treeSelect.checkNode('tree', 3);
    
    //                获取zTree对象,可以调用zTree方法
    //                var treeObj = treeSelect.zTree('tree');
    //                console.log(treeObj);
    
    //                刷新树结构
    //                treeSelect.refresh();
    			}
    		});
    	});
    </script>

    JSON数据

    [
        {
          "id": 1,
          "name": "zzz",
          "open": true,
          "children": [
            {
              "id": 2,
              "name": "1",
              "open": false,
              "checked": true
            },
            {
              "id": 3,
              "name": "2",
              "open": false,
              "checked": true
    
            },
            {
              "id": 17,
              "name": "3z",
              "open": false,
              "checked": true
            }
          ],
          "checked": true
        },
        {
          "id": 4,
          "name": "评论",
          "open": false,
          "children": [
            {
              "id": 5,
              "name": "留言列表",
              "open": false,
              "checked": false
            },
            {
              "id": 6,
              "name": "发表留言",
              "open": false,
              "checked": false
            },
            {
              "id": 333,
              "name": "233333",
              "open": false,
              "checked": false
            }
          ],
          "checked": false
        },
        {
          "id": 10,
          "name": "权限管理",
          "open": false,
          "children": [
            {
              "id": 8,
              "name": "用户列表",
              "open": false,
              "children": [
                {
                  "id": 40,
                  "name": "添加用户",
                  "open": false,
                  
                  "url": null,
                  "title": "40",
                  "checked": false,
                  "level": 2,
                  "check_Child_State": 0,
                  "check_Focus": false,
                  "checkedOld": false,
                  "dropInner": false,
                  "drag": false,
                  "parent": false
                },
                {
                  "id": 41,
                  "name": "编辑用户",
                  "open": false,
                  "checked": false
                },
                {
                  "id": 42,
                  "name": "删除用户",
                  "open": false,
                  "checked": false
                }
              ],
              "checked": false
            },
            {
              "id": 11,
              "name": "角色列表",
              "open": false,
              "checked": false
            },
            {
              "id": 13,
              "name": "所有权限",
              "open": false,
              "children": [
                {
                  "id": 34,
                  "name": "添加权限",
                  "open": false,
                  "checked": false
                },
                {
                  "id": 37,
                  "name": "编辑权限",
                  "open": false,
                  "checked": false
                },
                {
                  "id": 38,
                  "name": "删除权限",
                  "open": false,
                  "checked": false
                }
              ],
              "checked": false
            },
            {
              "id": 15,
              "name": "操作日志",
              "open": false,
              "checked": false
            }
          ],
          "checked": false
        }
      ]

    最后效果

    展开全文
  • layui树形组件源数据 ——递归添加

    千次阅读 2020-06-18 22:55:22
    上一篇博客记录了用ztree插件写的树形结构,这篇文章主要是记录使用layui写的树形结构所踩的坑,在写layui中写到了动态的向源数据中添加数据,用到了递归来添加。使用layui树形结构每一次加载后会折叠结构,体验...
  • 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树形组件重现勾选过程的办法

    千次阅读 2020-12-23 05:15:26
    layui提供了两种初始化节点选中状态的方式一 tree.setChecked('demoId', [2,13,18,19]); //批量勾选 id 为2,13,18,19 的节点其中19是用户真实勾选的节点ID,但是...layui树形组件此时无法重现用户的节点勾选情况了...
  • 要实现的效果 : ... 是选中状态(在角色修改权限的时候用到) disabledId => 是不可选中的状态 { "code": 0, "msg": "获取成功", "data": { "list": [ { "id": 1, "name": "用户管理", "pid":.
  • layui提供了两种初始化节点选中状态的方式 ...layui树形组件此时无法重现用户的节点勾选情况了,怎么办? 这个时候就不能从前台的角度来解决问题了,因为layui树形组件的规则就是这样的。 二 通过数
  • layui菜单页面,用火狐浏览器打开index.html可以查看演示,非常好用的
  • 这是在layui插件中生成的一个树形组件,他是由后端生成数据,将后端数据返回给前台页面时,自动生成的一个树形组件。 但在使用过程中,我们需要考虑到数据库中的设计因素,在这个例子中,我使用的数据库中的数据是...
  • 树形结构在实际开发中很长用到,比如部门管理,权限菜单等。因为用树形结构来展示会显的很清晰明了。最近写了一个个人博客小项目中用到了LayUI树形结构,之后写了一个小案例整理一下。 官网地址:...
  • /** * 跳转树形菜单页面 */ @RequestMapping("/toTree") public ModelAndView toTree(){ ModelAndView modelAndView=new ModelAndView(); modelAndView.setViewName("tree"); return modelAndView; } /** * 获取...
  • 一:右键菜单:layui里面没有给到右键菜单,所以,我自己把源码改了一下:找到layui文件夹里modules下的tree.js用以上代码,替换以下代码当i.which等于3,是右键事件,等于1是左键。所以,左键响应的事件,还是可以...
  • Layui实现TreeTable(树形数据表格)

    千次阅读 2021-10-21 17:51:41
    LayUI树形表格treetable使用详解 gitee:ele-admin / treetable-lay 开发背景 在开源项目看到layui-treetable实现的菜单配置,页面简洁,手上刚好又有个菜单页面可以进行优化(整活)。但是尽管已经有上面三个案例,...
  • layui-树形控件

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

    2021-08-07 11:15:00
    扩展 layui权限树 authtreelayui自身提供一个tree树形菜单,但是并不适用于权限控制中,比如:选择用户组的权限(树形结构),需要使用form表单提交用户所选权限数据。项目中遇到了此类需求,所以特意封装了一个...
  • 基于layui自定义树形组件

    千次阅读 2019-12-10 15:58:43
    基于layui自定义树形组件文档 - layui.sw365tree 简介:针对于自己的需求所自定义的树形组件 模块加载名称:sw365tree 1· 快速使用 var tree = layui.sw365tree; 通过 tree.render() 方法指定一个元素,便可快速...
  • layer 下拉树形菜单带有复选框

    热门讨论 2017-05-22 10:17:46
    该插件是改良的layer的树形插件,在原始的layer插件中的树形结构是没有复选框的,改良后可用以拿来做权限系统的权限选择
  • 基于Layui实现的树形菜单页面

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

    千次阅读 2019-08-01 00:04:59
    需求 当某一父节点下的子节点全选时保存此父节点 ...下载authtree https://github.com/wangerzi/layui-authtree 使用的spring thymeleaf 'th:'前缀的标签可替换成其它标签 <!DOCTYPE html> <html xmlns:t...
  • 关于layui树形表格回显

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

    2022-07-08 20:20:18
    左侧菜单实现思路:1)layui官网上的显示菜单代码(html代码)2) 从此代码推断出具体需要怎样的数据格式,数据必须存在父子关系3)分析工具类的底层原理方便之后使用4)调用次工具类,将菜单平级数据转换为具备父子...
  • 13, "ismenu": 1, "displayno": 17 }, { "id": 1303, "name": "权限管理", "description": null, "url": null, "pid": 13, "ismenu": 1, "displayno": 18 }, { "id": 1304, "name": "数据字典", "description": ...
  • 前言 最近在准备找工作的事项...树形组件文档 在一段漫长的雪藏后,我们在 layui 2.5.0 的版本中重新创作了 tree,以便它能够更加适用于绝大多数业务场景,而风格依然遵循 layui 独有的极简和清爽。需要提醒的是,如果
  • LayUI—tree树形结构的使用

    万次阅读 多人点赞 2019-09-01 21:46:46
    树形结构在实际开发中很长用到,比如部门管理,权限菜单等。因为用树形结构来展示会显的很清晰明了。最近写了一个个人博客小项目中用到了LayUI树形结构,之后写了一个小案例整理一下。 官网地址:...
  • layui treegrid 在官网人已经有人改造出来了树形显示数据,https://fly.layui.com/extend/treeGrid/,在此基础上加上了分页功能,根据系统需求也调整了样式,我的是.NET开发,Java的可能要改改有些细节的地方 ...

空空如也

空空如也

1 2 3 4 5 ... 17
收藏数 322
精华内容 128
热门标签
关键字:

layui树形权限