效果入下图,在表格顶部增加一个自定义按钮,点击确认后请求服务器接口
表格对应的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',
// 增加按钮对应的后台的url
synchronization_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;
}
}
});
},
如此之后前端代码已经实现完毕,点击就出现如图效果,并请求了后台接口。