刚到fastadmin不久,对这个框架刚有个基本了解,说的不好情大家不要喷我,我只是想分享一下个人的经验,让初学者可以少走些弯路,话不多说,直奔主题。
有时我们要自定义一些自己的按钮,给记录增加一些额外的功能,这些普通的按钮不用多说,很多文章都有,只要写个button参数加个URL就可以了,今天我想说说自定义fastadmin系统自带的添加/编辑/删除按钮的事件,这个我觉得挺特殊的,所以拿出来讲讲。
因为我要完成一些不需要本地数据表需要调用其他数据表的逻辑业务,所以需要建立一些所谓的不关联数据表的菜单,这其中需要增加一些自定义的新增,编辑,删除功能,因为还要传些自定义的参数,为了和框架整体风格一致,我选择了它的默认按钮风格,并加了参数,但是往往事与愿违,通过翻找源码发现,fastadmin的js库对添加/编辑/删除按钮都做了封装,而且参数是写死了的,就是那种给定地址后在地址后面加ids,还是默认的不能改,改库的话对面向对象不够友好,而且不易于移植,所以我选择了,通过js接口调用,下面贴上代码。(为了易理解模块、方法和参数尽量简化)
添加按钮:
首先,这个比较简单
html端:只需增加默认的html加上你的参数就可以
{:__('Add')}
community控制器diyadd方法param参数$id是上一页面传进来的ids参数,为了不被覆盖参数,后端做了处理,因为js库默认是加ids参数的。
js端:只需使用自带的add事件复制处理就可以完成功能。
diyadd: function () { Controller.api.bindevent(); },
或者你也可以改方法名,但注意要和html方法名保持一致。
后端:就用系统默认的,自己加接收参数,最后成功$this->success();错误返回$this->error();就可以了。
编辑按钮:
html端:无
js端:因为要和系统一致,所以添加代码就不能加事件绑定的元素代码了,在你当前页面方法的js里加上button代码
index: function () {
// 初始化表格参数配置 Table.api.init({ extend: { index_url: 'community/index/pids/' + Config.param.pids + location.search, add_url: 'community/diyadd/param/2/pids/' + Config.param.pids, table: 'community/index', } }); var table = $("#table"); // 初始化表格 table.bootstrapTable({ url: $.fn.bootstrapTable.defaults.extend.index_url, pk: 'id', sortName: 'id', columns: [ [ {checkbox: true}, {field: 'name', title: __('Name'), operate: 'LIKE'}, {field: 'operate', title: __('Operate'), table: table, buttons: [ {name: 'editdiy', title: __('Edit'), icon: 'fa fa-pencil', extend: 'data-toggle="tooltip"', classname: 'btn btn-xs btn-success btn-dialog', url: function(value){return 'community/diyedit/pids/' + Config.param.pids + '/param/' + value.param+ '/ids/' + value.id;}}, {name: 'deldiy', title: __('Del'), icon: 'fa fa-trash', extend: 'data-toggle="tooltip"', classname: 'btn btn-xs btn-danger btn-diydel'} ], events: Controller.api.events.operate, formatter: Table.api.formatter.operate} ] ] }); // 为表格绑定事件 Table.api.bindevent(table); },
注意:这里只写add_url不能写edit_url和del_url,会和自定义的重复。
将编辑按钮的tn-editone改为btn-dialog对话框形式,url写个function返回。
下面加上diyedit: function () {
Controller.api.bindevent(); },
绑定事件即可。
> > 或者你觉得button按钮的链接在浏览器指向有点乱,你也可以绑定事件和删除按钮一样,例如:在api方法里加上绑定事件events
api: {
events: {//绑定事件的方法 operate: $.extend({ //点击编辑 'click .btn-basementedit': function (e, value, row, index) { e.stopPropagation(); e.preventDefault(); var that = this; var table = $(that).closest('table'); var options = table.bootstrapTable('getOptions'); var ids = row.id; var url = 'community/diyedit/pids/' + Config.param.pids + '/param/' + row.param+ '/ids/' + ids; Fast.api.open(Table.api.replaceurl(url, row, table), __('Edit'), $(this).data() || {}); }}, Table.api.events.operate)}
}
后端:也是系统默认的就可以,自己加接收参数,最后成功$this->success();错误返回$this->error();就可以了。
删除按钮:本来以为应该是挺简单的,没想到确是代码比较多的,有点小难。
html端:无
js端:上面贴了代码了,就不复制了,就是将原有的btn-delone改为需要自定义的事件元素代码btn-diydel即可。
下面在api方法里加上绑定事件events(为了初学者不混淆,我将整个api代码贴出)
api: {
bindevent: function () { Form.api.bindevent($("form[role=form]")); }, events: {//绑定事件的方法 operate: $.extend({ //点击删除 'click .btn-diydel': 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; } var setUrl = 'community/diydel/pids/' + Config.param.pids + '/param/' + row.param+ '/ids/' + row.id; 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'); options = {url: setUrl, data: {action: 'diydel', ids: row.id, params: ''}}; Fast.api.ajax(options, function (data, ret) { table.trigger("uncheckbox"); var success = $(that).data("success") || $.noop; if (typeof success === 'function') { if (false === success.call(that, data, ret)) { return false; } } table.bootstrapTable('refresh'); }, function (data, ret) { var error = $(that).data("error") || $.noop; if (typeof error === 'function') { if (false === error.call(that, data, ret)) { return false; } } }); Layer.close(index); } ); } }, Table.api.events.operate) } }
后端:也是系统默认的就可以,自己加接收参数,最后成功$this->success();错误返回$this->error();就可以了。
批量操作按钮事件的我没写,应该和普通的也差不多了,代码都贴出来了,希望能对大家有所帮助,我是个后端对前端理解不是很深,写的不好的地方,希望大神们多多指教,互相交流。
希望以上内容对你有所帮助!如果还有其他问题,请随时提问。 各类知识收集 拥有多年CMS企业建站经验,对 iCMS, Fastadmin, ClassCMS, LeCMS, PbootCMS, PHPCMS, 易优CMS, YzmCMS, 讯睿CMS, 极致CMS, Wordpress, HkCMS, YznCMS, WellCMS, ThinkCMF, 等各类cms的相互转化,程序开发,网站制作,bug修复,程序杀毒,插件定制都可以提供最佳解决方案。