bootstrap -table

2019独角兽企业重金招聘Python工程师标准>>>

使用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’ 
},

    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为单元格的点击事件，根据函数的参数可以获取后台带来的数据。

转载于:https://my.oschina.net/u/2552286/blog/1558305