Bootstrap 行內編輯並保存

這里內容主要依據與https://blog.csdn.net/wuminglq/article/details/83009664，如果看完可以，就沒必要往下看了。

先將行內編輯的代碼復制

/**
 * bootstrap API中的 onDblClickCell 方法，當用戶雙擊某一列的時候觸發
 * @param field:點擊列的 field 名稱
 * @param value:點擊列的 value 值
 * @param row:點擊列的整行數據
 * @param $element:td 元素
 */
onDblClickCell : function (field, value, row, $element) {
    // $element[0]: <td style="">0</td> 當前表格的內容
    // $element[0].parentElement: <tr data-index="0">...</tr> 表格父級tr
    // $element[0].parentElement.rowIndex: 1 返回某一行在表格的行集合中的位置，這是官方解釋，通俗就是第幾行
    // upIndex: 0 行索引，用於更新時確認行索引，-1是因為這里返回第一行為1，更新時索引第一行為0
    var upIndex = $element[0].parentElement.rowIndex - 1;
    // options.editFiled：需要編輯的屬性，及列名，這里可動態配置多列
    if (field == options.editFiled) {
        // 將表格<td></td>中間內容替換為一個如下input
        // innerHTML 設置或返回表格行的開始和結束標簽之間的HTML，官方解釋，簡單說就是獲取或者替換表格內容
        $element[0].innerHTML =
                "<input id='inputCell' type='text' name='inputCell' style ='width: 40px' value='" + value    + "'>";
        // 獲取焦點，鼠標點擊
        $("#inputCell").focus();
        // 失去焦點，鼠標點擊其他位置，離開輸入區域，默認為輸入結束，進行保存
        $("#inputCell").blur(function () {
            // 獲取輸入內容
            var newValue = $("#inputCell").val();
            // 這里可以對內容進行校驗，是否為空、數字、長度等
            // 將修改后的結果設置到行中
            row[field] = newValue;
            // 移除鼠標點擊事件
            $(this).remove();
            /**
             * bootstrap API中的 updateCell 方法 更新一個單元格
             * @params index: 行索引 這里就是上邊需要-1
             * @param field: 字段名稱
             * @param value: 新字段值
             */
            $('#bootstrap-table').bootstrapTable('updateCell', {
                index: upIndex,
                field: field,
                value: newValue
            });
            // 封裝方法，對編輯后的結果進行處理
            $.operate.rowedit(row);
        });
    }
}

 

以上是這段代碼的全部注釋，其中未包含的，動態設置編輯列代碼如下：

$(function () {
    var options = {
        editFiled: '編輯名稱',
        editFiled_1: '多個'
    }
})

 封裝的方法如下：

// 操作封裝處理
operate: {
    // post請求傳輸
    post: function (url, data) {
        $.operate.submit(url, "post", "json", data);
    }
,
    // 修改行
    rowedit: function (row) {
        $.modal.loading("正在處理中，請稍后...");
        var url = $.table._option.roweditUrl;
        var config = {
            url: url,
            type: "post",
            dataType: "json",
            data: row,
            success: function (result) {
                $.operate.ajaxSuccess(result);
            }
        };
        $.ajax(config)
    }
,
    // 保存結果彈出msg刷新table表格
    ajaxSuccess: function (result) {
        if (result.code == web_status.SUCCESS) {
            $.modal.msgSuccess(result.msg);
            $.table.refresh();
        } else {
            $.modal.alertError(result.msg);
        }
        $.modal.closeLoading();
    }
}

 

 

這是復制的，個人實際使用的如下：

function rowedit(row) {
    jp.post(
            "",
            {
                id: row.id,
                field: row.field
            },
            function (data) {
                if (data.success) {
                    refresh();
                    jp.toastr_success(data.msg);
                } else {
                    jp.toastr_error(data.msg);
                }
            })
}

 

這個就按各自需求做處理了。