实现在单元格即时编辑
当鼠标悬停单元格展示提示信息,双击展示输入框,页面内容在输入框内,可以直接进行修改然后保存。将数据传送到服务器进行处理,输入框消失,展示最新的内容。
<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',
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;
}
});
输入框可以根据需要进行样式上的调整