Jeditable插件实现单元格即时编辑

实现在单元格即时编辑

当鼠标悬停单元格展示提示信息，双击展示输入框，页面内容在输入框内，可以直接进行修改然后保存。将数据传送到服务器进行处理，输入框消失，展示最新的内容。

        <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;
        }
    });

输入框可以根据需要进行样式上的调整