給每一行數據添加按鈕,並綁定事件
$table.bootstrapTable({
//url: 'json/dev.json',
data: wcssdata,
toolbar: '#toolbar', //工具按鈕用哪個容器
//striped: true, //是否顯示行間隔色
cache: false, //是否使用緩存,默認爲true,所以一般情況下需要設置一下這個屬性(*)
pagination: true, //是否顯示分頁
sortable: true, //是否啓用排序
sortOrder: "asc", //排序方式
//queryParams: postQueryParams,//傳遞參數(*)
//sidePagination: "server", //分頁方式:client客戶端分頁,server服務端分頁(*)
pageSize: 20, //每頁的記錄行數(*)
pageList: [10, 25, 50, 100], //可供選擇的每頁的行數(*)
strictSearch: true,
//height: table_h, //行高,如果沒有設置height屬性,表格自動根據記錄條數覺得表格高度,設置了行高後編輯時標頭寬度不會隨着下面的行改變,且顏色也不會改變????
uniqueId: "id", //每一行的唯一標識,一般爲主鍵列
cardView: false, //是否顯示詳細視圖
detailView: false, //是否顯示父子表
paginationHAlign: "left",
singleSelect: true,
//search:true, //是否顯示錶格搜索,此搜索是客戶端搜索,不會進服務端
//strictSearch: true,
//showColumns: true, //是否顯示所有的列
//showRefresh: true, //是否顯示刷新按鈕
clickToSelect: true, //是否啓用點擊選中行
paginationPreText: "<<",
paginationNextText: ">>",
columns: [{
checkbox: true,
}, {
field: 'id',
title: '序號',
width: "75px",
}, {
field: 'seq_no',
title: '編號',
}, {
field: 'type',
title: '類型',
}, {
field: 'position',
title: '位置',
}, {
field: 'status',
title: '設備狀態',
}, {
field: 'fault',
title: '故障現象',
}, {
field: 'purchase_time',
title: '採購時間',
}, {
field: 'quality_time',
title: '出保時間',
}, {
field: 'maintain_unit',
title: '維護單位',
}, {
field: 'inputer',
title: '錄入者',
}, {
field: 'operate',
title: '操作',
width: '80px',
events: operateEvents1,
formatter: operateFormatter
}, ],
/*處理json數據需要配置此項
* responseHandler: function (res) {
return res.rows;
}*/
});
相應的單元格格式及事件
window.operateEvents1 = {
'click .RoleOfA': function(e, value, row, index) {
detailmodal.open();
$("#dev_id").val(row.id);
$("#seq_no").val(row.seq_no);
$("#dev_pos").val(row.position);
$("#dev_type1").val(row.type);
$("#dev_status").val(row.status);
$("#fault").val(row.fault);
$("#buy_time").val(row.purchase_time);
$("#quality_time").val(row.quality_time);
$("#inputer").val(row.inputer);
$("#maintain_unit").val(row.maintain_unit);
for(var i in row) console.log(i);
}
};
function operateFormatter(value, row, index) {
return [
'<button id="btn_detail" type="button" class="RoleOfA btn-default bt-select">詳情</button>',
].join('');
}