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

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

引入 JS、CSS

<link th:href="@{/css/bootstrap-editable.css}" rel="stylesheet"/>
<script th:src="@{/dist/js/bootstrap-editable.js}"></script>
<script th:src="@{/dist/js/bootstrap-table-editable.js}"></script>
<script th:src="@{/js/demo/my.js}"></script>

修改 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 () {

                }

            });
        }

在线Demo预览

所需 JS、CSS 包下载 或扫描下方二维码回复：行内编辑包 免费获取。 详细请参考