bootstrap-table如何給行內新增操作函式及功能按鍵
阿新 • • 發佈:2019-01-03
$('#table').bootstrapTable('destroy');
$('#table').bootstrapTable({
//data:reet.data,
url:'../data/yonghuguanli.json',
//uniqueId: "SOBID",
striped:true,
pagination:true,
clickToSelect:true,
height:580,
columns: [{
checkbox:true,
},{
field: 'id',
sortable:true,
title: '組織編碼',
sortable: true,
},{
field: 'name',
title: '組織名稱',
sortable: true,
},{
field: 'lexing',
title: '賬套編號',
sortable: true
},{
field: 'zt',
title: '賬套名稱',
sortable: true
}, {
field: 'operate',
title: '操作',
align: 'center',
events: "operateEvents",
formatter: operateFormatter
}],
2:表格中增加按鈕
operateFormatter(value, row, index):這三個引數是bootsharp-table預設的
function operateFormatter(value, row, index) {
return [
'<button type="button" class="RoleOfA btn btn-default btn-sm" style="margin-right:15px;">A許可權</button>',
'<button type="button" class="RoleOfB btn btn-default btn-sm" style="margin-right:15px;">B許可權</button>',
'<button type="button" class="RoleOfC btn btn-default btn-sm" style="margin-right:15px;">C許可權</button>',
'<button type="button" class="RoleOfD btn btn-default btn-sm" style="margin-right:15px;">繫結D</button>',
'<button type="button" class="RoleOfEdit btn btn-default btn-sm" style="margin-right:15px;">編輯</button>'
].join('');
3:註冊按鈕的點選事件
每個按鈕對應哪個點選事件,是用Class裡面的屬性標識的,如上步驟2(比如:RoleOfA)
window.operateEvents = {
'click .RoleOfA': function (e, value, row, index) {
alert("A");
},
'click .RoleOfB': function (e, value, row, index) {
alert("B");
},
'click .RoleOfC': function (e, value, row, index) {
alert("C");
},
'click .RoleOfEdit': function (e, value, row, index) {
alert("D");
}
};
$('#table').bootstrapTable({
//data:reet.data,
url:'../data/yonghuguanli.json',
//uniqueId: "SOBID",
striped:true,
pagination:true,
clickToSelect:true,
height:580,
columns: [{
checkbox:true,
},{
field: 'id',
sortable:true,
title: '組織編碼',
sortable: true,
},{
field: 'name',
title: '組織名稱',
sortable: true,
},{
field: 'lexing',
title: '賬套編號',
sortable: true
},{
field: 'zt',
title: '賬套名稱',
sortable: true
}, {
field: 'operate',
title: '操作',
align: 'center',
events: "operateEvents",
formatter: operateFormatter
}],
});
function operateFormatter(value, row, index) {
return [
'<button type="button" class="RoleOfA btn btn-default btn-sm" style="margin-right:15px;">A許可權</button>',
'<button type="button" class="RoleOfB btn btn-default btn-sm" style="margin-right:15px;">B許可權</button>',
'<button type="button" class="RoleOfC btn btn-default btn-sm" style="margin-right:15px;">C許可權</button>',
'<button type="button" class="RoleOfD btn btn-default btn-sm" style="margin-right:15px;">繫結D</button>',
'<button type="button" class="RoleOfEdit btn btn-default btn-sm" style="margin-right:15px;">編輯</button>'
].join('');
}
window.operateEvents = {
'click .RoleOfA': function (e, value, row, index) {
alert("A");
},
'click .RoleOfB': function (e, value, row, index) {
alert("B");
},
'click .RoleOfC': function (e, value, row, index) {
alert("C");
},
'click .RoleOfEdit': function (e, value, row, index) {
alert("D");
}
};