创建父表
$('#atptable').bootstrapTable({
url: 'url', //请求后台的URL(*)
method: 'get', //请求方式(*)
toolbar: '#atptoolbar', //工具按钮用哪个容器
striped: true, //是否显示行间隔色
cache: false, //是否使用缓存,默认为true,所以一般情况下需要设置一下这个属性(*)
pagination: false, //是否显示分页(*)
iconSize: 'outline',
sortable: true, //是否启用排序
sortOrder: "DESC", //排序方式
queryParams: queryParams,//传递参数(*)
sidePagination: "server", //分页方式:client客户端分页,server服务端分页(*)
pageNumber: 1, //初始化加载第一页,默认第一页
pageSize: 1000, //每页的记录行数(*)
pageList: [5, 10, 25, 50, 100], //可供选择的每页的行数(*)
search: false, //是否显示表格搜索,此搜索是客户端搜索,不会进服务端,所以,个人感觉意义不大
showColumns: true, //是否显示所有的列
showRefresh: true, //是否显示刷新按钮
minimumCountColumns: 2, //最少允许的列数
uniqueId: "id", //每一行的唯一标识,一般为主键列
detailFormatter: "detailFormatter",
detailView: true, //是否显示父子表
// cardView:true,
initialState: 'expanded',
singleSelect: true,
responseHandler: function (res) {
// 对服务器返回的数据进行编辑
return {
total: pay_task_list.length,
rows: pay_task_list
}
},
// 注册加载子表的事件。注意下这里的三个参数! row会传递数据到子表
onExpandRow: function (index, row, $detail) {
InitSubTable(index, row, $detail);
},
columns: [
{ checkbox: true, },
{
title: '序号',
width: 40,
formatter: function (value, row, index) {
return index + 1;
}
},
],
onSort: function (name, order) {
},
onCheck: function (row, $element) {
parent_index = $element.data('index');
$('#atptable').bootstrapTable('expandRow', parent_index);
}
});
创建子表
function InitSubTable(index, row, $detail) {
var parentid = row.stpt_atpid;
var stpt_shouldpaymoney = row.stpt_shouldpaymoney
var cur_table = $detail.html('<table id="table_' + index + '"></table>').find('table');
// confirm_income_list_sun: 子表的数据
$(cur_table).bootstrapTable({
data: confirm_income_list_sun,
clickToSelect: true,
detailView: true,
uniqueId: "MENU_ID",
pageSize: 10,
detailView: false, //是否显示父子表
pageList: [10, 25],
singleSelect: true,
columns: [
{ checkbox: true },
{
title: '序号1', width: 40,
formatter: function (value, row, index) {
return index + 1;
}
},
{ field: 'part_tax', title: '税率', sortable: true, width: 150 },
],
// onLoadSuccess:function(){
// console.log('onLoadSuccess:function')
// },
onPostBody: function (data) {
// console.log('子表格数据', data)
// 在子表格最后插入dom
cur_table.next('.label_tips').remove();
cur_table.after('<h4 class="label_tips"><b> 插入文字 </b></h4>');
},
// 获取选中子表格的索引值
onCheck: function (row, $element) {
table_id = $($element).parents('table').prop('id')
table_index = $element.data('index');
}
});