bootstrapr表格父子框_bootstrap-table父子表样式问题

该博客介绍了如何使用bootstrap-table库创建具有父子表格功能的交互式表格。作者通过JavaScript和jQuery实现表格的动态加载、排序和展示,并通过点击操作控制子表格的展开和隐藏,同时遇到并解决了父表格中多余操作按钮的问题。
摘要由CSDN通过智能技术生成

bootstrap-table父子表 .我想通过控制右边的操作来控制子表的显示,功能是实现了,但是右边还是会多一个加减好,这是上面自带的父子表的按钮。我的需求是通过右边的操作来控制,左边的按钮让他消失

截图如下

代码如下

$(function(){

//表格

var TableInit = function () {

var oTableInit = new Object();

oTableInit.Init = function () {

//先销毁表格

$('#cusTable').bootstrapTable('destroy');

//初始化表格,动态从服务器加载数据

$('#cusTable').bootstrapTable({

method: "get", //请求方法

striped: true, //是否显示行间隔色

sortable: true, //是否启用排序

sortOrder: "asc", //排序方式

url:ctx+"/finance/generateInvoice",

dataType: "json",

pagination: true, // 显示页码等信息

showColumns: false, // 选择显示的列

clickToSelect: true, //在点击行时,自动选择rediobox 和 checkbox

pageNumber: 1, //首页页码

pageSize: 10, // 当前分页值

pageList: [10, 20], // 分页选页

detailView: true,//父子表

queryParams: queryParams,//传递参数(*)

sidePagination: 'server', // //分页方式:client 客户端分页,server 服务端分页

cache: false, // 不缓存

striped: true, // 隔行加亮

onExpandRow: onExpandRow,

responseHandler: responseHandler,//格式化数据

columns: [

{

checkbox: true

},

{

title: '订单号/进仓编号',

field: 'kcwoNo',

align: 'center',

formatter: function (value, row, index) {

return value+'/'+row.jincangCode;

}

},

{

title: '运单号',

field: 'mawbNo',

align: 'center',

},

{

title: '金额',

field: 'income',

align: 'center',

formatter: function (value, row, index) {

return accDiv(value,100);

}

},

{

title: '计费重量',

field: 'entrustCostGross',

align: 'center',

},

{

title: '航班日期',

field: 'etd',

align: 'center',

},

{

title: '航班',

field: 'flightNo',

align: 'center',

},

{

title: '起运港',

field: 'dispatchPort',

align: 'center',

},

{

title: '目的港',

field: 'destinationPort',

align: 'center',

},

{

title: '结清状态',

field: 'isSettledIncome',

align: 'center',

},

{

title: '操作',

field: 'id',

align: 'center',

formatter:function(value,row,index){

var e;

e = '查看费用 ';

return e;

}

}

]

});

};

return oTableInit;

};

//1.初始化Table

var oTable = new TableInit();

oTable.Init();

//点击查询

$(".dosearch").click(function(){

$('#cusTable').bootstrapTable('refresh');

});

//得到查询的参数 模糊查询条件参数放到里面

function queryParams(params){

return {

pageSize: params.limit, //页面大小

pageNo: (params.offset)/10+1 //页码

};

};

function queryParamschild(params){

return {

pageSize: params.limit, //页面大小

pageNo: (params.offset)/10+1 //页码

};

};

//父子表

function onExpandRow(index, row, $detail){

InitSubTable(index, row, $detail);

}

InitSubTable = function (index, row, $detail) {

var cur_table = $detail.html('

').find('table');

$(cur_table).bootstrapTable({

method: "get", //请求方法

striped: true, //是否显示行间隔色

sortable: true, //是否启用排序

sortOrder: "asc", //排序方式

url:ctx+"/finance/generateInvoice"+row.id,

dataType: "json",

pagination: false, // 显示页码等信息

showColumns: false, // 选择显示的列

clickToSelect: false, //在点击行时,自动选择rediobox 和 checkbox

pageNumber: 1, //首页页码

pageSize: 10, // 当前分页值

pageList: [10, 20], // 分页选页

queryParams: queryParamschild,//传递参数(*)

sidePagination: 'server', // //分页方式:client 客户端分页,server 服务端分页

cache: false, // 不缓存

striped: true, // 隔行加亮

responseHandler: responseHandler,//格式化数据

columns: [

{

title: '序号',

field: 'mawbNo',

align: 'center',

},

{

title: '费用名称',

field: 'entrustCostGross',

align: 'center',

},

{

title: '费用科目',

field: 'etd',

align: 'center',

},

{

title: '单价(元)',

field: 'flightNo',

align: 'center',

},

{

title: '单位',

field: 'dispatchPort',

align: 'center',

},

{

title: '数量',

field: 'destinationPort',

align: 'center',

},

{

title: '详细费用',

field: 'isSettledIncome',

align: 'center',

}

]

});

};

//格式化数据

/*var html*/

/*function onLoadSuccess(){

$('.pagination-detail').append(html)

}*/

function responseHandler(sourceData) {

if (sourceData.code == "0000") {

var pageData = sourceData.prepareIncvoiceOut.prepareIncvoiceOutArray;

return {

"total": sourceData.prepareIncvoiceOut.totalList, //总条数

"rows": pageData //返回的数据格式

};

} else {

return {

"total": 0,

"rows": []

};

};

}

function responseHandlerchild(sourceData) {

if (sourceData.code == "0000") {

var pageData = sourceData.list;

return {

"total": sourceData.prepareIncvoiceOut.totalList, //总条数

"rows": pageData //返回的数据格式

};

} else {

return {

"total": 0,

"rows": []

};

};

}

//除法函数

function accDiv(arg1, arg2) {

var t1 = 0, t2 = 0, r1, r2;

try {

t1 = arg1.toString().split(".")[1].length;

}

catch (e) {

}

try {

t2 = arg2.toString().split(".")[1].length;

}

catch (e) {

}

with (Math) {

r1 = Number(arg1.toString().replace(".", ""));

r2 = Number(arg2.toString().replace(".", ""));

return (r1 / r2) * pow(10, t2 - t1);

}

}

})

function view(str){

var a=$('.tableed ').eq(str).html()

if(a=='查看费用'){

$('.tableed ').eq(str).html('收起费用')

$('#cusTable').bootstrapTable('expandRow', str);

}

else{

$('.tableed ').eq(str).html('查看费用')

$('#cusTable').bootstrapTable('collapseRow', str);

}

event.stopPropagation();

}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值