上面的 footerFormatter 和 formatter 都是对于当前列的显示进行处理的事件，文档中如下
formatter:
The context (this) is the column Object. The cell formatter function, take three parameters: value: the field value. row: the row record data. index: the row index.
footerFormatter :
The context (this) is the column Object. The function, take one parameter:
data: Array of all the data rows. the function should return a string with the text to show in the footer cell.
都是对于当前列进行处理显示
如下就是增加了两个按钮在一个单元格中
function operateFormatter(value, row, index) { return [ '<a href="javascript:void(0)" title="Like">', '<i></i>', '</a> ', '<a href="javascript:void(0)" title="Remove">', '<i></i>', '</a>' ].join(''); }
也可以在这里就增加事件的处理
<%--{ title: '操作', field: 'id', align: 'center', formatter:function(value,row,index){ var e = '<a href="#" target="_blank" mce_href="#" target="_blank">编辑</a> '; var d = '<a href="#" target="_blank" mce_href="#" target="_blank">删除</a> '; return e+d; 也可以这样处理事件的 } }--%>
官方中文档说的处理事件可以像下面这里处理
The cell events listener when you use formatter function, take four parameters: event: the jQuery event. value: the field value. row: the row record data. index: the row index.
Example code:
{ field: 'operate', title: 'Item Operate', align: 'center', events: operateEvents, formatter: operateFormatter } function operateFormatter(value, row, index) { return [ '<a href="javascript:void(0)" title="Like">', '<i></i>', '</a> ', '<a href="javascript:void(0)" title="Remove">', '<i></i>', '</a>' ].join(''); } window.operateEvents = { 'click .like': function (e, value, row, index) { alert('You click like action, row: ' + JSON.stringify(row)); }, 'click .remove': function (e, value, row, index) { $table.bootstrapTable('remove', { field: 'id', values: [row.id] }); } };
处理系统中存在的事件的处理，文档中有说
$('#table').bootstrapTable({ onEventName: function (arg1, arg2, ...) { // ... } }); $('#table').on('event-name.bs.table', function (e, arg1, arg2, ...) { // ... }); //这个名字文档中很多! onAll all.bs.table name, args Fires when all events trigger, the parameters contain: name: the event name, args: the event data.
处理一些方法，比如当前选择了多少行，全选等等
//The calling method syntax: $('#table').bootstrapTable('method', parameter); //1 当前选择选的框框的id getSelections none Return selected rows, when no record selected, an empty array will return. //2.全选 getAllSelections none Return all selected rows contain search or filter, when no record selected, an empty array will return. $table.on('all.bs.table', function (e, name, args) { console.log(name, args); }); //3.删除 前台的数据，不需要从后台重新加载 remove params Remove data from table, the params contains two properties: field: the field name of remove rows. values: the array of values for rows which should be removed.
.....很多很多的东西！
一个删除的按钮，删除所有的选择的事件！是不是很好呢！
function getIdSelections() { return $.map($table.bootstrapTable('getSelections'), function (row) { return row.id }); } $remove.click(function () { var ids = getIdSelections(); $table.bootstrapTable('remove', { field: 'id', values: ids }); $remove.prop('disabled', true); });
如果大家还想深入学习，可以点击这里进行学习，再为大家附两个精彩的专题：Bootstrap学习教程 Bootstrap实战教程