fastadmin之editable组件_表格行内编辑事件

Posted 2021-11-23 请叫我郝先生

1.简介
x-editable组件是一个适用于bootstrap（目前只更新到bootstrap3）,jquery，jquery UI三种风格样式的弹出框编辑插件。本文根据项目需求主要介绍它在bootstrap-tabe中的应用。
x-editable开源地址：https://github.com/vitalets/x-editable
x-editable文档地址：http://vitalets.github.io/x-editable/docs.html
x-editable在线Demo：http://vitalets.github.io/x-editable/demo-bs3.html

案例效果如下

 官网地址：https://vitalets.github.io/x-editable/demo-bs3.html

开发汇总思路：

首先我们需要在我们当前的控制器所对应的JS文件头部添加依赖，追加一个editable，如下：

define(['jquery', 'bootstrap', 'backend', 'csmtable', 'form','upload','editable'], function ($, undefined, Backend, Table, Form, Upload)  {

}

然后我们只需要在JS中的字段配置简单添加一个editable:true即可生效，例如：

{field: 'take_effect_status', title: '蓝牙生效状态', operate:false,editable: {
	type: 'select',
	pk: 1,
	source: 
            [
	       {value: '1', text: '有效'},
	       {value: '2', text: '无效'},
               {value: '3', text: '待配置'},
	    ]
	},formatter: function (value, row) {
               return row.take_effect_status;
        }
},
{field: 'message', title: __('备注'),editable: {
	 type: 'text',
         placeholder:"请输入蓝牙备注",
         emptytext : '空'
}},
//但其实editable参数还支持更多配置，例如：
{
field: 'SparePartName',
       title: '品名及规格型号',
       editable: {
          type: 'text',
          title: '品名及规格型号',
          validate: function (value) {
              if (!$.trim(value)) {
                     return '不能为空';
                 }
              }
        },
        halign: 'center',
        align: 'center'
},

新增 编辑界面使用 edittable

$('.invoice_money').editable({
   type: 'text',
   title: '发票金额',
   success: function(response, newValue) {
        $(".invoice_money_s").val(newValue);
   }
});