BootStrap-Table-Treegrid树形表格使用指南

快来打我* 2023-06-25 10:12 10阅读 0赞

### BootStrap-bable-treegrid ###

Bootstrap是目前很流行的一款前端框架，也有很多第三方基于Bootstrap开发出了很多跟实用性的一些功能，比如BootStrap-bable-treegrid树形表格。树形表格在开发中应该是很常用到的。

**引入样式文件**

其中combotree.js是自己写的一个js文件，用于下拉树显示。下面附有代码。

页面部分代码（页面只需要一个table标签用于存放数据就可以了，可以自定义一些操作表格的按钮，比如增删改）。

<div id="toolbar" class="btn-group">
        <button type="button" class="btn btn-default" onclick="btn_add()">
            <span class="glyphicon glyphicon-plus"></span>新增
        </button>
        <button type="button" class="btn btn-default" onclick="btn_edit()">
            <span class="glyphicon glyphicon-pencil"></span>修改
        </button>
        <button type="button" class="btn btn-default" onclick="btn_delete()">
            <span class="glyphicon glyphicon-remove"></span>删除
        </button>
    </div>
    
    <table id="menu_table"></table>

JS部分代码，获取数据，渲染表格，其中的字段名需要和实体类中的字段名一样。

后台响应请求数据方法。

@RequestMapping(value="/list")
    @ResponseBody
    public Object list(TablePageable pageParam,TbMenuForm form) {
    	Sort sort = pageParam.bulidSort();     //排序
    	Specification<TbMenu> spec = buildSpec(form);    //配置查询参数
    	return baseService.findAll(spec,sort);
    }

方法中TablePageable类是用于接收Bootstrap表格分页和排序参数的一个工具类，类中的bulidSort方法是指定排序字段和排序规则。

import org.springframework.data.domain.PageRequest;
    import org.springframework.data.domain.Sort;
    import org.springframework.data.domain.Sort.Direction;
    import org.springframework.data.domain.Sort.Order;
    
    /**
     * 分页的一个工具类，接收分页信息
     */
    public class TablePageable{
    	private Integer limit; //分页
    	private Integer offset;//首记录号（从0开始）
    	private String sort;   //排序字段
    	private String order;  //顺序，逆序
    	
    	public Integer getLimit() {
    		return limit;
    	}
    
    	public void setLimit(Integer limit) {
    		this.limit = limit;
    	}
    
    	public Integer getOffset() {
    		return offset;
    	}
    
    	public void setOffset(Integer offset) {
    		this.offset = offset;
    	}
    
    	public String getSort() {
    		return sort;
    	}
    
    	public void setSort(String sort) {
    		this.sort = sort;
    	}
    
    	public String getOrder() {
    		return order;
    	}
    
    	public void setOrder(String order) {
    		this.order = order;
    	}
    
    	
    	public PageRequest bulidPageRequest() {
    		int page=(offset!=null&&limit!=null)?offset/limit:0;
    		int size=limit!=null?limit:10;
    		if(sort==null) {
    			return PageRequest.of(page, size);
    		}else {
    			Order order2=new Order(Direction.fromString(order), sort);
    			Sort sort2= Sort.by(order2);
    			return PageRequest.of(page,size,sort2 );
    		}
    		
    	}
    	
    	public PageRequest bulidPageable(Sort sort) {
    		int page=(offset!=null&&limit!=null)?offset/limit:0;
    		int size=limit!=null?limit:10;
    		return PageRequest.of(page, size, sort);
    	}
    	
    	public Sort bulidSort() {
    		Order order2=new Order(Direction.fromString(order), sort);
    		Sort sort2= Sort.by(order2);
    		return sort2;
    	}
    }

这里持久层查询是用的Spring-Data-Jpa，如果是其他持久层框架，只要查询后返回的JSON数据格式一致就可以了。

JSON数据格式如下，parentId为父节点Id，和前面js中设置的一定要对应一样，不然树形结构显示不出来。

**注意：**如果父节点为空，parentId的值需要为null，不能为""空串，一个parentId类型为Integer类型，为空串的话，树形结构显示不出来。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjA1MTE2_size_16_color_FFFFFF_t_70][]

加载完成后数据显示的效果如下。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjA1MTE2_size_16_color_FFFFFF_t_70 1][]

实体类代码。

import com.fasterxml.jackson.annotation.JsonIgnore;
    import com.mcy.springbootsecurity.custom.BaseEntity;
    import org.springframework.data.annotation.CreatedBy;
    import javax.persistence.*;
    import java.util.ArrayList;
    import java.util.List;
    
    /**
     * 菜单表
     * @author
     *
     */
    @Entity
    public class TbMenu {
        private Integer id;
    	private String name;
    	private String url;
    	private Integer idx;
    	@JsonIgnore
    	private TbMenu parent;
    	@JsonIgnore
    	private List<TbMenu> children=new ArrayList<>();
    
        @Id
        @GeneratedValue(strategy = GenerationType.IDENTITY)
        public Integer getId() {
            return id;
        }
     
        public void setId(Integer id) {
            this.id = id;
        }
    
    
    	@Column(unique=true)
    	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;
    	}
    
    	@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) {
    		super(id);
    	}
    
    	public TbMenu(){
    		super();
    	}
    
    	public TbMenu(String name, String url, Integer idx, TbMenu parent, List<TbMenu> children) {
    		this.name = name;
    		this.url = url;
    		this.idx = idx;
    		this.parent = parent;
    		this.children = children;
    	}
    
    	public TbMenu(Integer integer, String name, String url, Integer idx, TbMenu parent, List<TbMenu> children) {
    		super(integer);
    		this.name = name;
    		this.url = url;
    		this.idx = idx;
    		this.parent = parent;
    		this.children = children;
    	}
    
    	@Transient
    	public Integer getParentId() {
    		return parent==null?null:parent.getId();
    	}
    }

新增和修改方法，前台JS代码（因为新增和修改是共用的一个页面和一个方法，所以这里放一起写了）。

//新增
    function btn_add(){
        var selectRows = $table.bootstrapTable('getSelections');
        var dialog = $('<div class="modal fade" id="myModal" tabindex="-1" aria-labelledby="myModalLabel"></div>');
        if(selectRows&&selectRows.length==1){
            var parentId=selectRows[0].id;
            dialog.load('menu/edit',{parentId:parentId});
        }else{
            dialog.load('menu/edit');
        }
        $("body").append(dialog);
        dialog.modal().on('hidden.bs.modal', function () {
            dialog.remove();
            $table.bootstrapTable('refresh');
        });
    }
    
    //修改
    function btn_edit(){
        var str = $("#menu_table").bootstrapTable('getSelections');
        if(str.length != 1){
            bootbox.alert("请选中一行进行编辑");
            return ;
        }
    
        var dialog = $('<div class="modal fade" id="myModal" tabindex="-1" aria-labelledby="myModalLabel"></div>');
        var id = str[0].id;
        dialog.load("menu/edit?id="+id);
        /*添加到body中*/
        $("body").append(dialog);
        /*弹出模态框,绑定关闭后的事件*/
        dialog.modal().on('hidden.bs.modal', function () {
            //删除模态框
            dialog.remove();
            $table.bootstrapTable('refresh');
        });
    }

新增和修改的后台请求方法，跳转到新增修改页面，通过id来判断是修改还是新增，parentId判断新增时是否勾选行，勾选后为默认父级。

@Override
    public void edit(TbMenuForm form, ModelMap map) throws InstantiationException, IllegalAccessException {
        TbMenu model = new TbMenu();
        if(form.getId() != null) {
            model = menuService.findById(form.getId());
        }
        if(form.getParentId() != null) {
            model.setParent(new TbMenu(form.getParentId()));
        }
        map.put("model", model);
    }

新增修改页面代码

JS部分代码。

页面初始化后，加载Combotree下拉树的数据，并初始化，后台Combotree数据请求方法，如果是修改，就把当前修改项的id传递到后台，代码如下。

/***
     * combotree树形加载
     * @return
     */
    @RequestMapping(value="/treedata")
    @ResponseBody
    public Object treedata(Integer id) {
        Sort sort = Sort.by("idx");
        Specification<TbMenu> spec = 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) {
                //因为实体类中的字段名和需要返回的JSON字段名不同，这里需要转换一下
                HashMap<String, Object> node=new HashMap<>();
                node.put("id", dept.getId());
                node.put("text",dept.getName());
                node.put("pid", dept.getParentId());
                node.put("nodes",buildTree(dept.getChildren(), id));
                result.add(node);
            }
        }
        return result;
    }
    
    //条件查询，先只显示最上级的菜单，即parent父级节点为空的数据
    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;
    }

这里持久层查询是用的Spring-Data-Jpa，如果是其他持久层框架，只要查询后返回的JSON数据格式一致就可以了。

响应请求数据返回的JSON格式数据，pid为父节点id。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjA1MTE2_size_16_color_FFFFFF_t_70 2][]

Combotree下拉树，在前面还引入了一个自己写的combotree.js文件，代码如下。

保存JS中的btnSubmit()方法用于保存数据方法，后台保存响应方法。

@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,"数据保存失败");
        }
    }

方法中TbMenuForm接收类，中字段和实体类差不多。代码如下。

import com.mcy.springbootsecurity.custom.BaseForm;
    import com.mcy.springbootsecurity.entity.TbMenu;
    
    public class TbMenuForm {
        private Integer id;
        private String name;
        private String url;
        private Integer idx;
        private TbMenu parent;
        private Integer parentId;
    
        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 Integer getIdx() {
            return idx;
        }
    
        public void setIdx(Integer idx) {
            this.idx = idx;
        }
    
        public TbMenu getParent() {
            return parent;
        }
    
        public void setParent(TbMenu parent) {
            this.parent = parent;
        }
    
        public Integer getParentId() {
            return parentId;
        }
    
        public void setParentId(Integer parentId) {
            this.parentId = parentId;
        }
    }

AjaxResult为方法执行完，返回的一个类，这个可以自己随便返回一个字符串就可以，用于前台判断是否保存成功，代码如下。

import org.springframework.data.domain.Page;
    import java.util.HashMap;
    
    /**
     * 方法执行成功后，返回的工具类
     */
    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;
    	}
    
    	@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;
    	}
    	
    }

新增和修改效果展示。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjA1MTE2_size_16_color_FFFFFF_t_70 3][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjA1MTE2_size_16_color_FFFFFF_t_70 4][]

最后就剩下删除了，删除也是最简单的。

删除JS方法代码。

后台响应请求代码。

@RequestMapping(value="/delete")
    @ResponseBody
    public Object delete(Integer id) {
    	try {
    		menuService.deleteById(id);
    		return new AjaxResult("数据删除成功");
    	} catch (Exception e) {
    		return new AjaxResult(false,"数据删除失败");
    	}
    }

就这些了，如果对你有帮助，点赞关注一下呗^\_^，留下你的足迹。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjA1MTE2_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191228130653291.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjA1MTE2,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjA1MTE2_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20191228131228288.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjA1MTE2,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjA1MTE2_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20191228133105250.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjA1MTE2,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjA1MTE2_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20191228135711294.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjA1MTE2,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjA1MTE2_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20191228135731962.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjA1MTE2,size_16,color_FFFFFF,t_70