[TOC] >[info][一個詳細的教程](https://www.cnblogs.com/landeanfen/p/4976838.html) [bootstrap table使用總結](https://www.cnblogs.com/wdcwy/p/6590855.html) [BootstrapTable使用實例](https://www.cnblogs.com/samve/p/9757847.html) [中文文檔](https://www.bootstrap-table.com.cn/doc/api/table-options/) [GridManager - 極簡的代碼實現多態的表格 (lovejavascript.com)](https://gridmanager.lovejavascript.com/#gm-install-flag) >[danger] row就是行，columns就是列 > js獲取table的tr、td需要在表格體加載完成之后才行`$('#bootstrap-table').on('post-body.bs.table', function (data){})` 重要表屬性 ~~~ visible:true,//設置為false以隱藏列項。 data: dataType:'json' dataField:'rows' totalField:'total' classes:'table table-bordered table-hover',//表的類名。其他類名參考：`'table'` `'table-bordered'(列內外(豎)邊框)` `'table-hover'(指向單元格變色)` `'table-striped'(行灰白相間)` `'table-dark'(灰黑背景)` `'table-sm'(緊湊型表格)` `'table-borderless'(去掉內邊框)`默認情況下，表格是有界的。 關閉toolBar showSearch: false, showRefresh: false, showToggle: false, showColumns: false ~~~ ## 重要的東西： 首先**獲取options**：getOptions 組裝好options后刷新選項： refreshOptions 然后**獲取data數據** ： getData 組裝好data后，**<span style="color:blue">將數據加載到表中</span>**，舊行將被刪除：`$table.bootstrapTable('load', data)`. responseHandler方法也可以返回用于渲染的數據 **向表格后面追加數據**(可追加一條或多條)：append ``` $table.bootstrapTable('append', [{'id':1,'name':'dash'},{},...]) $table.bootstrapTable('scrollTo', 'bottom')//將scroll滾動條滾動到最下面 ``` 剛才向后追加了，這里就是**向前追加數據**(可追加一條或多條)：$table.bootstrapTable('prepend', data) **指定的位置插入新的一行數據**：$table.bootstrapTable('insertRow', {index: 1, row: row}) ``` $table.bootstrapTable('insertRow', { index: 1, row: { id: randomId, name: 'Item ' , price: '200' } }) ``` **刷新遠程數據** ``` $("#refresh_button").click(function (){ var opt = { url: "http://local/api/data/?format=json",//可選，如果你不變更請求地址可省略 silent: true,//靜默刷新數據 pageNumber:"1",當前頁碼，可選 pageSize:"".//每頁顯示多少數據，可選 query:{//查詢參數 type:1, level:2 } }; $("#item_table").bootstrapTable('refresh', opt); }); ``` **銷毀表**：$table.bootstrapTable('destroy') 切換分頁選項（開啟、關閉分頁、開啟、關掉分頁）:`$table.bootstrapTable('togglePagination')`將分頁表格切換為滾動條 **更新一個單元格**：updateCell ``` //要禁用表重新初始化，您可以設置`{reinit: false}` $table.bootstrapTable('updateCell', {index: 1, field: 'name', value: 'Updated Name'}) ``` **更新id指定的一個單元格**：updateCellByUniqueId ``` $table.bootstrapTable('updateCellByUniqueId', {id: 3, field: 'name', value: 'Updated Name'}) ``` **更新指定的行**：updateRow ``` $table.bootstrapTable('updateRow', {index: 1, row: row}) ``` **更新指定的行**: updateByUniqueId ``` $table.bootstrapTable('updateByUniqueId', {id: 3, row: {'name':'dash',"price":200,...}}) ``` 從表中刪除數據，該行包含`id`傳遞的參數:removeByUniqueId ``` $table.bootstrapTable('removeByUniqueId', 3) ``` **從表中獲取一行數據**：getRowByUniqueId # [BootStrap Table：事件、方法、多語言](https://blog.csdn.net/pengjunlee/article/details/80659747) ## **事件event** **事件函數的用法：** ~~~ 方法1：通過option對象 $('#table').bootstrapTable({ onEventName: function (arg1, arg2, ...) {// ...} }) //通過option對象的例子： var table=$('#user'); table.bootstrapTable({ onAll: function (arg1, arg2, ...) {}, onClickRow: function (arg1, arg2, ...) {}, } 方法2:jquery事件處理程序 $('#table').on('event-name.bs.table', function (e, arg1, arg2, ...) {// ...}) //jquery事件處理程序的例子， 第一個參數event-name部分就是onAll事件去掉on轉小寫駝峰加_ $('#table').on('click-row.bs.table', function (e, arg1, arg2, ...) {}) $('#bootstrap-table').on('click-row.bs.table', function (row, $element, field) { //onClickRow //alert(單擊行事件); }) $('#bootstrap-table').on('dbl-click-row.bs.table', function (row, $element, field) { //onClickRow //alert(雙擊行事件); }) $('#bootstrap-table').on('click-cell.bs.table', function (field, value, row, $element) { //onClickCell //alert(單擊單元格事件); }) $('#bootstrap-table').on('dbl-click-cell.bs.table', function (field, value, row, $element) { //onDblClickCell //alert(雙擊單元格事件); }) ~~~ **事件api** * [onAll](https://bootstrap-table.com/docs/api/events/#onall)(name,args)? ? ? ? ? ? ? ? ? ? ? ? ? ? ?**任何事件觸發都會同時觸發該事件**（事件名稱|事件數據）? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? all.bs.table * [onClickRow](https://bootstrap-table.com/docs/api/events/#onclickrow)(row, $element, field)? ??**當點擊某一行時觸發**（出發改事件這一行的數據|tr元素|與單擊的單元格對應的字段名稱）? ? ? click-row.bs.table * [onDblClickRow](https://bootstrap-table.com/docs/api/events/#ondblclickrow)(?`row, $element, field`)? ? ? ? ? ? ? ? ? ? ??**當雙擊擊某一行時觸發**(參數同上)? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? dbl-click-row.bs.table * [onClickCell](https://bootstrap-table.com/docs/api/events/#onclickcell)(field, value, row, $element)? ? ?**當點擊某一個單元格時觸發**(單擊的單元格對應的字段名|該單元格的數據值|對應于單擊行的記錄|td元素)? ? ??click-cell.bs.table * [onDblClickCell](https://bootstrap-table.com/docs/api/events/#ondblclickcell)(field, value, row, $element)??當雙擊某一個單元格時觸發（參數同上）? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? dbl-click-cell.bs.table * [onSort](https://bootstrap-table.com/docs/api/events/#onsort)(name, order)? ? ? ? ? ? ? ? ? ? ? ?當用戶點擊表頭對某一字段列進行排序時觸發(該列字段名稱|排序列順序)? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? sort.bs.table * [onCheck](https://bootstrap-table.com/docs/api/events/#oncheck)(row, $element)? ? ? ? ? ? ? ? 當用戶選中一行時觸發(對應于單擊行的記錄|選中的DOM元素)? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?check.bs.table * [onUncheck](https://bootstrap-table.com/docs/api/events/#onuncheck)(row, $element)? ? ? ? ? ? 當用戶取消選中一行時觸發 （ 參數同上）? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?uncheck.bs.table * [onCheckAll](https://bootstrap-table.com/docs/api/events/#oncheckall)(rows)? ? ? ? ? ? ? ? ? ? ? ? ? 當用戶點擊全選框時觸發 (與選中的行對應的數據數組)? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?check-all.bs.table * [onUncheckAll](https://bootstrap-table.com/docs/api/events/#onuncheckall)(rows)? ? ? ? ? ? ? ? ? ? ? 當用戶點擊全選框取消選擇時觸發（與取消的行對應的表數據數組）? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?uncheck-all.bs.table * [onCheckSome](https://bootstrap-table.com/docs/api/events/#onchecksome)(rows)? ? ? ? ? ? ? ? ? ? ?當用戶選中某些行時觸發? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?check-some.bs.table * [onUncheckSome](https://bootstrap-table.com/docs/api/events/#onunchecksome)(rows)? ? ? ? ? ? ? ? ?當用戶取消選中某些行時觸發? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?uncheck-some.bs.table * [onLoadSuccess](https://bootstrap-table.com/docs/api/events/#onloadsuccess)(data)? ? ? ? ? ? ? ? ? ?當遠程數據被加載完成后觸發當服務器發送的格式不和規范在這里修改在返回? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?load-success.bs.table * [onLoadError](https://bootstrap-table.com/docs/api/events/#onloaderror)(status, jqXHR)? ? ? ? ? ?當遠程數據被加載出錯后觸發（jqXHR的狀態代碼|XMLHTTPRequest對象）? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? load-error.bs.table * [onColumnSwitch](https://bootstrap-table.com/docs/api/events/#oncolumnswitch)(field, checked)? ? ?當切換列的顯示狀態（可見或不可見）時觸發（該列字段名|該列的選中狀態）? ? ? ? ? ? ? ? ? ? ? ? column-switch.bs.table * [onPageChange](https://bootstrap-table.com/docs/api/events/#onpagechange)?(number, size)? ? ? ?當切換每頁條數時觸發（頁碼，每頁多少條）? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? page-change.bs.table * [onSearch](https://bootstrap-table.com/docs/api/events/#onsearch)(?`text`)??? 當對表格內容進行搜索時觸發? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? search.bs.table * [onToggle](https://bootstrap-table.com/docs/api/events/#ontoggle)(cardView表的cardView狀態)? ? ?當切換表格的顯示視圖時觸發? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? toggle.bs.table * [onPreBody](https://bootstrap-table.com/docs/api/events/#onprebody)(data渲染數據)??在對表格體進行渲染前觸發? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?pre-body.bs.table * [onPostBody](https://bootstrap-table.com/docs/api/events/#onpostbody)(data)? ?在表格體渲染完成，并在 DOM 中可見后觸發? ? ? ? ? ? ? ? ? ? ? ? ? ? ??post-body.bs.table * [onPostHeader](https://bootstrap-table.com/docs/api/events/#onpostheader)(undefined)??在表格列頭渲染完成，并在 DOM 中可見后觸發? ? ? ? ? ? ? ? ? ? ? ??post-header.bs.table * [onExpandRow](https://bootstrap-table.com/docs/api/events/#onexpandrow)(index, row, $detail)? ?當點擊詳情按鈕展開詳情視圖時觸發? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? expand-row.bs.table * [onCollapseRow](https://bootstrap-table.com/docs/api/events/#oncollapserow)(index, row)?當點擊關閉詳情按鈕收起詳情視圖時觸發? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?collapse-row.bs.table * [onRefreshOptions](https://bootstrap-table.com/docs/api/events/#onrefreshoptions)(options)??當刷新表格選項時，在銷毀當前表格并重新初始化新表格之前觸發? ? ? ? ??refresh-options.bs.table * [onResetView](https://bootstrap-table.com/docs/api/events/#onresetview)(undefind)? 當重置表格視圖時觸發? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?reset-view.bs.table * [onRefresh](https://bootstrap-table.com/docs/api/events/#onrefresh)(params)?當點擊刷新按鈕對表格進行刷新時觸發(請求到服務器的附加參數？)? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? refresh.bs.table * [onScrollBody](https://bootstrap-table.com/docs/api/events/#onscrollbody)(?`undefined`)??當對表格體進行滾動時觸發? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?scroll-body.bs.table * onColumnSearch()? ？？？對列內容進行搜索時觸發 * onPostFooter($tableFooter) 在DOM中呈現并可用頁腳后觸發 post-footer.bs.table ## **方法** **用法** ~~~ $('#table').bootstrapTable('method', parameter); 如; $('#table').bootstrapTable('getOptions'); $('#table').bootstrapTable('getRowByUniqueId',id); ~~~ **方法API** ~~~ bootstrapTable('getOptions'); 獲取表格的參數 bootstrapTable('getSelections'); 獲取當前被選中的行 bootstrapTable('getAllSelections'); 獲取當前被選中的行數據，包含搜索和過濾前的(1.18已沒有此方法) bootstrapTable('showAllColumns'); 展示所有列 bootstrapTable('hideAllColumns'); 隱藏所有列 bootstrapTable('removeAll'); 移除表格中的所有數據 bootstrapTable('showLoading'); 顯示數據加載狀態提示 bootstrapTable('hideLoading'); 隱藏數據加載狀態提示 bootstrapTable('checkAll'); 選中當前頁的所有行 bootstrapTable('uncheckAll'); 取消選中當前頁的所有行 bootstrapTable('checkInvert'); 對當前頁內行數據進行反選，會觸發onCheckSome 和 onUncheckSome 事件 bootstrapTable('resetWidth'); 重新設置列頭和列尾的寬度去適應當前列的寬度(1.18 not found) bootstrapTable('destroy'); 銷毀表格 bootstrapTable('getHiddenColumns'); 獲取隱藏的列 bootstrapTable('getVisibleColumns'); 獲取可見的列 bootstrapTable('getScrollPosition'); 獲取當前滾動條的位置，單位像素 bootstrapTable('prevPage'); 上一頁 bootstrapTable('nextPage'); 下一頁 bootstrapTable('togglePagination'); 切換分頁參數 bootstrapTable('toggleView'); 切換 card/table 視圖 bootstrapTable('getData',useCurrentPage=true); 獲取當前表格中加載的數據，參數useCurrentPage為true 將返回當前頁內的數據 bootstrapTable('getRowByUniqueId',id); 根據唯一ID獲取行數據 bootstrapTable('load',data); 將新數據加載到表格中 一旦成功加載將替換原數據輸出在html，data的格式為數組形式的json如：data = "[{"a": 1}, {"a": 2}]";JSON.parse(data);bootstrapTable('load',data); bootstrapTable('append',data); 將新數據加載到表格末尾中 data的格式同load一樣 bootstrapTable('prepend',data); 將新數據插入到表格頭部 data的格式與load一樣 bootstrapTable('remove',field,values); 從表格中移除列名為指定值的數據，包含2個參數field: 列名values: 列名取值數組 bootstrapTable('removeByUniqueId',id); 根據唯一ID移除行數據 bootstrapTable('insertRow',index,row); 插入多個新行到指定位置，每一行包含以下參數 index:要插入到行的索引 row: 要插入的行數據 bootstrapTable('updateByUniqueId',id,row); 根據唯一ID更新行數據每一行 id: 唯一ID row: 新的行數據 bootstrapTable('showRow',index,uniqueId); 顯示指定行，至少需包含兩個任意參數 bootstrapTable('hideRow',row,index); 隱藏指定行，至少需包含以下任意參數 index:行索引 bootstrapTable('getHiddenRows',true); 獲取所有隱藏的行數據，當參數為 true 會將隱藏行進行顯示 bootstrapTable('mergeCells',index,field,rowspan,colspan); 合并多個單元格 index: 行索引 field: 列名稱 rowspan: 合并多少行 colspan: 合并多少列 bootstrapTable('updateCell',index,field,value); 更新一個單元格數據 index: 行索引field: 列名稱value: 新列值 禁止表格重新初始化需添加參數{reinit: false} bootstrapTable('refresh ',{}); 重新加載遠程數據，可以設置 {silent: true}靜默加載數據，同時設置 {url: newUrl, pageNumber: pageNumber, pageSize: pageSize} 改變數據請求地址和分頁參數，請求參數通過 {query: {foo: 'bar'}} 修改 bootstrapTable('refreshOptions',options); 刷新表格的參數 bootstrapTable('resetSearch',text); 設置搜索內容 bootstrapTable('check',index); 選中某一行，索引從0開始 bootstrapTable('uncheck',index); 取消選中某一行，索引從0開始 bootstrapTable('checkBy',field,{value,...}}); 根據列名選則行數據 $("#table").bootstrapTable("checkBy", {field:"field_name", values:["value1","value2","value3"]}) bootstrapTable('uncheckBy',field,{value,...}}); 根據列名取消選中行數據 bootstrapTable('resetView',{height:200}); 重置表格視圖 bootstrapTable('showColumn',field); 顯示指定列 bootstrapTable('hideColumn',field); 隱藏指定列 bootstrapTable('scrollTo',value); 使滾動條滾動到指定位置，單位像素，'bottom' 滾動條滾動到底 bootstrapTable('filterBy',{}); 在client模式下，對表格數據進行過濾，語法示例如下{age: 10, hairColor: ["blue", "red", "green"]} bootstrapTable('selectPage',page); 跳轉到指定頁 bootstrapTable('expandRow',index); 當詳細視圖設置為True時，展開指定索引的行的詳細視圖 bootstrapTable('collapseRow',index); 當詳細視圖設置為True時，收起指定索引的行的詳細視圖 bootstrapTable('expandAllRows',true); 當詳細視圖設置為True時，展開所有行的詳細視圖 bootstrapTable('collapseAllRows',true); 當詳細視圖設置為True時，收起所有行的詳細視圖 bootstrapTable('updateCellById',{id:xx,field:xx,value:xx}); 根據唯一ID更新指定單元格(1.18 not found) bootstrapTable('updateColumnTitle',——}) bootstrapTable('updateCellByUniqueId',——}) bootstrapTable('toggleFullscreen',——}) bootstrapTable('toggleDetailView',——}) bootstrapTable('expandRowByUniqueId',——}) bootstrapTable('collapseRowByUniqueId',——}) bootstrapTable('updateFormatText',——}) bootstrapTable('updateRow',——}) ~~~ ## **屬性：** ~~~ var table = $("#table"); // 初始化表格 table.bootstrapTable({ url: '/Home/GetDepartment', //請求后臺的URL（*）用于從遠程站點請求數據的URL method: 'get', //請求方式（*） toolbar: '#toolbar', //工具欄按鈕用哪個容器 一個jQuery 選擇器，指明自定義的 buttons toolbar。例如:#buttons-toolbar, .buttons-toolbar 或 DOM 節點 toolbarAlign:'left' //指示如何對齊自定義工具欄。可以使用'left'，'right' buttonsToolbar:'', //一個jQuery選擇器，指示按鈕工具欄，例如：＃buttons-toolbar，.buttons-toolbar或DOM節點 buttonsAlign:'right', //指示如何對齊工具欄按鈕。可以使用'left'，'right'。 buttonsClass:'secondary', //定義表按鈕的Bootstrap類（在'btn-'之后添加） buttons:function () { //自定義工具欄按鈕 return { btnUsersAdd: { text: 'Highlight Users', icon: 'fa-users', event: function () { alert('Do some stuff to e.g. search all users which has logged in the last week') }, attributes: { title: 'Search all users which has logged in the last week' } }, btnAdd: { text: 'Add new row',//按鈕上顯示的信息 不過需要在table標簽加上showButtonText=true icon: 'fa-plus',//按鈕的圖標 render:true//默認是否顯示按鈕，當為false隱藏時您添加數據屬性時，該按鈕再次可見 'event': {//按鈕事件，如果只時單個事件可以直接使用函數如上面的那個 'click': () => { }, 'mouseenter': () => { }, 'mouseleave': () => { } }, attributes: {//為按鈕添加額外屬性，如這里給按鈕添加title title: 'Add a new row to the table' } } } }, buttonsOrder:['paginationSwitch', 'refresh', 'toggle', 'fullscreen', 'columns'],//工具欄按鈕重新排序 buttonsPrefix:'btn', // 定義表格的前綴 striped: true, //是否顯示行間隔色 cache: false, //是否使用緩存，默認為true，所以一般情況下需要設置一下這個屬性（*） pagination: true, //是否顯示分頁（*） 設置為true以在表格底部顯示分頁工具欄默認false sortable: true, //是否啟用排序 列中也有此變量 sortName:'', //定義要排序的列 沒定義默認都不排列，同sortOrder結合使用，sortOrder沒寫的話列默認遞增（asc） sortOrder: "asc", //定義列排序順序，只能是'asc'或'desc'。 sortStable: false, //如果你把此屬性設為了true）我們將為此行添加'_position'屬性 （別看錯了，是sortStable，sortable在下面）設為true，則和sort部分一樣，區別是：在排序過程中，如果存在相等的元素，則原來的順序不會改變 queryParams: oTableInit.queryParams,//傳遞參數（*） sidePagination: "server", //分頁方式：client客戶端分頁（默認），server服務端分頁（*） silentSort:true,//設置為false以便對加載的消息數據進行排序。當sidePagination選項設置為“server”時，此選項有效。 pageNumber:1, //初始化加載第一頁，默認第一頁 pageSize: 10, //每頁的記錄行數（*） pageList: [10, 25, 50, 100], //可供選擇的每頁的行數（*） search: true, //是否顯示表格搜索input，此搜索是客戶端搜索，不會進服務端，所以，個人感覺意義不大 strictSearch: true, //啟用嚴格搜索 showColumns: false, //是否顯示所有的列 設置為true以顯示列下拉列表（一個可以設置顯示想要的列的下拉f按鈕） showColumnsSearch:false, //設置true 為顯示對列過濾器的搜索 showColumnsToggleAll:false, //設置true 為在列選項/下拉列表中顯示“全部切換”復選框。 showRefresh: true, //是否顯示刷新按鈕 默認false minimumCountColumns: 1, //最少允許的列數 要從列下拉列表中隱藏的最小列數 clickToSelect: true, //是否啟用點擊選中行 height: 500, //行高，如果沒有設置height屬性，表格自動根據記錄條數覺得表格高度 idField:'', //表明哪個是字段是標識字段 uniqueId: "ID", //表明每一行的唯一標識字段，一般為主鍵列 showToggle:true, //是否顯示詳細視圖和列表視圖的切換按鈕 cardView: false, //是否顯示詳細視圖 設置為true以顯示卡片視圖表，例如mobile視圖（卡片視圖） detailView: false, //設置為true以顯示detail 視圖表（細節視圖） detailViewAlign:'left', //指示如何對齊詳細信息視圖圖標。，可以使用。'left''right' detailViewByClick:false, //設置為true時在單擊單元格時切換細節視圖 detailViewIcon:true, //設置為true時顯示詳細視圖列(plus/minus圖標) locale:'zh-CN', height:800, //固定表格的高度 classes:'table table-bordered table-hover',//表的類名。其他類名參考：`'table'` `'table-bordered'(列內外(豎)邊框)` `'table-hover'(指向單元格變色)` `'table-striped'(行灰白相間)` `'table-dark'(灰黑背景)` `'table-sm'(緊湊型表格)` `'table-borderless'(去掉內邊框)`默認情況下，表格是有界的。 theadClasses:'',// 表thead的類名 如使用.thead-light或.thead-dark使theads顯示為淺灰色或深灰色。 rowStyle:function(row,index){// 設置行樣式的函數支持類或css 　　　　　　　　　　if(index==0){ return{ 　　　　　　　　　　　 classes:'warning', css:{'color':'red'} } } }, rowAttributes:function(row,index){// row屬性formatter函數，支持所有自定義屬性 （給tr添加屬性） return { 'data-toggle': 'popover', 'data-placement': 'bottom', 'data-trigger': 'hover', 'data-content': [ 'Index: ' + index, 'ID: ' + row.id, 'Name: ' + row.name, 'Price: ' + row.price ].join(', ') } }, undefinedText:'-',// 定義默認的未定義文本 sortClass:'',//已排序的td元素的類名 rememberOrder:false,//設置為true以記住每列的順序 data:[],// 要加載的數據 [] or {} contentType:'application/json',//請求遠程數據的contentType，例如：application/x-www-form-urlencoded。 dataType:'json',//您希望服務器返回的數據類型 totalField:'total',//Key in incoming json containing 'total' data. dataField:'rows',//名稱寫自己定義的每列的字段名，也就是key，通過key才能給某行的某列賦value原文：獲取每行數據json內的key onlyInfoPagination:false,//設置為true以僅顯示表中顯示的數據量。它需要將分頁表選項即pagination設置為true paginationLoop:true,//設置為true以啟用分頁連續循環模式 paginationHAlign:'right',//分頁條水平方向的位置，默認right（最右），可選left totalRows:0,//該屬性主要由分頁服務器傳遞，易于使用 paginationDetailHAlign:'left',//如果解譯的話太長，舉個例子，paginationDetail就是“顯示第 1 到第 8 條記錄，總共 15 條記錄 每頁顯示 8 條記錄”，默認left（最左），可選right paginationVAlign:'bottom',//分頁條垂直方向的位置，默認bottom（底部），可選top、both（頂部和底部均有分頁條） paginationPreText:'<',//上一頁的按鈕符號 paginationNextText:'>',//下一頁的按鈕符號 paginationSuccessivelySize:5,//分頁時會有<12345...80>這種格式而5則表示顯示...左邊的的頁數 paginationPagesBySide:1,//...右邊的最大連續頁數如改為2則 <1 2 3 4....79 80> paginationUseIntermediate:false,//計算并顯示中間頁面以便快速訪問 true 會將...替換為計算的中間頁數42 paginationParts:['pageInfo', 'pageSize', 'pageList'],//定義了分頁信息哪些部分可見'pageInfo'(顯示總行數且此頁行范圍), 'pageSize'(每頁多少行下拉框), 'pageList'(分頁按鈕),'pageInfoShort'(只顯示總行數) searchOnEnterKey:false,// true時搜索方法將一直執行，直到按下Enter鍵（即按下回車鍵才進行搜索） trimOnSearch:true,//默認true，自動忽略空格 searchAlign:'right',//指定搜索輸入框的方向。可以使用'left'，'right'。 searchTimeOut:500,//設置搜索觸發超時 searchText:'',//設置搜索文本框的默認搜索值 searchAccentNeutralise:false,//如果你想使用重音中和功能(如搜索José則能搜索出Jose)，設置為true searchSelector:false,//自定義搜索框選擇器。如果設置了這個選項(必須是一個有效的dom選擇器，例如searchSelector:'#customSearchinput')，發現的dom元素(應該是一個元素)將被用作表搜索，而不是內置的搜索輸入 showHeader:true,//設置為false以隱藏表頭 showFooter:false,//設置為true以顯示摘要頁腳行(固定也交 比如顯示總數什么的最合適) showPaginationSwitch:false,//設置為true以顯示分頁組件的切換按鈕 showFullscreen:false,// 設置為true以顯示全屏按鈕 smartDisplay:true,//設置為true以巧妙地顯示分頁或卡片視圖 escape:false,// 轉義字符串以插入HTML，替換 &, <, >, “, `, 和 ‘字符 跳過插入HTML中的字符串，替換掉特殊字符 selectItemName:'btSelectItem',// 設置radio 或者 checkbox的字段名稱 clickToSelect:false,//設置為true時 在點擊列時可以選擇checkbox或radio singleSelect:false,// 默認false，設為true則允許復選框僅選擇一行(不能多選了？) checkboxHeader:true,//設置為false以隱藏標題行中的check-all復選框 即隱藏全選框 maintainSelected:false,// true時點擊分頁按鈕或搜索按鈕時，記住checkbox的選擇項 設為true則保持被選的那一行的狀態 filterOptions:{ filterAlgorithm: 'and' },//定義算法的默認過濾器選項， filterAlgorithm: 'and' 意味著所有給定的過濾器必須匹配， filterAlgorithm: 'or' 意味著給定的過濾器之一必須匹配 footerField:,//定義頁腳對象的鍵(從數據數組或服務器響應json)。footer對象可用于設置/定義頁腳折頁和/或頁腳的值。 headerStyle:{},//標頭樣式格式化程序函數采用一個參數即column: 列對象headerStyle：functionheaderStyle(column){return{css:{'font-weight':'normal'},classes:'my-class'}} loadingFontSize:'auto',//要定義加載文本的字體大小，默認值是，它將根據表的寬度自動計算，在12px和32px之間。 loadingTemplate:function (loadingMessage) { return '<span class="loading-wrap">' + '<span class="loading-text">' + loadingMessage + '</span>' + '<span class="animation-wrap"><span class="animation-dot"></span></span>' + '</span>' },//可自定義加載方式（正在加載時的動畫）。parameters對象包含:loadingMessage maintainMetaData:false,//設置true為在更改頁面和搜索上維護以下元數據:1選定的行2隱藏的行 multipleSelectRow:false,//設置true以啟用多選行。可以使用ctrl鍵單擊以選擇一行，或使用shift鍵單擊以選擇一系列行 showButtonText:true,//所有按鈕都將在其上顯示文本 showExtendedPagination:false,//設置true 為顯示分頁的擴展版本（包括不帶過濾器的所有行的計數）。如果在服務器端使用分頁，請使用totalNotFilteredField來定義計數 showSearchButton:false,//設置true 為在搜索輸入后面顯示搜索按鈕。僅在按下按鈕時才會執行搜索（例如，以防止交通或加載時間） sortReset:false,//設置為true時在第三次點擊時重置排序 totalNotFiltered:0,//此屬性主要由分頁服務器傳入，該服務器易于使用 totalNotFilteredField:'totalNotFiltered'//json響應中的字段,用于服務器端定義分頁計數(服務器端傳入數據中包含totalNotFiltered: 800)，用于.showExtendedPagination virtualScroll:false,//設置 true 為啟用虛擬滾動以顯示虛擬的 “infinite” 列表 virtualScrollItemHeight:'undefined',//如果未定義此選項，則默認情況下我們將使用第一項的高度。如果虛擬商品的高度將明顯大于默認高度，則提供此功能非常重要。此維度用于幫助確定初始化時應創建多少個單元格，并幫助計算可滾動區域的高度。此高度值只能使用px單位 visibleSearch:false,//設置true 為僅在可見列/數據中搜索，如果數據包含其他未顯示的值，則在搜索時將忽略它們 icons:{//定義工具欄，分頁和詳細信息視圖中使用的圖標 paginationSwitchDown: 'fa-caret-square-down', paginationSwitchUp: 'fa-caret-square-up', refresh: 'fa-sync', toggleOff: 'fa-toggle-off', toggleOn: 'fa-toggle-on', columns: 'fa-th-list', detailOpen: 'fa-plus', detailClose: 'fa-minus', fullscreen: 'fa-arrows-alt' }, iconSize:'undefined',// 定義icon圖表的尺寸大小html對應為data-icon-undefined （默認btn）、data-icon-lg 大按鈕的尺寸（btn-lg）...; 這里的值依次為undefined => btnxs => btn-xssm => btn-smlg => btn-lg iconsPrefix:'fa',//定義圖標集名稱（FontAwesome的'glyphicon'或'fa'）。默認情況下，'fa'用于Bootstrap v4 queryParamsType:'limit',//設置'limit'以使用RESTFul類型發送查詢參數。 ajaxOptions:{},//提交ajax請求的其他選項。值列表：jQuery.ajax。 customSort:function(sortName,sortOrder,data){//自定義排序功能（用來代替自帶的排序功能），需要兩個參數（可以參考前面）： var order = sortOrder === 'desc' ? -1 : 1 data.sort(function (a, b) { var aa = +((a[sortName] + '').replace(/[^\d]/g, '')) var bb = +((b[sortName] + '').replace(/[^\d]/g, '')) if (aa < bb) { return order * -1 } if (aa > bb) { return order } return 0 }) },： ajax:function(){},// 一種替換ajax調用的方法。應該實現與jQuery ajax方法相同的API queryParams: function(params) { // 請求遠程數據時，您可以通過修改queryParams來發送其他參數即server分頁時，這里的queryParams參數就是提交到服務器端的參數了 return params; //返回給服務器的格式如下{search: "", sort: undefined, order: "asc", offset: 0, limit: 20} 　　　　 //我們可以在這修改請求服務器的參數， //當queryParamsType時limit 參數包含limit、offset、order、search、sort當否則它包含pageSize, pageNumber, searchText, sortName, sortOrder 　　　　 //返回 false則中斷請求（return false）　　　　 }, responseHandler:function(res) { //服務端響應發送的數據會經過這里由我們處理后再顯示在html 詳細的例子 return res; ajax請求成功后，在發放數據之前可以對數據進行處理，比如修改下數據的值什么的 }, customSearch:function(data,text){// 執行自定義搜索功能替換內置搜索功能，需要兩個參數 return data.filter(function (row) {return row.field.indexOf(text) > -1}) }, footerStyle:function(column){// 頁腳樣式格式化程序函數，只需一個參數 m默認｛｝ return { css: { 'font-weight': 'normal' }, classes: 'my-class' } }, detailFormatter:function(index,row,element){//前提：detailView設為true，啟用了顯示detail view。- 用于格式化細節視圖- 返回一個字符串，通過第三個參數element直接添加到細節視圖的cell（某一格）中，其中，element為目標cell的jQuery element return ''; }, 詳細例子 detailFilter:function(index,row){//當detailView設置為true時，每行啟用擴展。返回true并且將啟用該行以進行擴展，返回false并禁用該行的擴展。默認函數返回true以啟用所有行的擴展。 return true }, ignoreClickToSelectOn:function(element){// 包含一個參數：element: 點擊的元素。返回 true 是點擊事件會被忽略，返回 false 將會自動選中。該選項只有在 clickToSelect 為 true 時才生效。 return $.inArray(element.tagName, ['A', 'BUTTON'] }, onLoadSuccess: function (data){//表選項也可以時使用事件，列選項的事件則是在events //數據加載成功時觸發 console.log(data); }, columns: [ {checkbox: false}, {radio: false}, { radio: false,//此列轉成radio上面單獨領出來是應為有字段顯示就不需要它呀 checkbox: false,//此列轉成checkbox 單獨拎出來同上 field: 'sex', //設置data-field的值 title: __('Operate'),//設置data-field的值 table: table, events: Table.api.events.operate, formatter: Table.api.formatter.operate,//單元格格式函數 this上下文是當前列對象 字段數據經過處理現實在瀏覽器(表格列的按鈕就是在這做的) formatter: function (value, row, index,field){ var color; if(value==1){ 　　　　　　　　　　 color='Green';　　 }else{ color="red";　　 } return '<div style="color:'+color+'">'+value+'</div>'; }, titleTooltip:'列標題工具提示文本。此選項還支持標題HTML屬性', class:'定義列的類名', rowspan:1,//指定單元格應占用的行數。 colspan:1,//指定單元格應占用的列數。 align:'center',//指定如何對齊列數據。可以使用'left'，'right'，'center'。 halign:'center',//指定如何對齊表頭。可以使用'left'，'right'，'center'。 falign:'center',//指示如何對齊表格頁腳。可以使用'left'，'right'，'center'。 valign:'middle',//指出如何對齊單元格數據。可以使用'top','middle','bottom' width:'10%',//列的寬度。如果未定義，寬度將自動擴展以適合其內容。格式'100px','10%'，100,如果想表格保持列自適應并且尺寸太小，則可以忽略這項（通過類等使用min / max-width） sortable:false,//設置為true以允許列可以排序。 order:'asc',//默認排序順序，只能是'asc'或'desc'。 visible:true,//設置為false以隱藏列項。 cardVisible:true,//設置為false以隱藏card 視圖狀態中的列項 switchable:true,//設置為false以禁用可切換的列項 clickToSelect:true,//設置為true時 在點擊列時可以選擇checkbox或radio footerFormatter:function(data){},//當前列對象函數該函數應返回一個字符串，其中包含要在頁腳單元格中顯示的文本 events::{},//使用格式化函數時的單元事件監聽器 四個參數event,value,row,index； html可以這么用 <th .. data-events="operateEvent"> sorter:function(a,b,rowA,rowB){},//用于進行本地排序的自定義字段排序函數(第一個字段值，第二個字段值，第一行，第二行) sortName:'',//提供可自定義的排序名稱，而不是標題中的默認排序名稱或列的字段名稱 cellStyle:function(value,row,index,field){ return{ css:{color:'red'}, classes:'bg-blue' } },//單元格樣式格式化函數 支持classs和css searchable:true,//設置為true以搜索此列的數據。 searchFormatter:true,//設置為true以搜索使用格式化數據 escape:false,//轉義字符串以插入HTML，替換 &, <, >, “, `, and ‘ 字符。 showSelectTitle:false,//設置為true以使用'radio'或'singleSelect''復選框'選項顯示列的標題。 checkboxEnabled:true,//設置false以禁用復選框/單選框 另一種設置<th data-checkbox="true" data-checkbox-enabled="false"></th> detailFormatter:function(index, row, $element) { return '' },//當detailView和detailViewByClick設置為true時，格式化詳細視圖。返回一個String，它將被追加到細節視圖單元格中(單擊某個單元格時，在它下面會追加一行，這行就是詳細視圖行，這個參數就是返回在詳細試圖顯示的內容)，可以選擇使用第三個參數直接呈現元素，這是目標單元格的一個jQuery元素。 searchHighlightFormatter:true,//格式：Boolean|Function，定義一個函數，為搜索高亮選項使用自定義高亮格式化程序 widthUnit:'px',//定義用于選項寬度的單元 }, { field:'opreation', tittle:'操作', aligin:'center', formatter:function(value,row,index,field){ return[ '<button type="button" id="btn_edit" class="btn btn-default" data-toggle="modal" data-target="#ModalInfo">修改</button>', '<button id="btn_delete" class="btn btn-warning">刪除</button>' ]; }, events:{ //觸發#btn_edit這個按鈕的點擊事件 'click #btn_edit':function(event,value,row,index){ } 　　　　　　　 //觸發#btn_detele這個按鈕的點擊事件 'click #btn_delete':function(){ //移除當前行的html table.bootstrapTable('remove', { field: 'id', values: [row.id] }); } } } ] }); var operateEvents = { /* 'click .like' 是類名？*/ 'click .like': function (e, value, row, index) {} } ~~~