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

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

你可能感兴趣的:(bootstrap,前端)