bootstrap table 组件

1:需要引用的文件
下载地址：链接：https://pan.baidu.com/s/1ncr6J1gN9JWEZPCzcOE0eA
提取码：pmmk
2：渲染表格，不显示父子表
var columns = [
{
checkbox: true
},
{
field : ‘id’,
title : ‘姓名’,
align:‘center’,
},
{
field : ‘id’,
title : ‘姓名’,
align:‘center’,
},
{
field : ‘id’,
title : ‘姓名’,
align:‘center’,
}
];
$(’#listTable’).bootstrapTable({
method : ‘post’, // 服务器数据的请求方式 get or post
url :url, //请求后台的url
// data:data,
iconSize : ‘outline’,
striped : true, // 设置为true会有隔行变色效果
sortable: true, //是否启用排序
sortOrder: “asc”,//排序方式
dataType : “json”, // 服务器返回的数据类型
pagination : true, // 设置为true会在底部显示分页条
sidePagination: ‘server’,//分页方式：client客户端分页，server服务端分页（）
dataField: “data”,
singleSelect : false, // 设置为true将禁止多选
totalRows: 0, // server side need to set
pageNumber: 1, //初始化加载第一页，默认第一页
pageSize: 10,//每页的记录行数（）
pageList: [10, 25, 50, 100],//可供选择的每页的行数（）
smartDisplay:false,
showColumns:false,//是否显示所有的列
search : false, // 是否显示搜索框
height: 500, //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
detailView: false, //是否显示父子表
uniqueId: “ID”, //每一行的唯一标识，一般为主键列
contentType: “application/json;charset=UTF-8”,
ajaxOptions:{
headers: {“token”:token}
},
queryParams : function(params) {
return JSON.stringify(data1); //设置请求的参数
},
responseHandler : function(res) {
return {
total:res.data.total,
data: res.data.records
};
},
columns : columns
});
3：效果图

4：显示父子表，渲染表格
$(’#listTable’).bootstrapTable({
method : ‘post’, // 服务器数据的请求方式 get or post
url :url, //请求后台的url
// data:data,
iconSize : ‘outline’,
striped : true, // 设置为true会有隔行变色效果
sortable: true, //是否启用排序
sortOrder: “asc”,//排序方式
dataType : “json”, // 服务器返回的数据类型
pagination : true, // 设置为true会在底部显示分页条
sidePagination: ‘server’,//分页方式：client客户端分页，server服务端分页（）
dataField: “data”,
singleSelect : false, // 设置为true将禁止多选
totalRows: 0, // server side need to set
pageNumber: 1, //初始化加载第一页，默认第一页
pageSize: 10,//每页的记录行数（）
pageList: [10, 25, 50, 100],//可供选择的每页的行数（）
smartDisplay:false,
showColumns:false,//是否显示所有的列
search : false, // 是否显示搜索框
height: 500, //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
detailView: true, //是否显示父子表
uniqueId: “ID”, //每一行的唯一标识，一般为主键列
contentType: “application/json;charset=UTF-8”,
ajaxOptions:{
headers: {“token”:token}
},
onExpandRow: function (index, row, $detail) {
Init(index, row, $detail); //显示父子表
},
queryParams : function(params) {
return JSON.stringify(data1); //设置请求的参数
},
responseHandler : function(res) {
return {
total:res.data.total,
data: res.data.records
};
},
columns : columns
});
//展示子表的方法
/*
* index 当前行的索引
* row 当前行的数据
* $detail：当前行下面创建的新行里面的td对象
* */
function Init(index, row, $detail) {

    var _index_=index
    console.log(row,"222222222222222222");
    // var eData=row.data
    sHtml = '<div> ' +
        '<div class="panel panel-default col-xs-12" style="padding: 0">' +
        '<div class="panel-body">' +
        '<table id="equiment"></table>' +
        '</div>' +
        '</div>' +
        '</div>';
    $detail.html(sHtml);
    var parent=$detail.find("table[id=equiment]") //获取当前行下的table
    $(parent).bootstrapTable({
        data:data,
        clickToSelect: true,
        pageSize: 10,
        pageList: [10, 25],
        columns: [ {
            field: 'name',
            title: '测试'
        }],
    });

} 

5：效果如图

6：获取选中行的数据
function getSelect() {
var rows=$(’#listTable’).bootstrapTable(‘getSelections’);
console.log(rows)
}
7：效果如图

8：摧毁表格，刷新表格
$(’#comprehensiveTable’).bootstrapTable(‘destroy’) //摧毁表格
$(’#comprehensiveTable’).bootstrapTable(“refresh”);//刷新表格