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

1. 安装 x-editable bower install x-editable;
2. 修改 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}]]});

这是最终的效果