效果入下图，在表格顶部增加一个自定义按钮，点击确认后请求服务器接口
表格对应的index.html中
<div class="panel-body"><div id="myTabContent" class="tab-content"><div class="tab-pane fade active in" id="one"><div class="widget-body no-padding"><div id="toolbar" class="toolbar"><a href="javascript:;" class="btn btn-primary btn-refresh" title="{:__('Refresh')}" ><i class="fa fa-refresh"></i> </a>
<!-- <a href="javascript:;" class="btn btn-success btn-add {:$auth->check('chat/group/add')?'':'hide'}" title="{:__('Add')}" ><i class="fa fa-plus"></i> {:__('Add')}</a>-->
<!-- <a href="javascript:;" class="btn btn-success btn-edit btn-disabled disabled {:$auth->check('chat/group/edit')?'':'hide'}" title="{:__('Edit')}" ><i class="fa fa-pencil"></i> {:__('Edit')}</a>-->
<!-- <a href="javascript:;" class="btn btn-success btn-del btn-disabled disabled {:$auth->check('chat/group/del')?'':'hide'}" title="{:__('Delete')}" ><i class="fa fa-refresh"></i> {:__('Delete')}</a>-->
<!-- 新增刷新数据按钮--><a href="javascript:;" class="btn btn-success btn-synchronization {:$auth->check('chat/group/synchronization')?'':'hide'}" title="{:__('Synchronization')}" ><i class="fa fa-cloud-download"></i> {:__('Synchronization')}</a></div><table id="table" class="table table-striped table-bordered table-hover table-nowrap"data-operate-edit="{:$auth->check('chat/group/edit')}"data-operate-del="{:$auth->check('chat/group/del')}"width="100%"></table></div></div></div></div>表格对应的js
// 初始化表格参数配置Table.api.init({extend: {index_url: 'chat/group/index' + location.search,// add_url: 'chat/group/add',// edit_url: 'chat/group/edit',// del_url: 'chat/group/del',// 增加按钮对应的后台的urlsynchronization_url: 'chat/group/synchronization',multi_url: 'chat/group/multi',import_url: 'chat/group/import',table: 'chat_group',}});edit: function () {Controller.api.bindevent();},// 新增同步数据synchronization: function () {Controller.api.bindevent();},api: {bindevent: function () {Form.api.bindevent($("form[role=form]"));}}在require-table.js文件中
config: {checkboxtd: 'tbody>tr>td.bs-checkbox',toolbar: '.toolbar',refreshbtn: '.btn-refresh',addbtn: '.btn-add',editbtn: '.btn-edit',delbtn: '.btn-del',//增加自定义按钮synchronizationbtn: '.btn-synchronization',importbtn: '.btn-import',multibtn: '.btn-multi',disabledbtn: '.btn-disabled',editonebtn: '.btn-editone',restoreonebtn: '.btn-restoreone',destroyonebtn: '.btn-destroyone',restoreallbtn: '.btn-restoreall',destroyallbtn: '.btn-destroyall',dragsortfield: 'weigh',},button: { //现有代码为了确定增加代码的位置edit: {name: 'edit',icon: 'fa fa-pencil',title: __('Edit'),extend: 'data-toggle="tooltip" data-container="body"',classname: 'btn btn-xs btn-success btn-editone'},del: {name: 'del',icon: 'fa fa-trash',title: __('Del'),extend: 'data-toggle="tooltip" data-container="body"',classname: 'btn btn-xs btn-danger btn-delone'},//增加自定义按钮synchronization: {name: 'synchronization',icon: 'fa fa-trash',title: __('Synchronization'),extend: 'data-toggle="tooltip" data-container="body"',classname: 'btn btn-xs btn-danger btn-delone'},// 批量删除按钮事件 现有代码为了确定增加代码的位置toolbar.on('click', Table.config.delbtn, function () {var that = this;var ids = Table.api.selectedids(table);Layer.confirm(__('Are you sure you want to delete the %s selected item?', ids.length),{icon: 3, title: __('Warning'), offset: 0, shadeClose: true, btn: [__('OK'), __('Cancel')]},function (index) {Table.api.multi("del", ids, table, that);Layer.close(index);});});// 企业微信同步数据事件toolbar.on('click', Table.config.synchronizationbtn, function () {var that = this;var ids = Table.api.selectedids(table);Layer.confirm(__('确认从企业微信重新获取信息？'),{icon: 3, title: __('Warning'), offset: 0, shadeClose: true, btn: [__('OK'), __('Cancel')]},function (index) {Table.api.synchronization("synchronization", ids, table, that);;Layer.close(index);});});// 批量操作请求 现有代码为了确定增加代码的位置multi: function (action, ids, table, element) {var options = table.bootstrapTable('getOptions');var data = element ? $(element).data() : {};ids = ($.isArray(ids) ? ids.join(",") : ids);var url = typeof data.url !== "undefined" ? data.url : (action == "del" ? options.extend.del_url : options.extend.multi_url);var params = typeof data.params !== "undefined" ? (typeof data.params == 'object' ? $.param(data.params) : data.params) : '';options = {url: url, data: {action: action, ids: ids, params: params}};Fast.api.ajax(options, function (data, ret) {table.trigger("uncheckbox");var success = $(element).data("success") || $.noop;if (typeof success === 'function') {if (false === success.call(element, data, ret)) {return false;}}table.bootstrapTable('refresh');}, function (data, ret) {var error = $(element).data("error") || $.noop;if (typeof error === 'function') {if (false === error.call(element, data, ret)) {return false;}}});},// 增加同步微信数据请求synchronization: function (action, ids, table, element) {var options = table.bootstrapTable('getOptions');var url = options.extend.synchronization_url;options = {url: url, data: {}};Fast.api.ajax(options, function (data, ret) {table.trigger("uncheckbox");var success = $(element).data("success") || $.noop;if (typeof success === 'function') {if (false === success.call(element, data, ret)) {return false;}}table.bootstrapTable('refresh');}, function (data, ret) {var error = $(element).data("error") || $.noop;if (typeof error === 'function') {if (false === error.call(element, data, ret)) {return false;}}});},如此之后前端代码已经实现完毕，点击就出现如图效果，并请求了后台接口。
