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="#" mce_href="#">编辑</a> '; var d = '<a href="#" mce_href="#">删除</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 Table的使用总结，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
您可能感兴趣的文章: