Bootstrap-Table 總結
阿新 • • 發佈：2018-11-05
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;
}
```原文地址：https://segmentfault.com/a/1190000014790590