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();// select2txt.select2({width: 100 + "%", placeholder: "请选择", allowClear: true});} else {//inputvar 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") {// inputvar 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") {// selectvar 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();// select2txt.select2({width: 100 + "%", placeholder: "请选择", allowClear: true});}// 数据核对人else if (header == "assayDataCollator") {// selectvar 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();// select2txt.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);// 清空，拼接tdtd.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>

失去焦点移除datetime控件的时，需要先将该控件赋给某个页面元素
如果，直接移除，无法再次获取到该元素undefined，在清空td，或者tbody之前先赋值给某个隐藏元素

jQuery表格的行编辑相关推荐

el-table/element-ui 表格实现行编辑
珊妹儿最近一直项目需求要用el-table实现行编辑,这个功能嘛,是我领导写的,我呢,拿出来给大家借鉴一下,如果你们有更好的建议,欢迎留言~ 实现思路: 1.表格数据我们拿到后,每一行都加个变量作为判 ...
jquery-easyui中表格的行编辑功能
2019独角兽企业重金招聘Python工程师标准>>> datagrid现在具有行编辑能力了,使用时只须在columns中为需要编辑的列添加一个editor属性,编辑保存时同时还可以 ...
JQuery实例：可以编辑的表格
HTML代码: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www ...
使用jquery进行多行表格数据验证
使用jquery进行多行表格数据验证 <!DOCTYPE html> <html lang="en"> <head><meta chars ...
jQuery:表格的奇偶行变色，jquery实例之表格隔一行
jQuery:表格的奇偶行变色<html> <head> <title>表格变色</title> <style type="text/c ...
FineUI大版本升级，外置ExtJS库、去AXD化、表格合计行、表格可编辑单元格的增删改、顶部菜单框架
FineUI v3.3.0 更新的内容非常多,所以一下子从 v3.2.6 连跳 3 个小版本,直接来到了 v3.3.0.详细的更新记录请参考这里:http://fineui.com/version 主 ...
FineUI大版本升级，外置ExtJS库、去AXD化、表格合计行、表格可编辑单元格的增删改、顶部菜单框架...
FineUI v3.3.0 更新的内容非常多,所以一下子从 v3.2.6 连跳 3 个小版本,直接来到了 v3.3.0.详细的更新记录请参考这里:http://fineui.com/version 主 ...
FineUI大版本升级，外置ExtJS库、去AXD化、表格合计行、表格可编辑单元格的增删改、顶......
2019独角兽企业重金招聘Python工程师标准>>> FineUI v3.3.0 更新的内容非常多,所以一下子从 v3.2.6 连跳 3 个小版本,直接来到了 v3.3.0.详细的 ...
jeecgboot前端自定义组件、JgEditable Table行编辑表格
上一篇本次示例全部是在新建的Demo.vue中操作 jeecgboot前端自定义组件 1.首先,在webstrom中找到ant-design-vue-jeecg/src/views/jeecg/mo ...

jQuery表格的行编辑

jQuery表格的行编辑相关推荐

最新文章

热门文章