bootsrtap table
Posted hukeer
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了bootsrtap table相关的知识，希望对你有一定的参考价值。
html
<table id="paperTable" class="table table-striped" style="width:100%"></table>
js
/**
* 列表初始化
*/
function initPaperTable(data){
$(‘#paperTable‘).bootstrapTable({
data: data,
columns: [{
field: ‘no‘,
title: ‘序号‘,
align: ‘center‘,
valign: ‘middle‘,
formatter: function (value, row, index) {
return index + 1;
}
}, {
field: ‘name‘,
title: ‘名称‘,
align: ‘center‘,
valign: ‘middle‘
}, {
field: ‘code‘,
title: ‘编号‘,
align: ‘center‘,
valign: ‘middle‘
}, {
field: ‘sign_count‘,
title: ‘签名次数‘,
align: ‘center‘,
valign: ‘middle‘
}, {
field: ‘create_time‘,
title: ‘入库时间‘,
align: ‘center‘,
valign: ‘middle‘
},{
field: ‘operate‘,
title: ‘操作‘,
align: ‘center‘,
valign: ‘middle‘,
formatter: bookBtnGroup, // 自定义方法，添加按钮组
events: {
‘click #download‘: function (event, value, row, index) {
//下载 row.url
window.location.href = row.url;
},
‘click #del‘: function (event, value, row, index) {
//删除
var certificateId = row.id;
var delTxt = $(‘#state‘).html();
if(delTxt == ‘完成‘ || delTxt == ‘废弃‘){
layer.msg(‘公正已完结,不能删除‘);
}else{
layer.confirm(‘确定删除吗？‘,{
yes: function (index, layero) {
$.ajax({
type: ‘post‘,
url: testPath +‘/api/case/unlinkcertificate?case_id=‘+caseid+‘&certificate_id=‘+certificateId,
dataType: "json",
contentType: "application/json",
headers:{‘token‘:token,orign:‘web‘,Accept: "application/json; charset=utf-8"},
success: function (data) {
if(data.code==200 || data.code==‘200‘){
$(‘#paperTable‘).bootstrapTable(‘load‘,[]);
layer.msg(data.msg);
}
else{
layer.msg(data.msg);
}
layer.close(index); //如果设定了yes回调，需进行手工关闭
}
})
},
btn2: function (index, layero) {
layer.close(index);
}
})
}
},// 提交签名
‘click #submitName‘: function (event, value, row, index) {
var delTxt = $(‘#state‘).html();
if(delTxt == ‘完成‘ || delTxt == ‘废弃‘){
layer.msg(‘公正已完结,不能提交‘);
}else{
$.ajax({
type: ‘post‘,
url: testPath +‘/api/certificate/sign?case_id=‘+caseid+‘&certificates_id=‘+row.id,
dataType: "json",
contentType: "application/json",
headers:{‘token‘:token,orign:‘web‘,Accept: "application/json; charset=utf-8"},
success: function (data) {
layer.alert(data.msg);
},
error: function(data){
layer.alert(data.msg);
}
})
}
}
}
}]
});
function bookBtnGroup (value, row, index) { // 自定义方法，添加操作按钮
if(row.url == ‘‘){
var html =‘<button href="javascript:void(0)" disabled class="btn btn-sm btn-disabled" id="download" > 下载 </button> <a href="javascript:void(0)" class="btn btn-sm btn-outline-danger" id="del" > 删除 </a> <a href="javascript:void(0)" class="btn btn-sm btn-outline-primary" id="submitName" > 提交签名 </a>‘
}else{
var html =‘<a href="javascript:void(0)" class="btn btn-sm btn-outline-primary" id="download" > 下载 </a> <a href="javascript:void(0)" class="btn btn-sm btn-outline-danger" id="del" > 删除 </a> <a href="javascript:void(0)" class="btn btn-sm btn-outline-primary" id="submitName" > 提交签名 </a>‘
}
return html
};
}
带参数查询
/**
* 查询公证书列表-弹框
*/
$(‘#importNotarialBook‘).on(‘click‘,‘.js-secrch‘,function(){
var params = {
pageNumber:1,
year: $.trim($(‘#caseYear‘).val()),
code_category: $.trim($(‘#caseCatalog‘).val()),
code_number: $.trim($(‘#caseCatalogNum‘).val())
}
$(‘#notarialBookListTable‘).bootstrapTable(‘refreshOptions‘,params);
});
/**
* 获取公证书-弹框列表
*/
function getCertificateList(){
$(‘#notarialBookListTable‘).bootstrapTable({
height: 290,
pagination: true,
url: testPath + ‘/api/certificate/list‘,
sidePagination:‘client‘,
pageSize: 10,
ajaxOptions:{
dataType: "json",
contentType: "application/json",
headers:{‘token‘:token,orign:‘web‘,Accept: "application/json; charset=utf-8"}
},
queryParams: function queryParams(params) {
return {
year: $.trim($(‘#caseYear‘).val()),
code_category: $.trim($(‘#caseCatalog‘).val()),
code_number: $.trim($(‘#caseCatalogNum‘).val())
};
},
//初始化加载第1页，默认第1页
pageNumber: 1,
responseHandler: function (res) {
console.log(res)
return eval(res.data)
},
clickToSelect: true,
columns: [{
field: ‘state‘,
checkbox: true,
align: ‘center‘,
valign: ‘middle‘
},
{
field: ‘no‘,
title: ‘序号‘,
align: ‘center‘,
valign: ‘middle‘,
formatter: function (value, row, index) {
return index + 1;
}
}, {
field: ‘code‘,
title: ‘证书编号‘,
align: ‘center‘,
valign: ‘middle‘
}, {
field: ‘create_time‘,
title: ‘同步时间‘,
align: ‘center‘,
valign: ‘middle‘
}, {
field: ‘name‘,
title: ‘名称‘,
align: ‘center‘,
valign: ‘middle‘
}, {
field: ‘sign_count‘,
title: ‘签章次数‘,
align: ‘center‘,
valign: ‘middle‘
}]
});
}
详细介绍
https://blog.csdn.net/hutuyaoniexi/article/details/84948470
以上是关于bootsrtap table的主要内容，如果未能解决你的问题，请参考以下文章