bootstrap-table組件使用說明

<table id="table"
   data-toggle="table"
   data-striped ="true"  --條紋
   data-pagination ="true" --分頁
   data-side-pagination = "server" --服務器端分頁 ('client' 客戶端)
   data-show-header ="true" --顯示錶頭
   data-show-footer = "false" --顯示錶尾部
   data-search = "false" --工具欄 查詢框
   data-strict-search = "false" --精確查詢
   data-search-text = "" --查詢框初始值
   data-search-time-out = "500" --查詢timeout時間
   data-trim-on-search = "true" --去掉查詢參數空格
   data-show-columns ="true" --工具欄 顯示錶頭信息 能夠調整顯示行
   data-minimum-count-columns = "1" -- data-show-columns 選項最小顯示1列
   data-show-refresh = "true" --工具欄 顯示刷新按鈕
   data-show-toggle ="true" --工具欄  轉換表格爲列表顯示
   data-card-view = "false" --顯示爲列表
   data-smart-display ="false" --顯示分頁或列表
   data-query-params-type = ""
   data-query-params = "queryParams"
   data-page-size = "10"
   data-page-number = "1"
   data-page-list = "[10, 25, 50, 100, 200]"
   data-response-handler = "responseHandler"
   data-url="${syspath}/sys/q/list">
</table>

function responseHandler(res) {
    if(res.total > 0) {
	 return {
	    "rows": res.rows,
	    "total": res.total
	 }
    } else {
	 return {
	    "rows": [],
	    "total": 0
	 }
    }
}
function queryParams(params) {
    return {
       pageSize: params.pageSize,
       pageNumber: params.pageNumber,
       xx: 自定義控件.val()
    };
}

http://bootstrap-table.wenzhixin.net.cn/ 如需:參考官網信息,請點擊連接bootstrap

相關文章
相關標籤/搜索