简介
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"></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();
}
}
页面渲染效果
数据库表