BootStrap-Table-Treegrid树形表格使⽤指南BootStrap-bable-treegrid
Bootstrap是⽬前很流⾏的⼀款前端框架，也有很多第三⽅基于Bootstrap开发出了很多跟实⽤性的⼀些功能，⽐如BootStrap-bable-treegrid树形表格。树形表格在开发中应该是很常⽤到的。
引⼊样式⽂件
<link rel="stylesheet" href="static/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="static/bootstrap-table/dist/bootstrap-table.css" />
<link rel="stylesheet" href="static/bootstrap-table/dist/extensions/treegrid/treegrid.css" />
<script src="static/bootstrap/dist/js/jquery.js" ></script>
<script src="static/bootstrap/dist/js/bootstrap.js" ></script>
<script src="static/bootstrap-table/dist/bootstrap-table.js" ></script>
<script src="static/bootstrap-table/dist/locale/bootstrap-table-zh-CN.js" ></script>
<script src="static/bootstrap-table/dist/extensions/treegrid/bootstrap-table-treegrid.js" ></script>
<script src="static/bootstrap-table/dist/extensions/id.js" ></script>
<script src="static/combotree/bootstrap-treeview.js" ></script>
<script src="static/combotree/combotree.js" ></script>
其中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部分代码，获取数据，渲染表格，其中的字段名需要和实体类中的字段名⼀样。
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);
$id({
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<TbMenu> spec = buildSpec(form); //配置查询参数springboot结构
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) {
}
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;
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论