精华内容
下载资源
问答
  • LayUI树形表格treetable使用详解

    万次阅读 多人点赞 2019-04-29 12:40:08
    LayUI是现在比较流行的一款前端框架,也有很多人基于LayUI开发了很多不错的组件,比如treetable树形表格。因为treetable是第三方基于LayUI开发的,所以需要先用Layui引入一下文件。 layui.config({ base : '...

    LayUI是现在比较流行的一款前端框架,也有很多人基于LayUI开发了很多不错的组件,比如treetable树形表格。因为treetable是第三方基于LayUI开发的,所以需要先用Layui引入一下文件。

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

    之后先看一下显示的效果。

    之后页面只需要引入LayUI的CSS和JS就可以了。

    页面给一个table标签,用于显示treetable中的数据样式。

    <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"><i class="layui-icon">&#xe654;</i>新增</button>
            <button class="layui-btn layui-btn-sm" lay-event="updata"><i class="layui-icon">&#xe642;</i>修改</button>
            <button class="layui-btn layui-btn-sm" lay-event="delete"><i class="layui-icon">&#xe640;</i>删除</button>
            <button class="layui-btn layui-btn-sm" lay-event="refresh"><i class="layui-icon">&#xe666;</i>刷新</button>
        </div>
    </script>

    JS请求加载数据及设置表格样式。

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

    其中URL地址为请求数据地址。后台对应的方法。

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

    list方法中的TbMenuForm接收类中的字段和实体类字段差不多。其中TreeTableModel返回类为返回数据格式的工具类。

    实体类TbMenu代码。

    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<TbMenu> 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<TbMenu> getChildren() {
            return children;
        }
    
        public void setChildren(List<TbMenu> children) {
            this.children = children;
        }
    
        public TbMenu(Integer id, String name, String url, String icon, double idx, TbMenu parent, List<TbMenu> 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();
        }
    }

    TbMenuForm接收类。

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

    返回数据格式TreeTableModel类。

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

    返回的JSON数据格式,这里需要注意的是parentId为父节点,需要和前面的JS中设置的属性值一样,没有父级节点parentId需要为0,不能为null。

    {
    	"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){})监听表格上面的工具类按钮点击事件。

    监听工具栏的新增修改删除和刷新按钮方法。

    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 === "refresh"){
            renderTable();
        }
    })

    其中obj.event值为点击工具栏按钮的lay-event属性值。

    新增和修改方法,先请求后台menu/edit获取到新增修改的页面,把页面用LayUI的layer弹框显示出来。这里新增和修改用的是一个方法和一个页面。修改时传递了一个id参数,用于查询修改的数据和区别新增还是修改。新增时如果选中了一行,会把当前行的id作为参数,传递到后台,相当于默认的父节点id。

    跳转到新增和修改页面的edit后台方法。如果修改就把当前修改的数据传递到前台,新增时,如果有选中的节点,就把选中节点的id作为父节点id传递到前台。

    @Override
    public void edit(TbMenuForm form, ModelMap map) throws InstantiationException, IllegalAccessException {
        TbMenu model = new TbMenu();
        Integer id = form.getId();
        if(id != null) {
            model = menuService.findById(id);
        }
        map.put("model", model);        //修改的对象,如果新增model就为null
        map.put("parentId", form.getParentId());    //父节点id
    }

    edit页面代码,上级菜单是用LayUI的TreeSelect做的,对于TreeSelect的用法,大家可以访问LayUI下拉树TreeSelect的使用

    <style type="text/css">
        .myData .layui-form-item{
            margin: 20px 100px 10px 45px;
        }
        .myData .layui-form-label{
            width: 80px;
        }
    </style>
    <form class="layui-form myData" action="save" method="post" lay-filter="stuform">
        <input type="hidden" name="id" data-th-value="${model.id}" />
    
    	<div class="layui-form-item">
            <label class="layui-form-label">上级菜单:</label>
            <div class="layui-input-block">
                <input type="text" name="parentId" id="tree" lay-filter="tree" 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="name" lay-verify="required" th:value="${model.name}" 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="url" th: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="icon" th:value="${model.icon}" 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" th:value="${model.idx}" class="layui-input" />
            </div>
        </div>
    </form>
    
    <script th:inline="javascript">
    	layui.use(["treeSelect", "form"], function () {
    		var form = layui.form;
            form.render('select');
    	    var treeSelect = layui.treeSelect;
    	    treeSelect.render({
    	        // 选择器
    	        elem: '#tree',
    	        // 数据
    	        data: 'menu/treeSelect?id='+[[${model.id==null ? 0 : model.id}]],
    	        // 异步加载方式:get/post,默认get
    	        type: 'post',
    	        // 占位符
    	        placeholder: '上级菜单',
    	        // 是否开启搜索功能:true/false,默认false
    	        search: true,
    	        // 一些可定制的样式
    	        style: {
    	            folder: {
    	                enable: true
    	            },
    	            line: {
    	                enable: true
    	            }
    	        },
    	        // 加载完成后的回调函数
    	        success: function (d) {
    				// 选中节点,根据id筛选
    	            treeSelect.checkNode('tree', [[${model.parent == null? parentId: model.parent.id}]]);
    				// 刷新树结构
    	           	treeSelect.refresh('tree');
    	        }
    	    });
    	});
    </script>
    

    menu/treeSelect加载TreeSelect数据。对于TreeSelect的用法,大家可以访问LayUI下拉树TreeSelect的使用

    @RequestMapping(value="/treeSelect")
    @ResponseBody
    public Object treeSelect(Integer id) {
        Sort sort = Sort.by("idx");    //排序
        Specification<TbMenu> spec = buildSpec1();    //查询条件,可以自行添加,对应的buildSpec1方法
        List<TbMenu> list = menuService.findAll(spec,sort);
        return buildTree(list, id);
    }
    
    private Object buildTree(List<TbMenu> list, Integer id) {
        List<HashMap<String, Object>> result=new ArrayList<>();
        for (TbMenu dept : list) {
            if(dept.getId() != id) {
                HashMap<String, Object> node=new HashMap<>();
                node.put("id", dept.getId());
                node.put("name",dept.getName());
                node.put("open", false);
                node.put("checked", false);
                if(dept.getChildren().size() != 0) {
                    node.put("children",buildTree(dept.getChildren(), id));
                }
                result.add(node);
            }
        }
        return result;
    }
    
    public Specification<TbMenu> buildSpec1() {
        Specification<TbMenu> specification = new Specification<TbMenu>() {
    
            private static final long serialVersionUID = 1L;
    
            @Override
            public Predicate toPredicate(Root<TbMenu> root, CriteriaQuery<?> query, CriteriaBuilder cb) {
                HashSet<Predicate> rules=new HashSet<>();
                Predicate parent = cb.isNull(root.get("parent"));    //添加父节点为空的条件,即查询最上级数据
                rules.add(parent);
                return cb.and(rules.toArray(new Predicate[rules.size()]));
            }
    
        };
        return specification;
    }

    页面显示效果。

    后台保存方法。

    @Override
    public Object save(TbMenuForm form) {
        try {
            TbMenu model = new TbMenu();
            Integer id = form.getId();
            if(id != null) {
                model = menuService.findById(id);
            }
            //父级菜单id
            Integer parentId = form.getParentId();
            if(parentId == null) {
                model.setParent(null);
            }else {
                model.setParent(new TbMenu(parentId));
            }
            BeanUtils.copyProperties(form, model,"id", "parent");
            menuService.save(model);
            return new AjaxResult("数据保存成功!");
        } catch (Exception e) {
            return new AjaxResult(false,"数据保存失败");
        }
    }

    AjaxResult类是一个请求完成返回的一个工具类。

    import java.util.HashMap;
    import org.springframework.data.domain.Page;
    
    public class AjaxResult {
    	private Boolean success;
    	private String msg;
    	
    	public Boolean getSuccess() {
    		return success;
    	}
    
    	public void setSuccess(Boolean success) {
    		this.success = success;
    	}
    
    	public String getMsg() {
    		return msg;
    	}
    
    	public void setMsg(String msg) {
    		this.msg = msg;
    	}
    	
    	public AjaxResult(String msg) {
    		super();
    		this.success=true;
    		this.msg = msg;
    	}
    	
    	public AjaxResult(Boolean success, String msg) {
    		super();
    		this.success = success;
    		this.msg = msg;
    	}
    	
    	public AjaxResult(boolean success) {
    		this.success=success;
    	}
    
    	@SuppressWarnings("rawtypes")
    	public static HashMap<String, Object> bulidPageResult(Page page) {
    		HashMap<String, Object> result=new HashMap<>();
    		result.put("total", page.getTotalElements());
    		result.put("rows", page.getContent());
    		return result;
    	}
    }

    新增和修改就完了,下面就是删除数据。删除需要先判断是否选中了一行。然后把选中行的id作为参数,传递到后台,根据id删除数据就可以了。

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

    最后一个就是刷新了,刷新只需要把表格刷新一下就可以了,调用一下表格刷新方法。

    renderTable();

    这里持久层框架用的Spring-Data-Jpa,但只要数据传递到后台了,怎么处理都差不多,请求的数据只要按照规定的JSON格式返回就可以了。后台方法代码上面基本的有,前台页面代码有些零散,下面是显示页面完整代码。

    <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>
            <button class="layui-btn layui-btn-sm" lay-event="updata"><i class="layui-icon">&#xe642;</i>修改</button>
            <button class="layui-btn layui-btn-sm" lay-event="delete"><i class="layui-icon">&#xe640;</i>删除</button>
            <button class="layui-btn layui-btn-sm" lay-event="refresh"><i class="layui-icon">&#xe666;</i>刷新</button>
        </div>
    </script>
    
    <table class="layui-hide" id = "menu" lay-filter="menu"></table>
    
    <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:'radio'},
                        {field: 'name', title: '菜单名称'},
                        {field: 'url' , title: '地址'},
                        {field: 'icon' , hide : true, title: '图标'},
                        {field: 'idx', title: '排序'}
                    ] ],
                    //数据渲染完的回调
                    done: function () {
                        //关闭加载
                        layer.closeAll('loading');
                    }
                })
            };
            renderTable();
    
            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 === "refresh"){
                    renderTable();
                }
            })
        })
    </script>
    

    推荐文章,LayUI树形结构tree的使用

    如果对你有帮助,点赞关注一下呗^_^,留下你的足迹。

    展开全文
  • layui树形表格

    2021-05-09 20:22:25
    使用到treetable树形表格,而treetable是第三方基于layui开发的所以要先引用layui的的文件。 treetable树形表格的效果图 2、引用treetable的路径。 layui.config({ //前面的文件名称路径 base: '${...

    树形表格

    1. 使用到treetable树形表格,而treetable是第三方基于layui开发的所以要先引用layui的的文件。

     

    treetable树形表格的效果图

     

    2、引用treetable的路径。

    layui.config({

            //前面的文件名称路径
            base: '${pageContext.request.contextPath}/statics/treetable/module/'
    }).extend({

        //倒数最后一个文件名的路径以及插件treetable.js的路径

       //只需要treetable.js的文件名treetable就可以了,不需要写到后缀.js
       treetable: '/treetable-lay/treetable'});

    1. Js的请求加载以及样式

    layui.config({
       base: '${pageContext.request.contextPath}/statics/treetable/module/'
    }).extend({
       treetable: '/treetable-lay/treetable'
    }).use(['table', 'treetable'], function () {
       var $ = layui.jquery;
       var table = layui.table;
       var treetable = layui.treetable;

       // 渲染表格
       var renderTable = function () {
          layer.load(1);
          treetable.render({
             size: 'lg', //尺寸
             treeColIndex: 0, //设置下拉箭头在第几列
             treeSpid: "0",   //最上级的父级id
             treeIdName: 'id', //id字段的名称(自己的id)
             treePidName: 'branchid', //pid字段的名称(父亲的id)
             treeDefaultClose: true, //是否默认折叠
             treeLinkage: false, //父级展开时是否自动展开所有子级
             elem: '#currentTableId', //表格的id

             //数据请求地址,用到跟路径(${pageContext.request.contextPath})返回json格式数据(映射路径
              url: '${pageContext.request.contextPath}/admin/menu/loadMenuTree',       

              page: false,
              cols: [[ //列数和列名可根据需要更改
                  {field: 'branchName', width:"40%",align:'left' , title: '名称'},
                  {field: 'id', align:'center', title: '联系人'},
                  {field: 'id', align:'center', title: '电话'},
                  {field: 'branchid',align:'center' , title: '排序'},
                  {toolbar: '#oper-col',align:'center', title: '操作'} //toolbar:工具条的id
                ]],
             done: function (d) {
                console.log(d)
                layer.closeAll('loading');
             }
          });
       };

    //调用树形表格
       renderTable();
    });

     

    Controller控制器的代码
    @RestController//全部返回JSON格式
    @RequestMapping("/admin/menu")
    public class MenuController {

    @Resource
    private MenuService menuService;


    @RequestMapping(value = "/loadMenuTree")
    public Map<String,Object> loadMenuTree(){
              Map<String,Object> map = new HashMap<String, Object>();
              //调用查询所有菜单列表的方法
             List<Employee> menuList =menuService.findEmployeeList();
             map.put("data",menuList);
             return map;
    }

    展开全文
  • layui 树形表格

    千次阅读 2019-07-03 11:54:40
    最近的一个项目,用layui里的表格要实现树形表格功能,去官网查找没有,最后在网上找了一位大神开发的插件—treeTable。 插件地址 演示地址:https://whvse.gitee.io/treetable-lay/ 项目地址:...

    最近的一个项目,用layui里的表格要实现树形表格功能,去官网查找没有,最后在网上找了一位大神开发的插件—treeTable。

    插件地址

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

    项目地址:https://gitee.com/whvse/treetable-lay

    使用方法按照文档介绍或者下载demo

    自己在此基础上实现了功能,效果如下:

    html文件

    <table id="layuiTable" lay-filter="test"></table>

    js文件

    layui.config({
    	base: '../../plugins/'
    }).extend({
    	treetable: 'treetable-lay/treetable'
    }).use(['layer', 'table', 'treetable'], function() {
    	var $ = layui.jquery;
    	var table = layui.table;
    	var layer = layui.layer;
    	var treetable = layui.treetable;
    
    	// 渲染表格
    	renderTable = function() {
    		layer.load(2);
    		treetable.render({
    			treeColIndex: 2,
    			treeSpid: 0,
    			treeIdName: 'deptId',
    			treePidName: 'parentId',
    			treeDefaultClose: true,
    			treeLinkage: false,
    			elem: '#layuiTable',
    			id: 'tableId',
    			url: baseURL + "sys/dept/list",
    			page: false,
    			cols: [
    				[{
    						type: 'radio'
    					},
    					{
    						field: 'deptId',
    						title: '部门ID'
    					},
    					{
    						field: 'name',
    						title: '部门名称'
    					},
    					{
    						field: 'parentName',
    						title: '上级部门'
    					},
    					{
    						field: 'parentId',
    						title: 'parentId'
    					},
    					{
    						field: 'orderNum',
    						title: '排序号'
    					}
    				]
    			],
    			done: function() {
    				layer.closeAll('loading');
    			}
    		});
    	};
    
    	renderTable();
    
    	//监听行单击事件(双击事件为:rowDouble)
    	table.on('row(test)', function(obj) { //注:test是table原始容器的属性 lay-filter="对应的值"
    		var data = obj.data;
    		selected = data;
    		//选中行样式
    		obj.tr.addClass('layui-table-click').siblings().removeClass('layui-table-click');
    		//选中radio样式
    		obj.tr.find('i[class="layui-anim layui-icon"]').trigger("click");
    	});
    
    
    });
    
    var renderTable;
    var selected;

     

    展开全文
  • Layui树形表格

    2020-06-11 17:18:08
    treeTable实现了layui数据表格的大部分功能,并且在用法上与几乎数据表格一致, 支持懒加载、复选框联动(半选)、拖拽列宽、固定表头等功能。 演示地址:https://whvse.gitee.io/treetable-lay/ 参考了作者的示例,...

    简介

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

    页面渲染效果

    数据库表

    展开全文
  • Layui树形表格treetable

    2018-12-13 19:41:30
    实现layui树形表格treeTable,在layui数据表格之上进行扩展实现,详细使用方法请参考压缩包中的README.md文件和实例.
  • C# Layui树形表格treetable(二)(前台请求路径,后台json返回数据) 作者:邱名涛 撰写时间:2020 年05 月15日 需求:Layui树形表格treetable加上筛选功能,并且显示指定宿舍,对应的床位数,入住人数。 html &...
  • C# Layui树形表格treetable(前台请求路径,后台json返回数据) 作者:邱名涛 撰写时间:2020 年05 月09日 需求:树形显示数据不美观,要显示点数据。。。嗯嗯,好的。 引入文件:注意路劲不要写错(不然一直是404...
  • layui树形表格的使用

    2021-05-24 09:11:33
    layui树形表格使用 前言 提示:这里可以添加本文要记录的大概内容: 例如:随着人工智能的不断发展,机器学习这门技术也越来越重要,很多人都开启了学习机器学习,本文就介绍了机器学习的基础内容。 提示:以下是...
  • layui 树形表格.rar

    2020-09-10 17:37:02
    利用layui实现的树形表格,从后台获取list数据,解析成json,实现对数据的增删改查。这功能写了一周,花了不少功夫,希望可以帮到大家。
  • LayUI 树形表格禁用复选框级联 我使用的是layui树形表格treeTable插件,路径:https://gitee.com/whvse/treetable-lay.git 增加红色框中的代码,含义是:如果页面传递过去的“noCascade”树形是true时,表示树形...
  • Layui树形表格.rar

    2020-06-11 17:17:33
    treeTable实现了layui数据表格的大部分功能,并且在用法上与几乎数据表格一致, 支持懒加载、复选框联动(半选)、拖拽列宽、固定表头等功能。
  • 转载layui树形表格

    千次阅读 2019-03-18 12:34:27
     实现layui树形表格treeTable 1.简介  在layui数据表格之上进行扩展实现。 演示地址:https://whvse.gitee.io/treetable-lay/  还有一个BOM表结构的树形表格树形表格2,欢迎查看。 2.使用方法 2.1.引入...
  • Layui树形表格组件的实现

    千次阅读 2020-05-07 11:44:31
    一、Layui树形组件:treetable.js 可在layui下创建一个文件夹保存组件的js代码,以便引用。 // 基于layui table的树形表格实现,只支持页面仅有一个表格的情况 layui.define(['table', 'util'], function(exports) ...
  • layui 树形表格 treeTable 插件使用post请求,并带请求头token摘要html代码js代码结果小结 摘要 请求携带token其实在使用前端框架就需要考虑到,不然后续会花费额外时间去处理token问题,当然,像layui登录后的token...
  • layui树形表格treeTable

    2020-02-20 12:50:03
    演示地址:https://whvse.gitee.io/treetable-lay/ 项目地址:https://gitee.com/whvse/treetable-lay 转载https://fly.layui.com/jie/30625/
  • layui 树形表格—优化加载速度

    千次阅读 2019-09-10 14:44:59
    项目中要用layui树形表格实现某个功能,之前用了一种办法,但是当数据量比较大的时候(一次性返回了省市县所有的数据,大概4000条),加载速度比较慢,无奈又换了一种实现办法。 之前实现的方法:...
  • LayUI树形表格treetable使用踩坑记录

    千次阅读 2020-10-26 17:42:24
    treetable渲染方式采用url方式渲染,根据文档,渲染树形表格时,需要指定是否是id,pid形式数据。 <table id="demoTreeTb"></table> <script> layui.use(['treeTable'], function () { var
  • 最近在写一个商品分类管理的功能,本来想用layui的树形组件来写,但发现layui原生的tree只能展示title,而分类的其他字段无法展示,这就有点不适用了,无意中看到一位大神自定义写的一个树形表格组件,正好满足我的...
  • 属性表格,主要是引入了下面的JS,文档里面也很详细 下载地址:https://gitee.com/whvse/treetable-lay 案例地址:https://whvse.gitee.io/treetable-lay/demo/ 文档地址:...
  • 需求:对下列树形表格的列数据进行合计 json数据如下: { "msg":"ok", "code":0, "data":[ {"id":44,"uid":null,"groupid":0,"roleName":"镇第一人民医院","roleDesc":"小市镇","permissionIds":null,...

空空如也

空空如也

1 2 3 4 5
收藏数 96
精华内容 38
关键字:

layui树形表格