fastadmin中使用 x-editable

fastadmin中的表格使用的是 bootstarp-table的插件, 其中没有看到它集成 x-editable , x-eidtable 插件可以允许用户直接在表格的字段上去修改数据, 这个功能还是很方便的, 那么我们怎么去让fastadmin也拥有这样的功能呢?
网上有一个分享方法,很好的, 我在这里做一下记录, 不太懂 require.js 所以就照它的方法, 再结合自已的功能稍加改动就可以了传送门

安装 x-editable bower install x-editable;
修改 fastadmin public/assets/js/require-backend.js中的代码, 为来加载 x-editable

同时在 shim 的标签下加入以上这段

'x-editable':{deps: ['jquery','bootstrap','css!../libs/x-editable/dist/bootstrap3-editable/css/bootstrap-editable.css']},

然后在我们要使用的文件的, 引入

在 field 中加入 formatter 的回调, 返回一个 a 标签

{field: "sort" ,title: __("像册排序"), formatter:function(value,row,index){return '<a href="#" class="sort" data-pk="'+row.id+'">'+value+"</a>";}},{field:"sortforcard", title:__("主推排序"),formatter:function(value,row,index){return '<a href="#" class="sortforcard" data-pk="'+row.id+'">'+value+"</a>";}},

在表格加载成功的时候执行下面的代码

图片中的代码方便复制

            table.bootstrapTable({url: $.fn.bootstrapTable.defaults.extend.index_url,pk: 'id',sortName: 'id',onLoadSuccess(){var field = 'sort';var selector = '.' + field;var name = 'row[' + field + ']';$(selector).editable({type: 'text',url: function (params) {$.ajax({type: 'POST',dataType: 'JSON',url: $.fn.bootstrapTable.defaults.extend.edit_url + '/ids/' + params.pk,data: {[name]: params.value},complete: function (xhr, status) {if (xhr.responseJSON.code === 1) {Toastr.success('操作成功');} else {Toastr.error(xhr.responseJSON.msg !== '' ? xhr.responseJSON.msg : '未知错误');table.bootstrapTable('refresh');}}});}});var field1 = 'sortforcard';var selector1 = '.' + field1;var name1 = 'row[' + field1 + ']';$(selector1).editable({type: 'text',url: function (params) {$.ajax({type: 'POST',dataType: 'JSON',url: $.fn.bootstrapTable.defaults.extend.edit_url + '/ids/' + params.pk,data: {[name1]: params.value},complete: function (xhr, status) {if (xhr.responseJSON.code === 1) {Toastr.success('操作成功');} else {Toastr.error(xhr.responseJSON.msg !== '' ? xhr.responseJSON.msg : '未知错误');table.bootstrapTable('refresh');}}});}});},columns: [[{checkbox: true},{field: 'id', title: __('Id')},{field: 'goods_name', title: __('Goods_name'), operate: 'LIKE'},{field: 'price', title: __('价格')},{field: 'category.name', title: __("Cid")},{field: 'signle_image', title: __('封面'), operate: false, events: Table.api.events.image, formatter: Table.api.formatter.image},{field: 'banner_images', title: __('Banner_images'), operate: false, events: Table.api.events.image, formatter: Table.api.formatter.images},{field: 'content_images', title: __('Content_images'), operate: false, events: Table.api.events.image, formatter: Table.api.formatter.images},{field: 'img_switch', title:__("名片首推"), searchList:{0:__('no'),1:__('yes')},formatter: Table.api.formatter.toggle},{field: 'create_time', title: __('Create_time'), operate:'RANGE', addclass:'datetimerange', autocomplete:false},{field: "sort" ,title: __("像册排序"), formatter:function(value,row,index){return '<a href="#" class="sort" data-pk="'+row.id+'">'+value+"</a>";}},{field:"sortforcard", title:__("主推排序"),formatter:function(value,row,index){return '<a href="#" class="sortforcard" data-pk="'+row.id+'">'+value+"</a>";}},{field: 'operate', title: __('Operate'), table: table, events: Table.api.events.operate, formatter: Table.api.formatter.operate}]]});

这是最终的效果

fastadmin中使用 x-editable相关推荐

一张图解析FastAdmin中的FormBuilder表单生成器
功能描述在使用FastAdmin一键生成CRUD后,默认的生成的都是原生HTML的组件代码,会有许多不熟悉前端的小伙伴改动起来会比较费劲.其实在FastAdmin中有一个简单的FormBuilder ...
fastadmin中使用phpExcel导出表格数据到excel中
虽然说fastadmin中表格自带导出excel,但是那个东西忒不好用了,每次点击导出,就刷新表格,默认最近七天的数据,所以无奈之下只好另寻办法了,废话不多说,接下来说一下phpExcel的使用: 一 ...
在FastAdmin中引入Jquery插件
任务需求由于fastadmin自带的插件可能无法满足我们的需求.比如,当我们需要用前端生成二维码时,需要用到jquery.qrcode插件.此时,就需要将jquery插件集成到项目中. 解决方案第 ...
Uncaught TypeError: $(...).size is not a function FastAdmin中使用bower的报错
官方安装使用方法:https://www.kancloud.cn/karsonzhang/fastadmin/784094 错误是因为版本问题!!! 根据需要合理使用对应的版本. bower upda ...
fastadmin中selectpage条件wherein添加
public function selectpage() {//设置过滤方法$this->request->filter(['strip_tags', 'htmlspecialchars' ...
fastadmin 中success（）无法跳转
if ($result !== false) {$this->success('提交成功','gdzb/add'); } 执行这段代码无效. 在前端js的add里添加如下 Form.api.bi ...
fastadmin中自定义表格排序
位置:public/assets/js/backend/pim/test.js sortName:表示需要排序的数据库字段名 sortOrder:表示排序规则(desc:降序,asc:升序) 这里是按 ...
在微信小程序中，如果自动通过fastadmin来获取用户所在的省市地区？
要在微信小程序中自动获取用户所在的省市地区,可以通过fastadmin提供的API来实现.具体步骤如下: 在fastadmin中,需要建立相应的API接口,用于获取用户所在的省市地区信息.可以通过fa ...
Android中edittext一些属性设置
首先准备一个EditText,添加 background="@drawable/bg_edittext" <EditTextandroid:id="@+id/edi ...

fastadmin中使用 x-editable

fastadmin中使用 x-editable相关推荐

最新文章

热门文章