jQuery表格的行编辑

84 阅读 0 评论 56 点赞

我是靠谱客的博主动人发带，最近开发中收集的这篇文章主要介绍jQuery表格的行编辑，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

jQuery表格的行编辑

单击单元格，单元格显示为一个控件
然后，在控件中输入或者选择值，失去焦点之后
获取该控件的值，显示在单元格中
控件可以是input、select、datetime等
Input
这里写图片描述
Select2

Datetime

// 表格单元格点击事件
$("#assayItemData_tbody").on("click", "td", function () {
var td = $(this);
var url = $("form").attr("action");
var text = td.text();
var a = td.find('a');
var innerDatetime = a.text();
var param = td.find("a").attr("data-pk");
var str = JSON.stringify(param);
if (str != undefined) {
var index = str.indexOf(",");
var header = str.substring(1, index);
// 检验化验结果
if (header == "assayItemData") {
var assayItemID = td.find("a").attr("data-assayItemID");
var comboDatas = comboDatasMap.get(assayItemID);
if (comboDatas) {
// 下拉框
var txt = $("<select name='cell' type='text' class='form-control' style='margin: 0px;" +
"border-style: none;padding: 0px;height: 100%;width: 100%'></select>");
var options = '<option ></option>';
$.each(comboDatas, function (j, comboData) {
for (var key in comboData) {
options += '<option value="' +
comboData[key] + '">' + comboData[key] + '</option>';
}
});
txt.append(options);
// 失去焦点，保存值,与服务器交互
txt.change(function () {
var newText = $(this).select2('data').text;
var newVal = $(this).val();
var value = param + "," + newVal;
$.ajax({
type: 'POST',
url: ctx + "/biz/assay-item-data/update",
data: {value: value},
dataType: 'JSON',
success: function (res) {
var message = res.message;
// 移除文本框,显示新值
td.find('div').remove();
a.text(newText);
td.append(a);
},
error: function () {
}
});
});
// 清空原有值
td.text("");
// 绑定元素
td.append(txt);
// 获取焦点
txt.focus();
// select2
txt.select2({width: 100 + "%", placeholder: "请选择", allowClear: true});
} else {
//input
var txt = $("<input name='cell' type='text' class='form-control' style='margin: 0px;" +
"border-style: none;padding: 0px;height: 100%;width: 100%'>").val(text);
// 失去焦点，保存值,与服务器交互
txt.blur(function () {
var newText = $(this).val();
var value = param + "," + newText;
$.ajax({
type: 'POST',
url: ctx + "/biz/assay-item-data/update",
data: {value: value},
dataType: 'JSON',
success: function (res) {
if (!res.success) {
$.app.alert({
title: "警告",
message: res.message
});
}
if (res.judgmentResult) {
// 单项判定的结果写入表格
var tr = $(td).closest("tr");
tr.find("td[columnname='judgmentResult']").find('a').text(res.judgmentResult);
}
// 移除文本框,显示新值
td.find('input').remove();
a.text(newText);
td.append(a);
},
error: function () {
}
});
});
// 清空原有值
td.text("");
// 绑定元素
td.append(txt);
// 获取焦点
td.find('input').focus();
}
}
// 设备编号、单项判定
else if (header == "assayEquipmentNo" || header == "judgmentResult") {
// input
var txt = $("<input name='cell' type='text' class='form-control' style='margin: 0px;" +
"border-style: none;padding: 0px;height: 100%;width: 100%'>").val(text);
// 失去焦点，保存值,与服务器交互
txt.blur(function () {
var newText = $(this).val();
var value = param + "," + newText;
$.ajax({
type: 'POST',
url: ctx + "/biz/assay-item-data/update",
data: {value: value},
dataType: 'JSON',
success: function (res) {
if (!res.success) {
$.app.alert({
title: "警告",
message: res.message
});
}
if (res.judgmentResult) {//单项判定的结果写入表格
var tr = $(td).closest("tr");
tr.find("td[columnname='judgmentResult']").find('a').text(res.judgmentResult);
}
// 移除文本框,显示新值
td.find('input').remove();
a.text(newText);
td.append(a);
},
error: function () {
}
});
});
// 清空原有值
td.text("");
// 绑定元素
td.append(txt);
// 获取焦点
td.find('input').focus();
}
// 检测方法
else if (header == "assayMethodId") {
// select
var txt = $("<select name='cell' type='text' class='form-control' style='margin: 0px;" +
"border-style: none;padding: 0px;height: 100%;width: 100%'></select>");
var assayItemID = td.find("a").attr("data-assayItemID");
var assayMethads = assayMethadArry.get(assayItemID);
var options = '<option ></option>';
$.each(assayMethads, function (j, assayMethad) {
options += '<option value="' + assayMethad.id + '">' + assayMethad.assayMethodName + '</option>';
});
txt.append(options);
// 失去焦点，保存值,与服务器交互
txt.change(function () {
var newText = $(this).select2('data').text;
var newVal = $(this).val();
var value = param + "," + newVal;
$.ajax({
type: 'POST',
url: ctx + "/biz/assay-item-data/update",
data: {value: value},
dataType: 'JSON',
success: function (res) {
clickCodeTableTr.click();
/* var message = res.message;
// 移除文本框,显示新值
td.find('div').remove();
a.text(newText);
td.append(a);*/
},
error: function () {
}
});
});
// 清空原有值
td.text("");
// 绑定元素
td.append(txt);
// 获取焦点
txt.focus();
// select2
txt.select2({width: 100 + "%", placeholder: "请选择", allowClear: true});
}
// 数据核对人
else if (header == "assayDataCollator") {
// select
var txt = $("<select name='cell' type='text' class='form-control' style='margin: 0px;" +
"border-style: none;padding: 0px;height: 100%;width: 100%'></select>");
txt.append(assayDataCollatorOptions);
// 失去焦点，保存值,与服务器交互
txt.change(function () {
var newText = $(this).select2('data').text;
var newVal = $(this).val();
var value = param + "," + newVal;
$.ajax({
type: 'POST',
url: ctx + "/biz/assay-item-data/update",
data: {value: value},
dataType: 'JSON',
success: function (res) {
var message = res.message;
// 移除文本框,显示新值
td.find('div').remove();
a.text(newText);
td.append(a);
},
error: function () {
}
});
});
// 清空原有值
td.text("");
// 绑定元素
td.append(txt);
// 获取焦点
txt.focus();
// select2
txt.select2({width: 100 + "%", placeholder: "请选择", allowClear: true});
}
// 检测完成时间
else if (header == "finishAssayTime") {
// 未执行回调函数
var frontdiv = $('#test5').parent('div').attr("id");
if (frontdiv != "saveInput") {
// 之前td移除之前，显示a标签
var fronttd = $('#test5').parent('td');
fronttd.find('a').css("display", "");
}
// 隐藏a标签
td.find('a').css("display", "none");
// 绑定元素
td.append($('#test5'));
}
}
});

layDate控件的使用

// 初始化，默认值
laydate.render({
elem: '#test5',
value: getDatetime(),
isInitValue: true,
});
// laydate，回调函数
laydate.render({
elem: '#test5',
type: 'datetime',
done: function (value, date, endDate) {
$('#test5').attr("value", value);
var id = $('#test5').parent('td').parent('tr').find('td').eq(0).find('input').val();
var dataValue = "finishAssayTime" + "," + id + "," + value;
$.ajax({
type: 'POST',
url: ctx + "/biz/assay-item-data/update",
data: {value: dataValue},
dataType: 'JSON',
success: function (res) {
var message = res.message;
// 移除文本框，显示新值
var td = $('#test5').parent('td');
// input，赋给某个隐藏元素
var input = $('#test5');
$('#saveInput').append(input);
// 清空，拼接td
td.empty();
var a = $("<a></a>");
var pkValue = "finishAssayTime" + "," + id;
a.attr("data-pk", pkValue);
a.text(value);
td.append(a);
},
error: function () {
}
});
}
});

Append拼接元素
当页面加载的时候，没有这些元素，没有被CSS和JS渲染

Input不需要渲染
Select2设置值之后，调用select2()方法，将select变成select2控件
datetime控件使用的layDate，在页面加载的时候，放在页面隐藏的div中，append获取该元素之后，就会显示
页面元素

<div id="saveInput" style="display: none">
<input path="finishAssayTime" type="text" class="demo-input" placeholder="时间选择器" id="test5" value=""
style="height: 22px;width:100%;margin: 0px;padding: 0px;"/>
</div>