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)


相关推荐

  • 硬阈值(Hard Thresholding)函数解读[通俗易懂]

    硬阈值(Hard Thresholding)函数解读[通俗易懂]题目:硬阈值(HardThresholding)函数解读1、硬阈值(HardThresholding)函数的符号    硬阈值(HardThresholding)并没有软阈值(SoftThresholding)那么常见,这可能是因为硬阈值解决的问题是非凸的原因吧。硬阈值与软阈值由同一篇文献提出,硬阈值公式参见文献【1】的式(11):     第一次邂逅硬阈值

  • 手机设备上touchstart与click的区别

    手机设备上touchstart与click的区别1.基本定义touchstart手指触碰开始就能触发click1.手指触碰2.手指未在屏幕上移动3.在这个dom上手指离开屏幕4.触摸和离开屏幕之间的时间间隔较短因此,click事件有其独特的地方,不能完全用touchstart替代。2.click延时问题因为手机浏览器上,两次轻触是放大操作,在第一次被轻触后,浏览器需要先等一段时间,检…

  • 学习笔记——STM32摄像头OV7725(二)

    学习笔记——STM32摄像头OV7725(二)AL422B及摄像头驱动原理一、AL422B简介STM32F4系列的控制器主频高、一般会扩展外部SRAM、SDRAM等存储器,且具有DCMI外设,可以直接根据VGA时序接收并存储摄像头输出的图像数据;而STM32F1系列的控制器一般主频较低、为节省成本可能不扩展SRAM存储器,而且不具DCMI外设,难以直接接收和存储OV7725图像传感器输出的数据。为了针对上述…

  • idea 2021激活码破解方法

    idea 2021激活码破解方法,https://javaforall.cn/100143.html。详细ieda激活码不妨到全栈程序员必看教程网一起来了解一下吧!

  • pycharm虚拟环境与本地环境区别_python如何激活虚拟环境

    pycharm虚拟环境与本地环境区别_python如何激活虚拟环境    Python的版本众多,在加上适用不同版本的PythonPackage。这导致在同时进行几个项目时,对库的依赖存在很大的问题。这个时候就牵涉到对Python以及依赖库的版本管理,方便进行开发,virtualenv就是用来解决这个问题的。下面介绍使用PyCharm创建VirtualEnvironment的方法。    PyCharm可以使用virtualenv中的功能来创建虚拟环境。Py…

  • sqlSessionTemplate的优点

    sqlSessionTemplate的优点sqlSessionTemplate的优点 1.sqlSessionTemplate里面有一个sqlSessionProxy,可以使用动态代理 2.正因为动态代理,invoke方法里面会根据是否是事务,获取相同或不同的sqlSession,最后这个sqlSession去执行目标方法和关闭这个sqlSession 这样可以符合spring单例的特点,为不同的事务或conn,创建不同的sqlSession 如果直接在spring中注册一个sqlSession,那么不同连接都获得相

发表回复

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

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