Layui树形表格_layui treetable-CSDN博客

本文链接：https://blog.csdn.net/dwenxue/article/details/106692737

简介

treeTable实现了layui数据表格的大部分功能，并且在用法上与几乎数据表格一致，支持懒加载、复选框联动(半选)、拖拽列宽、固定表头等功能。

演示地址：https://whvse.gitee.io/treetable-lay/

参考了作者的示例，进行了一些改造。

前端代码

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>分类列表</title>
<link rel="stylesheet" href="static/layui/css/layui.css" media="all" />
<link rel="stylesheet" href="static/css/public.css" media="all">
<script type="text/javascript" src="static/layui/layui.js"></script>
</head>
<body>
<div class="layuimini-container">
    <div class="layuimini-main">
	<table id="demoTreeTb" ></table>
	<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-group">
        <button class="layui-btn layui-btn-sm" lay-event="add"><i class="layui-icon">&#xe654;</i>新增</button>		
    </div>
	</script>
	<script>
	    layui.config({
	        base: 'static/js/'
	    }).use(['treeTable'], function () {
	        var $ = layui.jquery;
	        var treeTable = layui.treeTable;
	        $('body').removeClass('layui-hide');
	
	        // 渲染表格
	        treeTable.render({
	            elem: '#demoTreeTb',
	            url: 'getTypeList',
	            toolbar: '#toolbarDemo',
	            tree: {
	                iconIndex: 2,
	                isPidData: true,
	                idName: 'typeId',
	                pidName: 'parentId',
	                arrowType: 'arrow2',
	                getIcon: 'ew-tree-icon-style2'
	            },
	            cols: [[
	                {type: 'numbers',title: 'ID',minWidth: 100},
	                {type: 'checkbox'},
	                {field: 'typeName', title: '分类名称', minWidth: 165},
	                {fixed: 'right', width:150, align:'center', toolbar: '#barDemo'}
	            ]],
	            style: 'margin-top:0;'
	        });
			
	     	// 头部工具栏点击事件
	        treeTable.on('toolbar(demoTreeTb)', function (obj) {
	            switch (obj.event) {
	                case 'add':
	                	layer.open({							
	    					type : 2,
	    					title : '添加',
	    					shadeClose : true,
	    					shade : false,
	    					maxmin : true, //开启最大化最小化按钮
	    					offset: '100px',
	    					area : [ '650px', '300px' ],
	    					content : 'addType'
	    				});
	                    break;               
	            }
	        });
	        
	     	// 工具列点击事件
	        treeTable.on('tool(demoTreeTb)', function (obj) {
	            var event = obj.event;
	            var id = obj.data.typeId;
	            if (event === 'del') {
	            	layer.confirm('确定要删除吗？', {
				        btn: ['确定', '取消']
				    }, function () {
				    	location.href="deleteCompany?id="+id;     //加入这个信息点击确定 会关闭这个消息框					    	 
				    }, function () {
				        layer.closeAll('dialog');  //加入这个信息点击确定 会关闭这个消息框
				        layer.msg("取消了");
				    });
	            } else if (event === 'edit') {
	            	layer.open({							
						type : 2,
						title : '编辑',
						shadeClose : true,
						shade : false,
						maxmin : true, //开启最大化最小化按钮
						offset: '100px',
						area : [ '500px', '300px' ],
						content : 'getType?id='+id
					});
	            }
	        });
	     	// 全部展开
	        $('#btnExpandAll').click(function () {
	            insTb.expandAll();
	        });
	     // 全部折叠
	        $('#btnFoldAll').click(function () {
	            insTb.foldAll();
	        });
	    });
	</script>
	<script type="text/html" id="barDemo">
  		<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  		<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
	</script>
	
		
	</div>
</div>		
</body>
</html>

后端代码

public class TypeController {
	@Resource
	private TypeService typeService;
	@Resource
	private GoodsService goodsService;
	private static final Logger logger = LoggerFactory.getLogger(TypeController.class.getName());
	
	// 查询列表
	@RequestMapping("getTypeList")
	@ResponseBody
	public String getTypeList() {
		int count = typeService.count();
		List<Type> list = typeService.getAll();
		String s = JSON.toJSONString(list);
		logger.info(s);
		JSONObject obj = new JSONObject();
		// 前台通过key值获得对应的value值
		obj.put("code", 0);
		obj.put("msg", "");
		obj.put("count", count);
		obj.put("data", list);
		return obj.toJSONString();
	}
}

页面渲染效果