layUI展示treetable树形表格（完整代码）
layui官网是没有treetable这一块的，所以需要先下载treetable的js和css插件。
下载地址：https://pan.baidu.com/s/1U2BOXDg3K66qJBQKiJ0UGw
提取码：pnj3
先来看一下效果：
以为js和css是自己引入的，所以需要引入一下路径
layui.config({
base : 'static/layui/'
}).extend({
treetable : 'treetable-lay/treetable',
});页面部分主要代码（含js）：
<table class="layui-hide" id = "menu" lay-filter="menu"></table>
<script type="text/html" id="toolbarDemo">
<div class="layui-btn-group">
<button class="layui-btn layui-btn-sm" lay-event="add_lay"><i class="layui-icon"></i>新增</button>
<button class="layui-btn layui-btn-sm" lay-event="updata_lay"><i class="layui-icon"></i>修改</button>
<button class="layui-btn layui-btn-sm" lay-event="delete_lay"><i class="layui-icon"></i>删除</button>
<button class="layui-btn layui-btn-sm" lay-event="refresh_lay"><i class="layui-icon"></i>刷新</button>
</div>
</script>
<script type="text/javascript">
layui.use(['treetable', 'table', 'layer'], function () {
var table = layui.table;
var layer = layui.layer;
var treetable = layui.treetable;
//渲染表格
var renderTable = function(){
layer.load(2);
treetable.render({
height:'full-160',
id:'menu',
treeColIndex: 1, //树形图标显示在第几列
treeSpid: '0', //最上级的父级id
treeIdName: 'id', //id字段的名称
treePidName: 'parentId', //pid字段的名称，父级菜单id
treeDefaultClose: false, //是否默认折叠
treeLinkage: false, //父级展开时是否自动展开所有子级
elem: '#menu', //表格id
url: 'menu/treedata',
toolbar: '#toolbarDemo',
page: false,
cols: [[
{type:'checkbox'},
{field: 'name', title: '名称'},
{field: 'url' , title: '地址'},
{field: 'role', title: '权限', templet: function(d){
return d.role?d.role.name:'';
}
},
{field: 'idx', title: '排序'}
]],
//数据渲染完的回调
done: function () {
//关闭加载
layer.closeAll('loading');
}
})
};
renderTable();
table.on('toolbar', function(obj){
var checkStatus = table.checkStatus('menu');
var data = checkStatus.data;
if(obj.event === 'add_lay'){
if(data.length > 1){
layer.msg("请选择一行作为父级菜单",{offset:'rb'});
}else{
var id = data.length==1?data[0].id: '';
$.get('menu/edit', {parentId: id}, function(data){
layer.open({
type: 1,
title: '新增',
area: ['530px', '550px'],
content: data,
btn: ['提交', '退出'],
success:function(layero,index){
layui.use('form',function(){
var form=layui.form;
layero.addClass('layui-form');
var submitBtn=layero.find('.layui-layer-btn0');
submitBtn.attr('lay-filter','formVerify').attr('lay-submit','');
layero.keydown(function(e){
if(e.keyCode==13){
submitBtn.click();
}
});
form.on('submit(formVerify)',function(data){
$.post('menu/save',data.field,function(result){
if(result.success){
layer.close(index);
//刷新，重新渲染表格
renderTable();
}
layer.msg(result.msg,{offset:'rb'});
});
return false;
});
});
}
})
})
}
}else if(obj.event === "updata_lay"){
if(data.length != 1){
layer.msg("请选择一行进行编辑",{offset:'rb'});
}else{
var id = data[0].id;
$.get('menu/edit', {id: id}, function(data){
layer.open({
type: 1,
title: '修改',
area: ['530px', '550px'],
content: data,
btn: ['提交', '退出'],
success:function(layero,index){
layui.use('form',function(){
var form=layui.form;
layero.addClass('layui-form');
var submitBtn=layero.find('.layui-layer-btn0');
submitBtn.attr('lay-filter','formVerify').attr('lay-submit','');
layero.keydown(function(e){
if(e.keyCode==13){
submitBtn.click();
}
});
form.on('submit(formVerify)',function(data){
$.post('menu/save',data.field,function(result){
if(result.success){
layer.close(index);
//刷新，重新渲染表格
renderTable();
}
layer.msg(result.msg,{offset:'rb'});
});
return false;
});
});
}
})
})
}
}else if(obj.event === "delete_lay"){
if(data.length != 1){
layer.msg("请选择一行进行编辑",{offset:'rb'});
}else{
var id = data[0].id;
layer.confirm('真的删除选定行的数据吗?', function(index){
$.post('menu/delete',{id:id},function(result){
if(result.success){
layer.close(index);
renderTable();
}
layer.msg(result.msg,{offset:'rb'});
});
});
}
}else if(obj.event === "refresh_lay"){
renderTable();
}
})
})
</script>新增和修改部分代码：
<style type="text/css">
.layui-form-item{
margin: 20px 100px 10px 45px;
}
</style>
<form class="layui-form" action="save" method="post" lay-filter="stuform" style="margin-bottom: 20px;">
<input type="hidden" name="id" value="${model.id}">
<input type="hidden" name="parentId" value="${model.parent.id}">
<div class="layui-form-item">
<label class="layui-form-label">名称：</label>
<div class="layui-input-block">
<input type="text" name="name" value="${model.name}" class="layui-input" />
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">权限：</label>
<div class="layui-input-block">
<select name="role.id">
<option value="" style="display: none;"></option>
<c:forEach items="${roles}" var="role">
<option value="${role.id}" ${model.role.id==role.id?'selected':''}>${role.name}</option>
</c:forEach>
</select>
</div>
</div>
<div class="layui-form-item" >
<label class="layui-form-label">地址：</label>
<div class="layui-input-block">
<input type="text" name="url" value="${model.url}" class="layui-input" />
</div>
</div>
<div class="layui-form-item" >
<label class="layui-form-label">排序：</label>
<div class="layui-input-block">
<input type="text" name="idx" value="${model.idx}" class="layui-input" />
</div>
</div>
</form>
<script type="text/javascript">
form = layui.form;
form.render('select');
</script>实体类代码：
public class TbMenu extends BaseEntity<Integer> {
private String name; //菜单名称
private String url; //路径
private Integer idx; //排序
@JsonIgnore
private TbMenu parent; //父级菜单
private Permission role; //权限
//下级菜单
@JsonIgnore
private List<TbMenu> children = new ArrayList<>();
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getUrl() {
return url;
}
public void setUrl(String url) {
this.url = url;
}
public Integer getIdx() {
return idx;
}
public void setIdx(Integer idx) {
this.idx = idx;
}
@ManyToOne
@CreatedBy
public TbMenu getParent() {
return parent;
}
public void setParent(TbMenu parent) {
this.parent = parent;
}
@ManyToOne
@CreatedBy
public Permission getRole() {
return role;
}
public void setRole(Permission role) {
this.role = role;
}
@OneToMany(cascade=CascadeType.ALL,mappedBy="parent")
@OrderBy(value="idx")
public List<TbMenu> getChildren() {
return children;
}
public void setChildren(List<TbMenu> children) {
this.children = children;
}
public TbMenu(Integer id, String createName, String createDate, String name, String url, Integer idx, TbMenu parent,
Permission role, List<TbMenu> children) {
super(id, createName, createDate);
this.name = name;
this.url = url;
this.idx = idx;
this.parent = parent;
this.role = role;
this.children = children;
}
public TbMenu() {
super();
// TODO Auto-generated constructor stub
}
public TbMenu(Integer id, String createName, String createDate) {
super(id, createName, createDate);
// TODO Auto-generated constructor stub
}
public TbMenu(Integer id) {
super(id);
// TODO Auto-generated constructor stub
}
//父级菜单id
@Transient
public Integer getParentId() {
return parent==null? 0 :parent.getId();
}
}返回json格式工具栏：
public class TreeTableModel {
private Integer code=0;
private String msg="ok";
private Integer count;
private List data;
public Integer getCode() {
return code;
}
public void setCode(Integer code) {
this.code = code;
}
public String getMsg() {
return msg;
}
public void setMsg(String msg) {
this.msg = msg;
}
public Integer getCount() {
return count;
}
public void setCount(Integer count) {
this.count = count;
}
public List getData() {
return data;
}
public void setData(List data) {
this.data = data;
}
public TreeTableModel() {
super();
// TODO Auto-generated constructor stub
}
public TreeTableModel(Integer code, String msg, Integer count, List data) {
super();
this.code = code;
this.msg = msg;
this.count = count;
this.data = data;
}
public TreeTableModel(List data) {
super();
this.count=data.size();
this.data = data;
}
}后台业务处理代码（删除，刷新，跳转页面是继承公共的，也很简单，所以这里就不展示了）：
@Controller
@RequestMapping(value="/menu")
public class MenuController extends CommonController<TbMenu, Integer, TbMenuForm> {
@Autowired
private MenuService mService;
@Autowired
private PermissionService pService;
@Override
public void edit(TbMenuForm form, ModelMap map) throws InstantiationException, IllegalAccessException {
TbMenu model = new TbMenu();
Integer id = form.getId();
Integer parentId = form.getParentId(); //父级id
if(id != null) {
model = mService.findById(id);
parentId = model.getParentId();
}
if(parentId != null) { //父级id
TbMenu parent = mService.findById(parentId);
model.setParent(parent);
}
map.put("model", model);
List<Permission> permissions = pService.findAll(Sort.by("idx"));
map.put("roles", permissions);
}
@Override
public Object save(TbMenuForm form) {
try {
TbMenu model = new TbMenu();
Integer id = form.getId();
if(id != null) {
model = mService.findById(id);
}
//父级菜单id
Integer parentId = form.getParentId();
if(parentId == null) {
model.setParent(null);
}else {
model.setParent(new TbMenu(parentId));
}
//权限id
Integer roleId = form.getRole().getId();
if(roleId == null) {
model.setRole(null);
}else {
Permission role = pService.findById(roleId);
model.setRole(role);
}
BeanUtils.copyProperties(form, model,"id","role","parent");
mService.save(model);
return new AjaxResult("数据保存成功！");
} catch (Exception e) {
return new AjaxResult(false,"数据保存失败");
}
}
@RequestMapping(value="/treedata")
@ResponseBody
public Object treedata() {
Sort sort = Sort.by("idx");
List<TbMenu> list = mService.findAll(sort);
return new TreeTableModel(list);
}
}