layUI展示树状treetable树形表格完整代码

layUI展示树状treetable树形表格完整代码前言:因项目功能需要,在shiro权限管理模块中需要使用树状展示,前端使用的layUI框架,在官网的开发文档上没有找到树状表格的内容。只有树状菜单的文档:https://www.layui.com/doc/modules/tree.html树状表格步骤如下:1、首先下载所需调用的文件。下载链接:https://download.csdn.net/download/qq_35393472/10…

大家好,又见面了,我是你们的朋友全栈君。

前言:因项目功能需要,在shiro权限管理模块中需要使用树状展示,前端使用的layUI框架,在官网的开发文档上没有找到树状表格的内容。只有树状菜单的文档:https://www.layuion.com/doc/modules/tree.html
layui官网已关闭,相关内容可到这里查看:https://www.layuion.com/

先看效果图:在这里插入图片描述
文章结尾给大家提供示例代码下载。

树状表格步骤如下:

1、首先下载所需调用的文件。
下载链接:https://pan.baidu.com/s/1MRZT4VI4rUTzKL_ap5yipw

2、引入刚刚下载的文件 (压缩包中有:module文件夹 和json文件夹)
module文件中是需要调用的js和css
json是后端所需要给前端传的数据格式(例子,不是下方代码的数据)。

3、还需要正常的引用layUI的必要文件(例如:layui.js、layui.css等,根据项目所需!)

HTML:(下方的table标签 和 最后三个button 是重要代码,其他可忽略)

  <div class="xm">
            <div class="xm-d1">
                <p class="xm-d1-p">权限管理</p>
             </div>
             
              <div class="xm-d2">
                <div class="xm-d2-hang1">
                  <div class="pzright" style="width:101%;display: flex;justify-content: flex-start;float:right;">
                    <p class="xm-d1-p2">
                	 	<button id="add" onclick="addPermission()" class="layui-btn layui-btn-radius btnys"><i class="layui-icon">&#xe608;</i>添加</button>
				        <button class="layui-btn" id="btn-expand">全部展开</button>
				        <button class="layui-btn" id="btn-fold">全部折叠</button>
				        <button class="layui-btn" id="btn-refresh">刷新表格</button>
                   </p>
                  </div>  
                 <div class="clear"></div>  
                </div>
                <div class="xm-d2-hang2">
				   <table id="permissionTable" class="layui-table" lay-filter="permissionTable"></table>
                </div>
            </div>
            
        </div>

主要代码:(JavaScript)

    /*使用模块加载的方式 加载文件*/
    layui.config({
        base: '${ctx}/resoueces/css/layui/module/'
    }).extend({
        treetable: 'treetable-lay/treetable'
    }).use(['layer', 'table', 'treetable'], function () {
        var $ = layui.jquery;
        var table = layui.table;
        var layer = layui.layer;
        var treetable = layui.treetable;

        // 渲染表格
        var renderTable = function () {//树桩表格参考文档:https://gitee.com/whvse/treetable-lay
            layer.load(2);
            treetable.render({
                treeColIndex: 1,//树形图标显示在第几列
                treeSpid: 0,//最上级的父级id
                treeIdName: 'permissionId',//id字段的名称
                treePidName: 'pid',//pid字段的名称
                treeDefaultClose: false,//是否默认折叠
                treeLinkage: true,//父级展开时是否自动展开所有子级
                elem: '#permissionTable',
                url: '${ctx}/permission/permissionTree',
                page: false,
                cols: [[
                    {type: 'numbers', title: '编号'},
                    {field: 'permissionName', title: '资源名称'},
                    {field: 'permissionUrl', title: '资源路径'},
                    {field: 'permissionType', title: '资源简介'},
                    {field: 'pid', title: '排序'},
                    {field: 'resType', title: '类型',
                    	templet: function(d){
                    		if(d.resType==0){
                    			return '菜单';
                    		}else{
                    			return '按钮';
                    		}
                        }	
                    },
                    {templet: complain, title: '操作'}
                ]],
                done: function () {
                    layer.closeAll('loading');
                }
            });
        };

        renderTable();
        
		//触发三个button按钮
        $('#btn-expand').click(function () {
            treetable.expandAll('#permissionTable');
        });

        $('#btn-fold').click(function () {
            treetable.foldAll('#permissionTable');
        });

        $('#btn-refresh').click(function () {
            renderTable();
        });
		
        
        function complain(d){//操作中显示的内容
        	if(d.permissionUrl!=null){
        		return [
                        '<a class="operation" lay-event="edit" href="javascript:void(0)" onclick="editDepartment(\''+ d.permissionId + '\')" title="编辑">',
            	     	'<i class="layui-icon layui-icon-edit"></i></a>',
            	     	'<a class="operation" lay-event="" href="javascript:void(0)" onclick="delDepartment(\''+ d.permissionId + '\')" title="删除">',
            	     	'<i class="layui-icon layui-icon-delete" ></i></a>',
            	     	].join('');
        	}else{
        		return '';
        	}
        	
        }
        //监听工具条
        table.on('tool(permissionTable)', function (obj) {
            var data = obj.data;
            var layEvent = obj.event;
			if(data.permissionName!=null){
				if (layEvent === 'del') {
	                layer.msg('删除' + data.id);
	            } else if (layEvent === 'edit') {
	                layer.msg('修改' + data.id);
	            }
			}
        });
    });

备注:另外对数据库的表要有一定的等级关系。要有pid列

我的后端传给前端的json:(请做参考,数据库表列同内容)

{"msg":"true","code":0,"data":[{"permissionId":1,"permissionName":"系统管理","permissionUrl":null,"permissionType":null,"icon":null,"pid":0,"seq":0,"resType":"0"},{"permissionId":2,"permissionName":"账户管理","permissionUrl":"/link/sysUsers","permissionType":"管理登录的账户","icon":null,"pid":1,"seq":1,"resType":"1"},{"permissionId":3,"permissionName":"部门管理","permissionUrl":"/link/deparAdministrate","permissionType":"部门的管理","icon":null,"pid":1,"seq":2,"resType":"1"},{"permissionId":4,"permissionName":"角色管理","permissionUrl":"/link/sysRoleManage","permissionType":"设定角色的权限","icon":null,"pid":1,"seq":3,"resType":"1"},{"permissionId":5,"permissionName":"权限管理","permissionUrl":"/link/sysPermission","permissionType":"对权限进行编辑","icon":null,"pid":1,"seq":4,"resType":"1"},{"permissionId":6,"permissionName":"系统日志","permissionUrl":"/link/sysLog","permissionType":"系统日志","icon":null,"pid":1,"seq":5,"resType":"1"}],"count":6}

–modify from 2020-11-06 09:01
示例下载:下载
–modify from end

如果有问题也可加V(1173681997)

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/130689.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • error link2019无法解析的外部符号_inferior

    error link2019无法解析的外部符号_inferior最近在用VS2008开发,初学遇到不少问题,最头疼的问题之一就是:LNK2019。百度一下讲的并不够全面,反正都没解决我的问题。errorLNK2019问题在VC6.0中是errorLNK2001:unresolvedexternalsymbol问题,可能错误号改了。编译时出现类似这样的错误:Dlgcode.obj:errorLNK2019:无法解析的外部符号_readRe…

  • java 添加盲水印_OpenCV-图像处理-频域手段添加盲水印[通俗易懂]

    java 添加盲水印_OpenCV-图像处理-频域手段添加盲水印[通俗易懂][傅里叶变换算法及盲水印实现]盲水印,顾名思义就是看不见的水印。今天我们来说下频域加盲水印。相信大家做过图像处理的对频域、时域、空间域概念都有了一定的了解。空间域,我们日常所见的图像就是空域。空域添加数字水印的方法是在空间域直接对图像操作(之所以说的这么绕,是因为不仅仅原图是空域,原图的差分等等也是空域),比如将水印直接叠加在图像上。频域:描述信号在频率方面特性时用到的一种坐标系。在图像中就是图像…

    2022年10月26日
  • JQuery时间戳与时间字符串的转换「建议收藏」

    JQuery时间戳与时间字符串的转换「建议收藏」JS时间戳转字符串:varformatlistdate=function(time){vardate=newDate(time);vary=date.getFullYear();varm=date.getMonth()+1;vard=date.getDate();varhour=date.get…

  • 快速生成数据库ER图的方式[通俗易懂]

    快速生成数据库ER图的方式[通俗易懂]dbdiagram简述快速简单的数据库模型设计工具,可以帮助您使用其自己的特定于域的语言(DSL)来绘制数据库图。最主要的是免费。dbdiagram地址https://dbdiagram.io/dbdiagram效果Draw.io简介对于基于Web的使用免费,对于Atlassian(Confluence/JIRA)应用则需要付费。特点Draw.io是一个免费的在线图表软件,用于制作流程图,流程图等。允许使用不同类型的图表,例如流程图,组织结构图,UML,ER和网络图。允许

  • python range在for循环里的用法_PyThon range()函数中for循环用法「建议收藏」

    python range在for循环里的用法_PyThon range()函数中for循环用法「建议收藏」最初range和xrange都生成可以用for循环迭代的数字,然而在python2和3里实现方式并不完全一致,下面着重讲讲python3的range()函数for循环用法。1、函数语法range(start,stop,[step])2、参数说明start:可选参数,计数从start开始。默认是从0开始。例如range(5)等价于range(0,5)stop:必选参数,计数到st…

  • 微信小程序之授权登录(附完整源码)

    微信小程序之授权登录(附完整源码)个人博客上已经同步更新了文章,有目录索引,阅读起来比较方便,欢迎大家移步个人博客上读阅~个人博客地址:http://zwd596257180.gitee.io/blog/2019/04/15/wechat_applet_login/微信小程序之授权登录一、前言由于微信官方修改了getUserIn…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号