bootstrapTable外掛簡單用法
阿新 • • 發佈:2018-11-13
$('#matterLsit').bootstrapTable({//當前table標籤Id
method: 'post',
contentType: "application/x-www-form-urlencoded",
url: '',
// idField: "projectId",
striped: true, //是否顯示行間隔色
pagination: true, //設定為 true 會在表格底部顯示分頁條
pageList: [8, 15, 20], //如果設定了分頁,設定可供選擇的頁面資料條數。設定為All 則顯示所有記錄。
pageSize: 8 , //如果設定了分頁,頁面資料條數
pageNumber: 1, //如果設定了分頁,首頁頁碼
sidePagination: 'server', //設定在哪裡進行分頁,可選值為 'client' 或者 'server'。設定 'server'時,必須設定 伺服器資料地址(url)或者重寫ajax方法
silent: true,
sortable: true, //設定為false 將禁止所有列的排序
sortOrder: "desc", //預設排序方式
silentSort: true, //設定為 false 將在點選分頁按鈕時,自動記住排序項
singleSelect: false , //設定True 將禁止多選
clickToSelect: true, //設定true 將在點選行時,自動選擇rediobox 和 checkbox
search: false, //是否啟用搜索框
strictSearch: false, //設定為 true啟用 全匹配搜尋,否則為模糊搜尋
showColumns: false, //是否顯示 內容列下拉框
showRefresh: false, //是否顯示 重新整理按鈕
showToggle: false, //是否顯示 切換試圖(table/card)按鈕
cardView: false, //設定為 true將顯示card檢視,適用於移動裝置。否則為table試圖,適用於pc
toolbar: "#toolbar",
queryParams: getMatterData,//重新整理列表傳遞引數
queryParamsType: "limit",//分頁
columns: [{
checkbox: true
},
{
title: '序號',
width:50,
formatter: function(value, row, index) {
return getPageSize * (getPageNub - 1) + index + 1;
}
},
{
field: 'name',
title: '所屬部門',
sortable: false
}
]
,onDblClickRow:addAlreadyRow//回撥函式雙擊事件
});
回撥函式
// 提交時傳遞引數
var getPageNub = "";
var getPageSize = "";
var rows = "";
var nowpage = "";
function getMatterData(params){
var queryDate = {
"rows": params.limit,
"nowpage": params.pageNumber,
"departmentId": $("#searchDepartment").val(),
"directoryNameSearch": $("#searchProjectName").val(),
"projectClassifySearch": $("#searchProClassify").val(),
"sortOrder": params.order,
"searchText": params.search,
"sortName": params.sort,
};
getPageNub = params.pageNumber;
getPageSize = params.limit;
rows = params.limit;
nowpage = params.pageNumber;
sortOrder = params.order;
return queryDate;
}
行雙擊事件
//row當前行,通過呼叫類屬性取值
function addAlreadyRow(row){
var str = "<tr ondblclick='removeThisRow(this);'>";
str ="<td>"+row.name+"</td>"+"</tr>";
$("#alreadyMatter").append(str);
}
增加查詢按鈕
將所需要傳遞引數放入queryParams的引數中,點選查詢呼叫table重新整理即可
$("#searchBtn").click(function() {
$("#table").bootstrapTable('refresh');
});