[JavaScript知识库]BootStrap-Table-Treegrid树形表格使用指南，java序列化的原理

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

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

新增

修改

删除

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

var $table = $("#menu_table");

$("#menu_table").bootstrapTable({

url: ‘menu/list’, //表格数据请求地址

toolbar: ‘#toolbar’, //自定义组件

striped: true, //隔行换色

height: tableHeight(), //设置高度

pagination: false, //显示表格的底部工具栏

sidePagination: ‘server’, //client客户端分页，server服务器分页

search: false, //定义右上方的搜索框，输入即可以开始搜索

showColumns: true, //选列的下拉菜单

showRefresh: true, //刷新按钮

showToggle: true, //视图切换

toolbarAlign: ‘left’, //自定义按钮位置

clickToSelect: true, //点击行选中

singleSelect: true, //单选

// 设置树状表格参数

treeShowField: ‘name’,

sortName:‘id’,

parentIdField: ‘parentId’, //父节点id

onLoadSuccess: function(data) {

//console.log(data);

$table.treegrid({

initialState: ‘expanded’,//展开

treeColumn: 1,//指明第几列数据改为树形

expanderExpandedClass: ‘glyphicon glyphicon-triangle-bottom’,

expanderCollapsedClass: ‘glyphicon glyphicon-triangle-right’,

onChange: function() {

$table.bootstrapTable(‘resetWidth’);

}

});

},

columns:[{

checkbox: true //多选框

},{

field: ‘id’, //每列的字段名

title: ‘ID’, //表头所显示的名字

halign: ‘center’, //表头的对齐方式

valign: ‘middle’, //表格对齐方式居中

order: ‘asc’, //默认排序方式

sortable: true, //设置可以排序

align: ‘center’ //表格数据对齐方式

},{

field: ‘name’,

title: ‘名称’,

halign: ‘center’,

align: ‘center’

},{

field: ‘url’,

title: ‘路径’,

halign: ‘center’,

align: ‘center’

},{

field: ‘idx’,

title: ‘排序’,

halign: ‘center’,

align: ‘center’

}]

});

function tableHeight() {

return $(window).height() - 100;

}

后台响应请求数据方法。

@RequestMapping(value="/list")

@ResponseBody

public Object list(TablePageable pageParam,TbMenuForm form) {

Sort sort = pageParam.bulidSort(); //排序

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

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

实体类代码。

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

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 spec = buildSpec1();

List list = menuService.findAll(spec,sort);

return buildTree(list,id);

}

private Object buildTree(List 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 buildSpec1() {

Specification specification = new Specification() {

private static final long serialVersionUID = 1L;

@Override

public Predicate toPredicate(Root root, CriteriaQuery<?> query, CriteriaBuilder cb) {

HashSet 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。

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

(function ($) {

function getTree(url){

var result=$.ajax({

type : ‘post’,

url : url ,

dataType : ‘json’ ,

async : false

}).responseText;

return eval(’(’+result+’)’);

}

$.fn.extend({

bootstrapCombotree: function(options, param){

var self=this;

this.onBodyDown=function(event){

var $options=undefined;

try{

$options=$.data($(event.target).prev()[0],‘bootstrapCombotree’);

}catch (e) {

$options=undefined;

}

if (!($options!=undefined || event.target.id == ‘comboDiv’ || $(event.target).parents("#comboDiv").length>0)) {

//if (!(event.target.id == ‘comboDiv’ || $(event.target).parents("#comboDiv").length>0)) {

self.hideMenu();

}

}

this.hideMenu=function(){

$(’#comboDiv’).fadeOut(‘fast’);

$("#comboDiv").remove();

$(“body”).unbind(“mousedown”, self.onBodyDown);

}

this.getNode=function(root,id){

for(var i=0;i<root.length;i++){

var node=root[i];

if(node.id==id){

return node;

}

var x=self.getNode(node.nodes?node.nodes:[],id);

if(x){

return x;

}

}

return null;

},

this.create=function(target){

var $self=$(target);

var $option=$.data(target,‘bootstrapCombotree’).options;

$se

《一线大厂Java面试题解析+后端开发学习笔记+最新架构讲解视频+实战项目源码讲义》

【docs.qq.com/doc/DSmxTbFJ1cmN1R2dB】 完整内容开源分享

lf.attr(“type”,“hidden”);

var $this=$(’’);

$this.attr{(}^{\prime }placeholde{r}^{\prime },$self.attr(‘placeholder’));

$this.attr(‘readonly’,true);

$self.after($this[0]);

//取出options

var options=$.extend(,$option,{

onNodeSelected:function(event,node){

$self.val(node.id);

$this.val(node.text);

$(’#comboDiv’).fadeOut(‘fast’);

$("#comboDiv").remove();

$(“body”).unbind(“mousedown”, self.onBodyDown);

}

});

//在显示的框中写入默认值对应的text的内容

var $value=$self.val();

if($value){

var $node=self.getNode(options.data,$value);

if($node){

$this.val($node.text);

}

}

$this.focus(function(){

if($(’#comboDiv’).length>0){

return;

}

var $div=$(’

$div.appendTo($this.parent());

$(’#bootstrapCombotree’).treeview(options);

var thisObj=$(this);

var thisOffset=$(this).position();

var $dialogOffset=thisObj.closest(’.modal-dialog’).offset();

var $left=thisOffset.left;

var $top=thisOffset.top+thisObj.outerHeight();

$div.css({

left : $left+“px”,

top: $top+“px”,