bootstrap -table

使用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

相關文章
相關標籤/搜索