使用 x-editable 对 bootstrap-table 做行内编辑

拼搏现实的明天。 2022-03-09 19:34 253阅读 0赞

本篇主要介绍使用 x-editable 对 bootstrap-table 实现行内编辑。

引入 JS、CSS

修改 bootstrap-table columns

columns: [
                { 
                    field: "listPosition", title: "榜单位置", width: "100px",
                    editable: { 
                        type: 'number',//此类型只允许整数录入
                        title: '榜单位置',
                        validate: function (v) { 
                            if (!v) return '榜单位置不能为空';
    
                        }
                    }
                },
                { 
                    field: "awCost", title: "成本", width: "100px",
                    editable: { 
                        type: 'text',
                        title: '成本',
                        validate: function (v) { 
                            if(!v){ 
    
                                return '成本不能为空';
                            }
                            //正则校验输入格式：最多两位小数。
                            var patrn = /^([1-9]\d*\.\d{1,2}|0\.\d[1-9]|[1-9]\d*)$/;
                            if (!patrn.test(v)) { 
                                return '输入格式：最多两位小数';
                            }
    
                        }
                    }
                }
            ],
            onEditableSave: function (field, row, oldValue, $el) { 
                $.ajax({ 
                    type: "post",
                    url: '../../data/demo/saveorupdate?_' + $.now(),
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    data: JSON.stringify({ 
                        awCost: row.awCost,
                        rankingPosition: row.listPosition
                    }),
                    success: function (data, status) { 
                        vm.load();
                    },
                    error: function () { 
                        alert('编辑失败');
                    },
                    complete: function () { 
    
                    }
    
                });
            }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3c5MDMzMjg2MTU_size_16_color_FFFFFF_t_70]  
[在线Demo预览][Demo]

[所需 JS、CSS 包下载][JS_CSS]  
或扫描下方二维码回复：`行内编辑包` 免费获取。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3c5MDMzMjg2MTU_size_16_color_FFFFFF_t_70 1]  
[详细请参考][Link 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3c5MDMzMjg2MTU_size_16_color_FFFFFF_t_70]: /images/20220309/c414d030cb8a425ea49f641860a39c86.png
[Demo]: http://vitalets.github.io/x-editable/demo-bs3.html
[JS_CSS]: https://download.csdn.net/download/w903328615/11017048
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3c5MDMzMjg2MTU_size_16_color_FFFFFF_t_70 1]: /images/20220309/d6acf1fa96654d7db9b2a238beca5d79.png
[Link 1]: https://www.cnblogs.com/landeanfen/p/5821192.html#_label0