LayUI树形表格treetable使用及说明_javascript技巧_

layui.config({ base : 'static/layui/' }).extend({ treetable : 'treetable-lay/treetable' });

yui.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', //父级节点字段 treeDefaultClose: false, //是否默认折叠 treeLinkage: false, //父级展开时是否自动展开所有子级 elem: '#menu', //表格id url: 'menu/treedata', toolbar: '#toolbarDemo', page: false, cols: [ [ {type:'radio'}, {field: 'name', title: '菜单名称'}, {field: 'url' , title: '地址'}, {field: 'icon' , hide : true, title: '图标'}, {field: 'idx', title: '排序'} ] ], //数据渲染完的回调 done: function () { //关闭加载 layer.closeAll('loading'); } }) }; renderTable(); });

@RequestMapping(value="/treedata") @ResponseBody public Object list(TbMenuForm form){ Sort sort = bulidSort(); //排序 Specification spec = buildSpec(form); //查询条件 List list = menuService.findAll(spec, sort); return new TreeTableModel(list); } public Sort bulidSort() { return Sort.by("idx"); //按idx字段排序 } public Specification buildSpec(TbMenuForm form){ return null; }

import com.fasterxml.jackson.annotation.JsonIgnore; import org.springframework.data.annotation.CreatedBy; import javax.persistence.*; import java.util.ArrayList; import java.util.List; @Entity public class TbMenu { private Integer id; private String name; //菜单名称 private String url; //路径 private String icon; //图标 private double idx; //排序 @JsonIgnore private TbMenu parent; @JsonIgnore private List children=new ArrayList<>(); @Id @GeneratedValue public Integer getId() { return id; } public void setId(Integer id) { this.id = id; } 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 String getIcon() { return icon; } public void setIcon(String icon) { this.icon = icon; } public double getIdx() { return idx; } public void setIdx(double idx) { this.idx = idx; } @ManyToOne @CreatedBy public TbMenu getParent() { return parent; } public void setParent(TbMenu parent) { this.parent = parent; } @OneToMany(cascade=CascadeType.ALL,mappedBy="parent") @OrderBy(value="idx") public List getChildren() { return children; } public void setChildren(List children) { this.children = children; } public TbMenu(Integer id, String name, String url, String icon, double idx, TbMenu parent, List children) { this.id = id; this.name = name; this.url = url; this.icon = icon; this.idx = idx; this.parent = parent; this.children = children; } public TbMenu(Integer id) { this.id = id; } public TbMenu() { } @Transient public Integer getParentId() { return parent==null? 0 : parent.getId(); } }

 public class TbMenuForm { private Integer id; private String name; //菜单名称 private String url; //路径 private String icon; //图标 private double idx; //排序 private Integer parentId; //父节点id public Integer getId() { return id; } public void setId(Integer id) { this.id = id; } 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 String getIcon() { return icon; } public void setIcon(String icon) { this.icon = icon; } public double getIdx() { return idx; } public void setIdx(double idx) { this.idx = idx; } public Integer getParentId() { return parentId; } public void setParentId(Integer parentId) { this.parentId = parentId; } }

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; } }

{ "code": 0, "msg": "ok", "count": 6, "data": [ { "id": 1, "name": "系统设置", "url": "", "icon": "", "idx": 1.0, "parentId": 0 //最上级节点，父节点为0 }, { "id": 2, "name": "角色管理", "url": "", "icon": "", "idx": 1.0, "parentId": 1 //上级节点 }, { "id": 6, "name": "数据表格", "url": "", "icon": "", "idx": 1.0, "parentId": 5 }, { "id": 3, "name": "部门管理", "url": "", "icon": "", "idx": 2.0, "parentId": 1 }, { "id": 5, "name": "表格案例", "url": "", "icon": "", "idx": 2.0, "parentId": 0 }, { "id": 7, "name": "树形表格", "url": "", "icon": "", "idx": 2.0, "parentId": 5 } ] }

table.on('toolbar(menu)', function(obj){ var checkStatus = table.checkStatus('menu'); var data = checkStatus.data; if(obj.event === 'add'){ var parentId = data.length==0? 0 : data[0].id; $.get('menu/edit', {parentId: parentId}, function(data){ layer.open({ type: 1, title: '新增', area: ['530px'], content: data, btn: ['提交', '退出'], yes:function(){ }, 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'){ 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'], content: data, btn: ['提交', '退出'], yes:function(){ }, 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"){ 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 =
                
提示：
                    本文由神整理自网络，如有侵权请联系本站删除！
                    

                    本站声明： 

                    1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持； 

                    2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！
                
                

                

                                            
上一篇：layui table checked获取选中数据方式_javascript技巧_
                                                                
下一篇：LayUI—tree树形结构的使用解析_javascript技巧_