Bootstrap-Table 總結
jQuery Java Bootstrap-Table
JS檔案
傳參：直接將需要的引數置於 queryParams 方法中，例如 line:formData
注意： queryParams 中的 queryStr 是獲取文字框的值，在表格載入完後，在文字框中輸入了值，再呼叫 reLoad 方法，同樣可以實現傳值
var prefix = contpath+"equip/eqEqequip"
$(function() {
load(formData);
});
function load(formData) {
$(`#exampleTable`)
.bootstrapTable(
{
method : `get`, // 伺服器資料的請求方式 get or post
url : prefix + "/list", // 伺服器資料的載入地址
showRefresh : true,
showToggle : true,
showColumns : true,
iconSize : `outline`,
toolbar : `#exampleToolbar`,
striped : true, // 設定為true會有隔行變色效果
dataType : "json", // 伺服器返回的資料型別
pagination : true, // 設定為true會在底部顯示分頁條
// queryParamsType : "limit",
// //設定為limit則會傳送符合RESTFull格式的引數
singleSelect : false, // 設定為true將禁止多選
// contentType : "application/x-www-form-urlencoded",
// //傳送到伺服器的資料編碼型別
pageSize : 10, // 如果設定了分頁，每頁資料條數
pageNumber : 1, // 如果設定了分佈，首頁頁碼
//search : true, // 是否顯示搜尋框
showColumns : true, // 是否顯示內容下拉框（選擇顯示的列）
sidePagination : "server", // 設定在哪裡進行分頁，可選值為"client" 或者 "server"
clickToSelect: true, // 單擊行即可以選中
queryParams : function(params) {
return {
//說明：傳入後臺的引數包括offset開始索引，limit步長，sort排序列，order：desc或者,以及所有列的鍵值對
limit: params.limit,
offset:params.offset,
queryStr : $("#searchName").val(),
line:formData
//line: $(`.val-hide`).val()
};
},
// //請求伺服器資料時，你可以通過重寫引數的方式新增一些額外的引數，例如 toolbar 中的引數 如果
// queryParamsType = `limit` ,返回引數必須包含
// limit, offset, search, sort, order 否則, 需要包含:
// pageSize, pageNumber, searchText, sortName,
// sortOrder.
// 返回false將會終止請求
columns : [
{
checkbox : true
},
{
field : `eqCode`,
title : `裝置編碼`
},
{
field : `eqName`,
title : `裝置名稱`
},
{
field : `eqTypeName`,
title : `裝置分類`
},
{
field : `eqSpec`,
title : `規格`
},
{
field : `model`,
title : `型號`
},
{
field : `manufacturer`,
title : `生產廠家`
},
{
field : `facNumber`,
title : `出廠編號`
},
{
field : `startDate`,
title : `開始使用日期`
},
{
field : `useDeptName`,
title : `使用部門`
},
{
field : `eqState`,
title : `裝置狀態`,
formatter : function(value, row, index) {
if (value == `0`) {
return `<span>在用</span>`;
} else if (value == `1`) {
return `<span>備用</span>`;
} else if (value == `2`) {
return `<span>檢修</span>`;
}else if(value == `3`){
return `<span>停用</span>`;
}else if(value == `4`){
return `<span>待報廢</span>`;
}else if(value == `5`){
return `<span>報廢</span>`;
}
}
},
{
field : `dutyUser`,
title : `責任人`
},
{
title : `操作`,
field : `id`,
align : `center`,
formatter : function(value, row, index) {
var s = `<a class="btn btn-primary btn-sm" href="#" mce_href="#" title="檢視" onclick="select(``
+ row.id
+ ``)"><i class="fa fa-eye"></i></a> `;
var e = `<a class="btn btn-primary btn-sm `+s_edit_h+`" href="#" mce_href="#" title="修改" onclick="edit(``
+ row.id
+ ``)"><i class="fa fa-edit"></i></a> `;
var d = `<a class="btn btn-warning btn-sm `+s_remove_h+`" href="#" title="刪除" mce_href="#" onclick="remove(``
+ row.id
+ ``)"><i class="fa fa-remove"></i></a> `;
var f = `<a class="btn btn-success btn-sm" href="#" title="備用" mce_href="#" onclick="resetPwd(``
+ row.id
+ ``)"><i class="fa fa-key"></i></a> `;
return s + e ;
}
} ]
});
}
// 過載表格
function reLoad() {
$(`#exampleTable`).bootstrapTable(`refresh`);
}Controller
注意： params 中包含獲取的資料
@ResponseBody
@GetMapping("/list")
@RequiresPermissions("equip:eqEqequip:eqEqequip")
public PageUtils list(@RequestParam Map<String, Object> params){
//查詢列表資料
String orgcode = ShiroUtils.getUser().getOrgCode();
params.put("orgCode", orgcode);
params.put("audFlag", "1");
params.put("eqState", "5");
Query query = new Query(params);
List<EqEqequipDO> eqEqequipList = eqEqequipService.list(query);
int total = eqEqequipService.count(query);
PageUtils pageUtils = new PageUtils(eqEqequipList, total);
return pageUtils;
}