bootstrap-table表格的行内编辑，可以设置editable属性，或者使用x-editable扩展，但这两者使用起来都不是很顺手。现在希望实现如下效果：
1、不要弹窗输入；
2、根据受点击单元格所在列的数据类型提供输入框，比如说，如果是文本型就显示文本框，如果是日期型就显示日期控件，如果是货币型就只能输入数字与小数点，且如果有上限就在输入时做验证，超过最大值时提示；
3、输入完成后（输入框失去焦点）要比较新旧值，如果有变化需要确认修改，如果不接受修改就恢复原值；
实现思路：
创建一个动态输入框，在单元格被双击时就显示在被点击单元格内，再根据当前列的数据类型来初始化这个input控件，当它失去焦点时就认为输入完成，再去比较它与原单元格的值，直至保存新值等。
以下是前端部分代码实现
1.添加单元格双击事件
// 双击编辑单元格
$(document).on('dblclick', 'td', function() {
let flag1=[[${#bools.isTrue(isEdit)}]]; // 在js中用这种形式引用thymeleaf变量
if (!flag1){ //普通用户不可编辑
return
}
let myFieldId = this.headers;
let lastTd = this.parentNode.lastElementChild; // 选择当前行的最后一个子节点，表格最后一列绑定了ItemId
let myItemId = lastTd.textContent || lastTd.innerText; // 获取文本内容
$(this).text(""); //先清除单元格文本，为input框件腾出空位
genInput(this,myItemId,myFieldId); //开始创建动态输入控件
})
2. 创建动态输入框
/**
* 创建动态输入框
* @param row
* @param element
*/
function genInput($td,itemId,fieldId) {
$.ajax({
url: "/xxx/xxxx",
type: "post",
async: false,
data: {
itemId: itemId,
fieldId: fieldId
},
success: function (result) {
if (result.code == 200) {
let data = result.data;
// 找到tmpInput元素销毁再重新创建
var element = document.getElementById("tmpInput");
if (element) {
element.parentNode.removeChild(element); // 从父节点中移除该元素
}
var input = document.createElement("input"); // 创建一个新的<input>元素
let rowIndex = $td.parentElement.rowIndex;
let cellIndex = $td.cellIndex;
input.setAttribute("id", "tmpInput"); // 设置ID属性为"tmpInput"
$td.appendChild(input); // 将输入框添加到<td>标签内部
let fdv = oldValue == "" ? data.fieldValue.replace("null","") : oldValue;
let fOption = "";
if (data.optionDicId != "noValue") { //多选一型
fOption = '<select class="form-group" style="float: left;width: 100%;margin-top: 10px" id="' +
"tmpInput" + '" name="' + data.fieldId + '">';
let data1 = data.projectDicValueList;
if (data1.length == 0) {
warnPop("请先为本字段所关联的字典指定可选项字段！");
}
for (let i = 0; i < data1.length; i++) {
fOption += "<option value=" + data1[i].dicValue + ">" + data1[i].dicValue + "</option>";
}
fOption = fOption + '</select>';
let selectElement = $(fOption);
$("#tmpInput").replaceWith(fOption);
$("#tmpInput").attr("onblur", "editConfirm1(" + rowIndex + "," + cellIndex + " )");
//设置实际值为选中状态
setSelectOption("tmpInput", data.fieldValue);
$("#tmpInput").focus();
return;
}
switch (data.fieldType) {
case "数值":
$("#tmpInput").val(fdv);
$("#tmpInput").attr("type", "number");
$("#tmpInput").attr("placeholder", "只可输入数字");
$("#tmpInput").attr("onblur", "editConfirm1(" + rowIndex + "," + cellIndex + " )");
$("#tmpInput").focus();
break;
case "货币":
$("#tmpInput").val(fdv);
$("#tmpInput").attr("placeholder", "只可输入金额");
let tmpStr = 'this.value=this.value.replace(/[^\\d.]/g,\'\')' +
'.replace(/(\\.\\d+)\\.+/g, \'$1\').replace(/(\\..*)\\./g, \'$1\')' +
'.replace(/^(\\-)*(\\d+)\\.(\\d\\d).*$/,\'$1$2.$3\') ';
$("#tmpInput").attr("oninput", tmpStr);
$("#tmpInput").attr("onblur", "editConfirm1(" + rowIndex + "," + cellIndex + " )");
$("#tmpInput").focus();
break;
case "日期":
if (fdv!="null" && fdv!=""){
$("#tmpInput").val(fdv);
}else{
const options = { year: 'numeric', month: '2-digit', day: '2-digit', hour12: false };
const formattedTime = new Intl.DateTimeFormat('zh-CN', options).format(new Date()).replace(/[^0-9]/g, '');
$("#tmpInput").val(formattedTime);
}
$("#tmpInput").datetimepicker({
format: 'YYYY-MM-DD',
locale: 'zh-CN'
}).on('keydown', function (e) { //禁止键盘输入
return false;
}).on('mousedown', function (even) { //阻止右键默认菜单，阻止复制
if (even.which == 3) {
$(this).unbind("mousedown").bind("contextmenu", function (e) {
e.preventDefault();
return false;
});
}
})
//这里使用onblur方法时会触发两次，所以使用onfocusout事件
$("#tmpInput").attr("onfocusout", "editConfirm1(" + rowIndex + "," + cellIndex + " )");
$("#tmpInput").addClass("editor-datetime"); //解决日期弹出框定位问题
//第一次初始化为日期框后，不会弹出选择日期框，需要模拟再点击一下
$("#tmpInput").focus();
$("#tmpInput").click();
break;
default: //字符串
//太长的字符串将它变为textarea类型
let textarea = "<textarea id='" + "tmpInput" +
"' maxlength='100' style='float: left;width: 95%;margin: 10px 10px' cols='12' rows='2'" +
" onblur=\"editConfirm1(" + rowIndex + "," + cellIndex + " )\">" +
fdv + "</textarea>";
let myInput = $("#tmpInput");
myInput.replaceWith(textarea);
//使用jquery似乎无法实现将光标移动到字符末尾功能，这里暂且使用原生方法实现
let tmpInput = document.getElementById("tmpInput");
tmpInput.focus();
tmpInput.setSelectionRange(fdv.length, fdv.length);
}
//字段限额处理
let fieleLimit = data.fieldLimit;
if (data.fieldLimit != "0") {
$("#tmpInput").attr("placeholder", "金额必须小于:" + fieleLimit);
$("#tmpInput").on('input', function () {
var val = $(this).val();
if (val < 1 || val > fieleLimit) {
warnPop("金额必须小于:" + fieleLimit + "!");
$("#tmpInput").css('color', 'red');
$(this).val('');
} else {
$("#tmpInput").css('color', 'black');
}
});
}
} else {
exceptionMessage(result);
}
},
error: function (res) {
Modal.alert({
title: '系统提示',
message: "获取XX数据异常!"
});
}
});
}
/**
* 设置下拉框选中项
*/
function setSelectOption(com,optValue) {
for (let i = 0; i < $("#" + com + "")[0].length; i++) {
if ($("#" + com + "")[0].options[i].value == optValue) {
$("#" + com + "").val(optValue);
}
}
}
3. 失焦后保存数据
//确认修改
function editConfirm1(rowIndex,cellIndex) {
let cell = document.getElementById("dtItems").rows[rowIndex].cells[cellIndex];
let newValue = $("#tmpInput").val();
cell.innerText = newValue;
//1.清除输入框
var element = document.getElementById("tmpInput");
if (element) {
element.parentNode.removeChild(element); // 从父节点中移除该元素
}
//2、若值无变化则不处理
if (oldValue == newValue){
cell.innerText = oldValue;
}else {
//3、若值发生了变化，则确认后更新值
Modal.confirm({
message: "确认要修改吗？"
}).on(function (e) {
if (e == true) {
cell.innerText = newValue;
oldValue = newValue;
//立即保存到数据库
let itemId = $('#dtItems tr:eq(' + rowIndex + ') td:last').text();
let fieldId = cell.headers;
let fieldValue = newValue;
$.ajax({
url: "/xxx/xxx",
type: "post",
async: false,
data: {
itemId: itemId,
fieldId: fieldId,
fieldValue: fieldValue
},
success: function (result) {
if (result.code == "200") {
succPop("修改成功！");
}else{
warnPop("修改失败！原因是：" + result.data);
}
},
error: function (res) {
Modal.alert({
title: '操作提示',
message: "请求异常!"
});
}
});
}else {
cell.innerText = oldValue; //不修改，恢复原值
}
});
}
}
网友评论