记录:fastadmin使用editable实现行内编辑无刷新效果。
一、下载资源
editable资源下载地址
二、放在如下目录
三、引入并应用
代码示例:
require.config({paths: {'editable': '../libs/bootstrap-table/dist/extensions/editable/bootstrap-table-editable.min','x-editable': '../editable/js/bootstrap-editable.min',},shim: {'editable': {deps: ['x-editable', 'bootstrap-table']},"x-editable": {deps: ["css!../editable/css/bootstrap-editable.css"],}}
});
define(['jquery', 'bootstrap', 'backend', 'table', 'form', 'editable'], function ($, undefined, Backend, Table, Form, Editable) {var Controller = {index: function () {// 初始化表格参数配置Table.api.init({extend: {index_url: 'dealerxilie/index' + location.search,add_url: 'dealerxilie/add',edit_url: 'dealerxilie/edit',del_url: 'dealerxilie/del',multi_url: 'dealerxilie/multi',import_url: 'dealerxilie/import',table: 'dealer_xilie',}});var table = $("#table");// 初始化表格table.bootstrapTable({url: $.fn.bootstrapTable.defaults.extend.index_url,pk: 'id',sortName: 'id',columns: [[{checkbox: true},{field: 'id', title: __('Id')},{field: 'name', title: __('Name'), operate: 'LIKE'},{field: 'code', title: __('Code'), operate: 'LIKE'},{field: 'remark', title: __('Remark'), align: 'left',editable: true,operate: false, formatter:function (value, row, index) {return !value?'无':value;}}, {field: 'createtime', title: __('Createtime'), operate:'RANGE', addclass:'datetimerange', autocomplete:false, formatter: Table.api.formatter.datetime},{field: 'updatetime', title: __('Updatetime'), operate:'RANGE', addclass:'datetimerange', autocomplete:false, formatter: Table.api.formatter.datetime},{field: 'operate', title: __('Operate'), table: table, events: Table.api.events.operate, formatter: Table.api.formatter.operate}]],onEditableSave:function (field, row, oldValue, $el) {var data = {}; //组合更新数据data["row[field]"] =field; //字段名data["row[" + field + "]"] = row[field]; //字段值data["row[id]"] = row['id']; //主键Fast.api.ajax({url: $.fn.bootstrapTable.defaults.extend.edit_url + "/ids/" + row[this.pk],data: data},function () {$(".btn-refresh").trigger("click");});},});// 为表格绑定事件Table.api.bindevent(table);},add: function () {Controller.api.bindevent();},edit: function () {Controller.api.bindevent();},api: {bindevent: function () {Form.api.bindevent($("form[role=form]"));}}};return Controller;
});