Layui树形表格

客官°小女子只卖身不卖艺 2023-02-17 03:11 8阅读 0赞

简介

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

演示地址：[https://whvse.gitee.io/treetable-lay/][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"></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();
    	}
    }

页面渲染效果

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2R3ZW54dWU_size_16_color_FFFFFF_t_70][]

数据库表

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2R3ZW54dWU_size_16_color_FFFFFF_t_70 1][]

[https_whvse.gitee.io_treetable-lay]: https://whvse.gitee.io/treetable-lay/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2R3ZW54dWU_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200611170844797.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2R3ZW54dWU=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2R3ZW54dWU_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200611170937831.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2R3ZW54dWU=,size_16,color_FFFFFF,t_70