bootstrapTable內部編輯學習筆記

$(function () {
        var options = {
            url: prefix2 + "/list",
            id: "bootstrap-table—input",
            modalName: "經營參數",
            updateUrl: prefix2 + "/edit/{id}",
            removeUrl: prefix2 + "/remove",
            showSearch: false,
            showRefresh: false,
            showToggle: false,
            showColumns: false,
            showPageGo: true,
            pagination: false,
            columns: [
                {
                    field: 'id',
                    title: '序號',
                    visible: false
                },
                {
                    field: 'amountAssets',
                    title: '上一年淨資產數額(萬元)',
                    titleTooltip: "即開始實施股權激勵的上一年，例如：今年作方案，明年1月1日起實施，則「上一年」就是指今年。",
                    // editable: true
                },
                {
                    field: 'operatingIncome',
                    title: '上一年營業收入(萬元含稅)',
                    titleTooltip: '指稅後利潤。',
                    // editable: true
                },
                {
                    field: 'netprofit',
                    title: '上一年淨利潤(萬元)',
                    // editable: true
                },
                {
                    title: '操做',
                    align: 'center',
                    formatter: function (value, row, index) {
                        var actions = [];
                        actions.push('<a class="btn btn-success btn-xs " href="javascript:void(0)" onclick="$.operate.edit(\'' + row.id + '\')"><i class="fa fa-edit"></i>編輯</a> ');
                        // actions.push('<a class="btn btn-danger btn-xs " href="javascript:void(0)" onclick="$.operate.remove(\'' + row.id + '\')"><i class="fa fa-remove"></i>刪除</a>');
                        return actions.join('');
                    }
                }]
            ,
            /**
             * @param {點擊列的 field 名稱} field
             * @param {點擊列的 value 值} value
             * @param {點擊列的整行數據} row
             * @param {td 元素} $element
             */
            onClickCell: function (field, value, row, $element) {
                $element.attr('contenteditable', true);
                $element.blur(function () {
                    let index = $element.parent().data('index');
                    let tdValue = $element.html();
                    saveData(index, field, tdValue);
                })
            }
        };

        /**
         * 保存
         * @param index
         * @param field
         * @param value
         */
        function saveData(index, field, value) {
            $table.bootstrapTable('updateCell', {
                index: index,       //行索引
                field: field,       //列名
                value: value        //cell值
            });
            $.ajax({
                type: "post",
                url: prefix2 + "/saveAlltwo",
                data: JSON.stringify($table.bootstrapTable('getData')),
                contentType: 'application/json',
                success: function (result) {
                    if (typeof callback == "function") {
                        callback(result);
                    }
                    $.operate.successCallback(result);
                }
            })
        }

        $.table.init(options);
    });

第二種方法：

showColumns: false,
            onEditableSave: onEditableSave,
            columns: [
                {
                    field: 'id',
                    title: '序號',
                    visible: false
                },
                {
                    field: 'amountAssets',
                    title: '上一年淨資產數額(萬元)',
                    editable: true,
                    editable : {
                        type : 'text',
                        title : '上一年淨資產數額',
                        emptytext : "【名稱】爲空",
                        validate : function(value) {
                            if (value.length > 30) {
                                return '名稱不能超過30個字符';
                            }
                            if (value.length == 0) {
                                return '名稱不能爲空';
                            }
                        }
                    }
                },
                {
                    field: 'profityear',
                    title: '上一年本年利潤(萬元)',
                    editable: true
                },

                                function onEditableSave(field, row, oldValue, $el) {
        //"字段名：" + field +
        $.modal.alertSuccess("當前值：" + row[field] + "，舊值：" + oldValue);
        $.ajax({
            type: "POST",
            url: prefix2 + '/edit',
            data: row,
            dataType: 'json',
            cache: false,
            success: function (data) {
                if ("success" == data) {
                    bootbox.alert("編輯成功");
                    $('#dataGrid').bootstrapTable('refresh');
                } else {
                    bootbox.alert(data);
                }
            },
            error: function () {
                bootbox.alert('編輯失敗');
            },
            complete: function () {

            }
        });

    }