bootstrap-table（⼀）树状表（tree-grid）
因为项⽬有⼀个接⼝是多级组织架构的，所以需求是使⽤树状图表展⽰，然后表格控件⽤的bootstrap-table，通过官⽹的扩展地址到了tree-grid 这个功能。
扩展地址： 建议经常使⽤这个控件的⼈fork
使⽤⽅法官⽹有，但是我这⾥还是贴⼀下，有⼀点提⽰⼤家：关系id 和 pid 是number数据类型，如果后台给的是string类型，记得转换⼀下，不然是不能成功的，我就吃了这个亏，虽然也是我⾃个没看清
（道个歉，我⾃⼰的不严谨，耽误了⼩伙伴们的时间）
不过这个可以通过修改源码达到⽬的bootstrap-table-treegrid，修改为：
onCheckRoot:function(row, data){
var that =this;
if(row[that.options.parentIdField]=='0'){
return true;
}else{
return false;
}
}
引⽤的各类⽂件我就不贴了，⼤家记得参考⼀下官⽹扩展代码：
var $table =$('#table');
$(function(){
$table.bootstrapTable({
url:'../json/treegrid.json',
height:$(window).height(),
striped:true,
sidePagination:'server',
//这⾥是标志id  和 parentIdField有关系
idField:'id',
columns:[
{
field:'ck',
checkbox:true
},
{
field:'name',
title:'名称'
},
{
field:'status',
title:'状态',
sortable:true,
align:'center',
formatter:'statusFormatter'
},
{
field:'permissionValue',
title:'权限值'
}
],
//最主要的就是下⾯定义哪⼀列作为展开项定义⽗级标志这⾥是pid
//定义的列⼀定是要在表格中展现的换⾔之就是上⽅有这个列不然报错
treeShowField:'name',
parentIdField:'pid',
onLoadSuccess:function(data){
$id({
initialState:'collapsed',
treeColumn:1,
expanderExpandedClass:'glyphicon glyphicon-minus',
expanderExpandedClass:'glyphicon glyphicon-minus',          expanderCollapsedClass:'glyphicon glyphicon-plus',          onChange:function(){
$table.bootstrapTable('resetWidth');
}
});
}
});
bootstrap项目});
// 格式化类型
function typeFormatter(value, row, index){
if(value ==='menu'){
return'菜单';
}
if(value ==='button'){
return'按钮';
}
if(value ==='api'){
return'接⼝';
}
return'-';
}
// 格式化状态
function statusFormatter(value, row, index){
if(value ===1){
return'<span class="label label-success">正常</span>'; }else{
return'<span class="label label-default">锁定</span>'; }
}
下⾯是效果图，我个⼈觉得还是很OK的：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。