實現在單元格即時編輯

當滑鼠懸停單元格展示提示資訊，雙擊展示輸入框，頁面內容在輸入框內，可以直接進行修改然後儲存。將資料傳送到伺服器進行處理，輸入框消失，展示最新的內容。

        <td class="readonly-code modify_stock_num" data-type="1">${stock.pay_stock_num}</td>
        <td class="readonly-code modify_stock_num" data-type="2">${stock.nopay_stock_num}</td>
 

data-type自定義標籤用於傳遞型別進行區分是哪個td

    //即時編輯
    $('.modify_stock_num').editable(function (value, settings) {
        var type = this.dataset.type;
        var stockId = $(this).parent().attr("id");
        $.ajax({
            url: "url" + stockId + "/" + type,
            type: "post",
            data: {"stockNum"
 
: value},
            dataType: "json",
            success: function (data) {
                if (data.state == 1) {
                    swal("修改成功!", "", "success", "好");
                    $.get("url", function (data) {
                        console.log(data)
                        $("#div_table_container"
 
).html(data);
                    });
                } else {
                    swal(data.message, "", "error", "好");
                }
            }
        });
        return (value);
    }, {
        event: 'dblclick',
        type: 'text',//實時編輯input框的type
        cancel: '取消',//取消編輯按鈕的文字
        cssclass: 'ediForm',
        submit: '確定',//確認提交按鈕的文字
        indicator: '儲存中...',//提交處理過程中顯示的提示文字
        tooltip: '雙擊編輯...',//滑鼠懸停時的提示資訊
        onsubmit: function (settings, original) {
            var newVal = $(original).find('input').val();
            if (isNaN(parseInt(newVal)) || newVal.length > 4 || !/^\d+$/.test(newVal)) {
                toastr.warning("請輸入正確的數字,範圍0-9999的整數");
                return false;
            }
            return true;
        }
    });

輸入框可以根據需要進行樣式上的調整