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

男娘i 2022-08-30 11:37 807阅读 0赞

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

案例效果如下

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhb3l1bnl1bjg4OA_size_16_color_FFFFFF_t_70][]

官网地址：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);
       }
    });

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhb3l1bnl1bjg4OA_size_16_color_FFFFFF_t_70]: /images/20220829/98cfb40158174365bacf460eac994ba3.png