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>

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