使用bootstrap-table插件時,會用到表格的點擊事件,事件以下:
BootstrapTable.DEFAULTS = {
classes: ‘table table-hover’,
locale: undefined,
height: undefined,
undefinedText: ‘-‘,
sortName: undefined,
sortOrder: ‘asc’,
sortStable: false,
striped: false,
columns: [[]],
data: [],
dataField: ‘rows’,
method: ‘get’,
url: undefined,
ajax: undefined,
cache: true,
contentType: ‘application/json;charset=UTF-8’,//這裏我就加了個utf-8
dataType: ‘json’,
ajaxOptions: {},
queryParams: function (params) {//這個是設置查詢時候的參數,我直接在源碼中修改過,不喜歡offetset 我後臺用的 是pageNo. 這樣處理就比較的知足個人要求,其實也能夠在後臺改,麻煩!
return params;
},
queryParamsType: ‘limit’, // undefined (這裏是根據不一樣的參數,選擇不一樣的查詢的條件)
responseHandler: function (res) {//這裏我查看源碼的,在ajax請求成功後,發放數據以前能夠對返回的數據進行處理,返回什麼部分的數據,好比個人就須要進行整改的!
return res;
},
pagination: false,
onlyInfoPagination: false,
sidePagination: ‘client’, // client or server
totalRows: 0, // server side need to set
pageNumber: 1,
pageSize: 10,
pageList: [10, 25, 50, 100],
paginationHAlign: ‘right’, //right, left
paginationVAlign: ‘bottom’, //bottom, top, both
paginationDetailHAlign: ‘left’, //right, left
paginationPreText: ‘‹’,
paginationNextText: ‘›’,
search: false,
searchOnEnterKey: false,
strictSearch: false,
searchAlign: ‘right’,
selectItemName: ‘btSelectItem’,
showHeader: true,
showFooter: false,
showColumns: false,
showPaginationSwitch: false,//展現頁數的選擇?
showRefresh: false,
showToggle: false,
buttonsAlign: ‘right’,
smartDisplay: true,
escape: false,
minimumCountColumns: 1,
idField: undefined,
uniqueId: undefined,
cardView: false,
detailView: false,
detailFormatter: function (index, row) {
return 」;
},
trimOnSearch: true,
clickToSelect: false,
singleSelect: false,
toolbar: undefined,
toolbarAlign: ‘left’,
checkboxHeader: true,
sortable: true,
silentSort: true,
maintainSelected: false,
searchTimeOut: 500,
searchText: 」,
iconSize: undefined,
buttonsClass: ‘default’,
iconsPrefix: ‘glyphicon’, // glyphicon of fa (font awesome)
icons: {
paginationSwitchDown: ‘glyphicon-collapse-down icon-chevron-down’,
paginationSwitchUp: ‘glyphicon-collapse-up icon-chevron-up’,
refresh: ‘glyphicon-refresh icon-refresh’,
toggle: ‘glyphicon-list-alt icon-list-alt’,
columns: ‘glyphicon-th icon-th’,
detailOpen: ‘glyphicon-plus icon-plus’,
detailClose: ‘glyphicon-minus icon-minus’
},ajax
customSearch: $.noop, customSort: $.noop, rowStyle: function (row, index) { return {}; }, rowAttributes: function (row, index) { return {}; }, footerStyle: function (row, index) { return {}; }, onAll: function (name, args) { return false; }, onClickCell: function (field, value, row, $element) { return false; }, onDblClickCell: function (field, value, row, $element) { return false; }, onClickRow: function (item, $element) { return false; }, onDblClickRow: function (item, $element) { return false; }, onSort: function (name, order) { return false; }, onCheck: function (row) { return false; }, onUncheck: function (row) { return false; }, onCheckAll: function (rows) { return false; }, onUncheckAll: function (rows) { return false; }, onCheckSome: function (rows) { return false; }, onUncheckSome: function (rows) { return false; }, onLoadSuccess: function (data) { return false; }, onLoadError: function (status) { return false; }, onColumnSwitch: function (field, checked) { return false; }, onPageChange: function (number, size) { return false; }, onSearch: function (text) { return false; }, onToggle: function (cardView) { return false; }, onPreBody: function (data) { return false; }, onPostBody: function () { return false; }, onPostHeader: function () { return false; }, onExpandRow: function (index, row, $detail) { return false; }, onCollapseRow: function (index, row) { return false; }, onRefreshOptions: function (options) { return false; }, onRefresh: function (params) { return false; }, onResetView: function () { return false; } };
大體繪畫表格參數說明:
url: ‘/TableStyle/GetOrder’, //請求後臺的URL(*)
method: ‘get’, //請求方式(*)
//toolbar: ‘#toolbar’, //工具按鈕用哪一個容器
striped: true, //是否顯示行間隔色
cache: false, //是否使用緩存,默認爲true,因此通常狀況下須要設置一下這個屬性(*)
pagination: true, //是否顯示分頁(*)
sortable: false, //是否啓用排序
sortOrder: 「asc」, //排序方式
queryParams: oTableInit.queryParams,//傳遞參數(*)
sidePagination: 「server」, //分頁方式:client客戶端分頁,server服務端分頁(*)
pageNumber: 1, //初始化加載第一頁,默認第一頁
pageSize: 10, //每頁的記錄行數(*)
pageList: [10, 25, 50, 100], //可供選擇的每頁的行數(*)
search: true, //是否顯示錶格搜索,此搜索是客戶端搜索,不會進服務端,因此,我的感受意義不大
strictSearch: true,
showColumns: true, //是否顯示全部的列
showRefresh: true, //是否顯示刷新按鈕
minimumCountColumns: 2, //最少容許的列數
clickToSelect: true, //是否啓用點擊選中行
height: 500, //行高,若是沒有設置height屬性,表格自動根據記錄條數以爲表格高度
uniqueId: 「ID」, //每一行的惟一標識,通常爲主鍵列
showToggle: true, //是否顯示詳細視圖和列表視圖的切換按鈕
cardView: false, //是否顯示詳細視圖
detailView: false, //是否顯示父子表
表格點擊事件就不一一例句的基本顧名思義,如:
onClickCell爲單元格的點擊事件,根據函數的參數能夠獲取後臺帶來的數據。json