Layui的TreeTable使用

Layui的TreeTable使用Layui官方本身是没有TreeTable的,不过有个大佬自己写了一个,这是码云地址:https://gitee.com/whvse/treetable-lay/tree/master/接下来我来说一下具体使用这个东西首先下载这个文件夹中的东西在你的web项目下将这个文件夹弄到里面去,在页面上导入这些文件<linkrel="stylesheet"href="as…

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

Layui官方本身是没有TreeTable的,不过有个大佬自己写了一个,这是码云地址:https://gitee.com/whvse/treetable-lay/tree/master/

接下来我来说一下具体使用这个东西

首先下载这个文件夹中的东西Layui的TreeTable使用

在你的web项目下将这个文件夹弄到里面去,在页面上导入这些文件

    <link rel="stylesheet" href="assets/layui/css/layui.css">
    <link rel="stylesheet" href="assets/common.css"/>
    <script src="layui/layui.js"></script>

将下面这些代码放入你的body中

<div class="layui-container">
		<br> <br>
		<!--     <a class="layui-btn layui-btn-normal" href="index.html">&lt;&lt;返回</a> -->
		&nbsp;&nbsp;
		<div class="layui-btn-group">
			<button class="layui-btn" id="btn-expand">全部展开</button>
			<button class="layui-btn" id="btn-fold">全部折叠</button>
		</div>
		<table id="auth-table" class="layui-table" lay-filter="auth-table"></table>
	</div>

这是符合该treetable的json格式

{
  "code": 0,
  "msg": "",
  "count": 19,
  "data": [
    {
      "authorityId": 1,
      "authorityName": "系统管理",
      "orderNumber": 1,
      "menuUrl": null,
      "menuIcon": "layui-icon-set",
      "createTime": "2018/06/29 11:05:41",
      "authority": null,
      "checked": 0,
      "updateTime": "2018/07/13 09:13:42",
      "isMenu": 0,
      "parentId": -1
    },
    {
      "authorityId": 2,
      "authorityName": "用户管理",
      "orderNumber": 2,
      "menuUrl": "system/user",
      "menuIcon": null,
      "createTime": "2018/06/29 11:05:41",
      "authority": null,
      "checked": 0,
      "updateTime": "2018/07/13 09:13:42",
      "isMenu": 0,
      "parentId": 1
    },
    {
      "authorityId": 3,
      "authorityName": "查询用户",
      "orderNumber": 3,
      "menuUrl": "",
      "menuIcon": "",
      "createTime": "2018/07/21 13:54:16",
      "authority": "user:view",
      "checked": 0,
      "updateTime": "2018/07/21 13:54:16",
      "isMenu": 1,
      "parentId": 2
    },
    {
      "authorityId": 4,
      "authorityName": "添加用户",
      "orderNumber": 4,
      "menuUrl": null,
      "menuIcon": null,
      "createTime": "2018/06/29 11:05:41",
      "authority": "user:add",
      "checked": 0,
      "updateTime": "2018/07/13 09:13:42",
      "isMenu": 1,
      "parentId": 2
    },
    {
      "authorityId": 5,
      "authorityName": "修改用户",
      "orderNumber": 5,
      "menuUrl": null,
      "menuIcon": null,
      "createTime": "2018/06/29 11:05:41",
      "authority": "user:edit",
      "checked": 0,
      "updateTime": "2018/07/13 09:13:42",
      "isMenu": 1,
      "parentId": 2
    },
    {
      "authorityId": 6,
      "authorityName": "删除用户",
      "orderNumber": 6,
      "menuUrl": null,
      "menuIcon": null,
      "createTime": "2018/06/29 11:05:41",
      "authority": "user:delete",
      "checked": 0,
      "updateTime": "2018/07/13 09:13:42",
      "isMenu": 1,
      "parentId": 2
    },
    {
      "authorityId": 7,
      "authorityName": "角色管理",
      "orderNumber": 7,
      "menuUrl": "system/role",
      "menuIcon": null,
      "createTime": "2018/06/29 11:05:41",
      "authority": null,
      "checked": 0,
      "updateTime": "2018/07/13 09:13:42",
      "isMenu": 0,
      "parentId": 1
    },
    {
      "authorityId": 8,
      "authorityName": "查询角色",
      "orderNumber": 8,
      "menuUrl": "",
      "menuIcon": "",
      "createTime": "2018/07/21 13:54:59",
      "authority": "role:view",
      "checked": 0,
      "updateTime": "2018/07/21 13:54:58",
      "isMenu": 1,
      "parentId": 7
    },
    {
      "authorityId": 9,
      "authorityName": "添加角色",
      "orderNumber": 9,
      "menuUrl": "",
      "menuIcon": "",
      "createTime": "2018/06/29 11:05:41",
      "authority": "role:add",
      "checked": 0,
      "updateTime": "2018/07/13 09:13:42",
      "isMenu": 1,
      "parentId": 7
    },
    {
      "authorityId": 10,
      "authorityName": "修改角色",
      "orderNumber": 10,
      "menuUrl": "",
      "menuIcon": "",
      "createTime": "2018/06/29 11:05:41",
      "authority": "role:edit",
      "checked": 0,
      "updateTime": "2018/07/13 09:13:42",
      "isMenu": 1,
      "parentId": 7
    },
    {
      "authorityId": 11,
      "authorityName": "删除角色",
      "orderNumber": 11,
      "menuUrl": "",
      "menuIcon": "",
      "createTime": "2018/06/29 11:05:41",
      "authority": "role:delete",
      "checked": 0,
      "updateTime": "2018/07/13 09:13:42",
      "isMenu": 1,
      "parentId": 7
    },
    {
      "authorityId": 12,
      "authorityName": "角色权限管理",
      "orderNumber": 12,
      "menuUrl": "",
      "menuIcon": "",
      "createTime": "2018/06/29 11:05:41",
      "authority": "role:auth",
      "checked": 0,
      "updateTime": "2018/07/13 15:27:18",
      "isMenu": 1,
      "parentId": 7
    },
    {
      "authorityId": 13,
      "authorityName": "权限管理",
      "orderNumber": 13,
      "menuUrl": "system/authorities",
      "menuIcon": null,
      "createTime": "2018/06/29 11:05:41",
      "authority": null,
      "checked": 0,
      "updateTime": "2018/07/13 15:45:13",
      "isMenu": 0,
      "parentId": 1
    },
    {
      "authorityId": 14,
      "authorityName": "查询权限",
      "orderNumber": 14,
      "menuUrl": "",
      "menuIcon": "",
      "createTime": "2018/07/21 13:55:57",
      "authority": "authorities:view",
      "checked": 0,
      "updateTime": "2018/07/21 13:55:56",
      "isMenu": 1,
      "parentId": 13
    },
    {
      "authorityId": 15,
      "authorityName": "添加权限",
      "orderNumber": 15,
      "menuUrl": "",
      "menuIcon": "",
      "createTime": "2018/06/29 11:05:41",
      "authority": "authorities:add",
      "checked": 0,
      "updateTime": "2018/06/29 11:05:41",
      "isMenu": 1,
      "parentId": 13
    },
    {
      "authorityId": 16,
      "authorityName": "修改权限",
      "orderNumber": 16,
      "menuUrl": "",
      "menuIcon": "",
      "createTime": "2018/07/13 09:13:42",
      "authority": "authorities:edit",
      "checked": 0,
      "updateTime": "2018/07/13 09:13:42",
      "isMenu": 1,
      "parentId": 13
    },
    {
      "authorityId": 17,
      "authorityName": "删除权限",
      "orderNumber": 17,
      "menuUrl": "",
      "menuIcon": "",
      "createTime": "2018/06/29 11:05:41",
      "authority": "authorities:delete",
      "checked": 0,
      "updateTime": "2018/06/29 11:05:41",
      "isMenu": 1,
      "parentId": 13
    },
    {
      "authorityId": 18,
      "authorityName": "登录日志",
      "orderNumber": 18,
      "menuUrl": "system/loginRecord",
      "menuIcon": null,
      "createTime": "2018/06/29 11:05:41",
      "authority": null,
      "checked": 0,
      "updateTime": "2018/06/29 11:05:41",
      "isMenu": 0,
      "parentId": 1
    },
    {
      "authorityId": 19,
      "authorityName": "查询登录日志",
      "orderNumber": 19,
      "menuUrl": "",
      "menuIcon": "",
      "createTime": "2018/07/21 13:56:43",
      "authority": "loginRecord:view",
      "checked": 0,
      "updateTime": "2018/07/21 13:56:43",
      "isMenu": 1,
      "parentId": 18
    }
  ]
}

下面是使用这个组件的js

layui.config({
	base : 'module/'
}).extend({
	treetable : 'treetable-lay/treetable'
}).use([ 'table', 'treetable' ], function() {
	var $ = layui.jquery;
	var table = layui.table;
	var treetable = layui.treetable;

	// 渲染表格
var renderTable=	function(){
	layer.load(2);
	treetable.render({
		treeColIndex : 1,
		treeSpid : -1,
		treeIdName : 'Menuid',//自身的id
		treePidName : 'parentid',//父节点的id
		elem : '#auth-table',
		data : databind(),//这里可以去看文档,可以用url,也可以直接使用json字符串
		page : false,//不可分页
		
		cols : [ [ {//表头格式
			type : 'numbers'
		}, {
			field : 'name',//对于的json字符的键
			minWidth : 200,//宽度
			title : '权限名称'
		}, {
			field : 'Authid',
			title : '权限标识'
		}, {
			field : 'href',
			title : '菜单url'
		},
		// {field: 'orderNumber', width: 80, align: 'center', title: '排序号'},
		// {
		// field: 'isMenu', width: 80, align: 'center', templet: function (d) {
		// if (d.isMenu == 1) {
		// return '<span class="layui-badge layui-bg-gray">按钮</span>';
		// }
		// if (d.parentId == -1) {
		// return '<span class="layui-badge layui-bg-blue">目录</span>';
		// } else {
		// return '<span class="layui-badge-rim">菜单</span>';
		// }
		// }, title: '类型'
		// },
		{
			field : 'mark',
			title : '备注'
		}, {
			templet : '#auth-state',
			width : 220,
			align : 'center',
			title : '操作'
		} ] ],
		done : function() {
			layer.closeAll('loading');
		},
// di:testReload,
	});}
renderTable();
	$('#btn-expand').click(function() {
		treetable.expandAll('#auth-table');
	});

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

其中提供了两个方法,一个是全部展开,和全部关闭,方法在文档中有,这是这个组件的demo示例:https://whvse.gitee.io/treetable-lay/index.html

这是简单的使用,详情大家可以去看文章开头的码云地址,有文档说明,有什么问题或者是交流可以在下方评论

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

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

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

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

(0)
blank

相关推荐

  • 区位基尼系数_基尼系数直接计算法

    区位基尼系数_基尼系数直接计算法转载于:http://blog.sciencenet.cn/blog-3376208-1093109.html区域经济研究中,经常需要测度产业空间集中的程度,常用的指标有区位基尼系数(LocationalGiniCoefficient)、泰尔指数(TheilIndex)和EG指数等。这一期先讲区位基尼系数的计算方法及其实现函数,后几期再陆续介绍泰尔指数和EG指数。用Excel算区位基尼系数,尽管也可实现,但非常笨拙,而且可重复性差。然而,其计算方法是非常简单的,用R语言写一个函数来实现之,犹如杀

    2022年10月13日
  • vue生成二维码并下载[通俗易懂]

    vue生成二维码并下载[通俗易懂]vue生成二维码图片,这里使用的是qrcode.js这个插件1、下载插件npminstall–saveqrcodejs22、组件内使用<template><Buttontype=”primary”size=”small”@click=”getScan()”>扫一扫</Button><Buttontype=”primary”size=”small”@click=”getDownload()”>下载</Bu..

  • arcgis多因子加权叠加分析_arcgis栅格数据矢量化

    arcgis多因子加权叠加分析_arcgis栅格数据矢量化白话空间统计二十四:地理加权回归(七)ArcGIS的GWR工具扩展参数说明近期无论是开发者大会,还是个人工作,相当的忙,所以停了一段时间……不过地理加权回归写到第七章,自我感觉也差不多了,无论是基础理论还是来历,包括基础参数的意义,都应该介绍得比较清楚了,当然,后面可能是大家更关心的内容,也就是在ArcGIS(或者其他软件里面),怎么去执行地理加权回归,执行完成之后,生成的结果又如何解读?

  • 安装好Ubuntu18.04之后要做的事!!大全、详细教程!

    安装好Ubuntu18.04之后要做的事!!大全、详细教程!安装Ubuntu18.04之后的要做的事:1、更新源,使用软件更新器选择中国的服务器aliyun即可自动更新缓存,已经各种软件之后每天更新,shell更新:sudoaptupdatesudoaptupgrade2、安装vim、wget、curlsudoaptinstallvim配置十字光标:用户目录下vim.vimrc…

  • 如何用纯 CSS 创作条形图,不用任何图表库

    如何用纯 CSS 创作条形图,不用任何图表库

  • Java 类型信息详解和反射机制

    Java 类型信息详解和反射机制

    2020年11月19日

发表回复

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

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