BootStrap-Table-Treegrid树形表格使用指南，springboot定时器原理

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类型，为空串的话，树形结构显示不出来。

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

实体类代码。

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 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 getChildren() {

return children;

}

public void setChildren(List children) {

this.children = children;

}

public TbMenu(Integer id) {

super(id);

}

public TbMenu(){

super();

}

public TbMenu(String name, String url, Integer idx, TbMenu parent, List 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 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 = $(’

’);

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 = $(’

’);

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

<