表格配置项:public/assets/js/require-table.js
视图模型的JS文件:public/assets/js/backend
operate: function (value, row, index) {
var table = this.table;
// 操作配置
var options = table ? table.bootstrapTable('getOptions') : {};
// 默认按钮组
var buttons = $.extend([], this.buttons || []);
if (options.extend.dragsort_url !== '') {
buttons.push({
name: 'dragsort',
icon: 'fa fa-arrows',
title: __('Drag to sort'),
extend: 'data-toggle="tooltip"',
classname: 'btn btn-xs btn-primary btn-dragsort'
});
}
if (options.extend.edit_url !== '') {
buttons.push({
name: 'edit',
icon: 'fa fa-pencil',
title: __('Edit'),
extend: 'data-toggle="tooltip"',
classname: 'btn btn-xs btn-success btn-editone',
url: options.extend.edit_url
});
}
if (options.extend.del_url !== '') {
buttons.push({
name: 'del',
icon: 'fa fa-trash',
title: __('Del'),
extend: 'data-toggle="tooltip"',
classname: 'btn btn-xs btn-danger btn-delone'
});
}
//
// 这里是增加的查看操作
if (options.extend.view_url !== '') {////判断视图容器的url是否存在
buttons.push({
name: 'view',//操作名称
icon: 'fa fa-search',//显示图标 参考fastadmin图标库
title: '查看',//提示信息
extend: 'data-toggle="tooltip"',
classname: 'btn btn-xs btn-success btn-viewone',//这里的btn-viewone 就是上面增加的事件
url: options.extend.view_url//要记得保证这里的url没错 不然会报404
});
}
如上新增了查看的事件那么在视图容器的JS里面也需要做一些更改
Table.api.init({
extend: {
index_url: 'invitations/index',
add_url: 'invitations/add',
edit_url:'',
view_url: 'invitations/Qrcode',//这里的view_url要新增上去 因为点击图标后会根据这个url进行跳转
del_url: '',
multi_url: 'invitations/multi',
table: 'invitations',
}
});
单元格点击事件
// 单元格元素事件
events: {
operate: {
'click .btn-editone': function (e, value, row, index) {
e.stopPropagation();
e.preventDefault();
var table = $(this).closest('table');
var options = table.bootstrapTable('getOptions');
var ids = row[options.pk];
row = $.extend({}, row ? row : {}, { ids: ids });
var url = options.extend.edit_url;
Fast.api.open(Table.api.replaceurl(url, row, table), __('Edit'), $(this).data() || {});
},
'click .btn-viewone': function (e, value, row, index) {
console.log('查看事件被触发了');
e.stopPropagation();
e.preventDefault();
var table = $(this).closest('table');
var options = table.bootstrapTable('getOptions');
var ids = row[options.pk];
row = $.extend({}, row ? row : {}, { ids: ids });
var url = options.extend.view_url;
console.log('url为', url);
Fast.api.open(Table.api.replaceurl(url, row, table), '查看', $(this).data() || {});
},
'click .btn-delone': function (e, value, row, index) {
e.stopPropagation();
e.preventDefault();
var that = this;
var top = $(that).offset().top - $(window).scrollTop();
var left = $(that).offset().left - $(window).scrollLeft() - 260;
if (top + 154 > $(window).height()) {
top = top - 154;
}
if ($(window).width() < 480) {
top = left = undefined;
}
Layer.confirm(
__('Are you sure you want to delete this item?'),
{ icon: 3, title: __('Warning'), offset: [top, left], shadeClose: true },
function (index) {
var table = $(that).closest('table');
var options = table.bootstrapTable('getOptions');
Table.api.multi("del", row[options.pk], table, that);
Layer.close(index);
}
);
}
}
},