基于行数据通过JQuery-tabledit实现表格列条件可编辑

第一步：修复HTML中的重复属性 #

先移除表格行内重复的data-id属性，避免DOM属性冲突：

<tbody>
    @foreach (var item in Model.Righe)
    {
        <tr data-tipo-dato="@((int)item.Categoria.TipoDiDato)" data-id="@item.Id">
            <td>@item.Id</td>
            <td>@item.Categoria.Nome</td>
            <td>@item.Pezzi</td>
            <td>@item.Kg.ToString("#,##0.00")</td>
            <td>@item.CostoUnitario.ToString("#,##0.00")</td>
            <td>@item.ImportoRiga.ToString("#,##0.00")</td>
            <td>@item.UtenteAggiornamento</td>
            <td>@item.DataAggiornamento.ToString("dd/MM/yyyy")</td>
        </tr>
    }
</tbody>

第二步：修改JavaScript逻辑，在编辑触发时禁用对应列 #

原代码onDraw事件时机不对——输入框是点击编辑按钮后才动态生成的，初始化阶段找不到目标元素。我们改用onClick钩子监听编辑按钮点击，确保在输入框生成后再执行禁用操作：

$(document).ready(function () {
function initAutoTabledit() {
    $('table[data-tabledit="true"]').each(function () {
        var $table = $(this);

        // 收集可编辑列和标识列
        var editableColumns = [];
        var identifierColumn = null;

        $table.find('th').each(function (index) {
            if ($(this).data('tabledit-identifier') === true) {
                identifierColumn = index;
            }

            if ($(this).data('tabledit-editable') === true) {
                editableColumns.push([index, $(this).data('tabledit-field') || $(this).text().toLowerCase()]);
            }
        });

        // 初始化Tabledit
        $table.Tabledit({
            url: $table.data('tabledit-url'),
            inputClass: 'form-control form-control-sm',
            columns: {
                identifier: [identifierColumn, 'id'],
                editable: editableColumns
            },
            buttons: {
                edit: {
                    class: 'btn btn-sm btn-primary',
                    html: '<i class="mdi mdi-pencil"></i>'
                },
                save: {
                    class: 'btn btn-sm btn-success',
                    html: '<i class="mdi mdi-content-save"></i>'
                },
                restore: {
                    class: 'btn btn-sm btn-warning',
                    html: '<i class="mdi mdi-undo"></i>'
                }
            },
            // 点击编辑按钮时触发，处理输入框禁用逻辑
            onClick: function (event, editButton) {
                var $row = $(editButton).closest('tr');
                var tipoDato = parseInt($row.data('tipo-dato'));
                
                // 延迟100ms确保输入框完成DOM渲染
                setTimeout(function() {
                    if (tipoDato === 0) {
                        // 禁用Pezzi列（索引2）
                        $row.find('td:eq(2) input.tabledit-input').prop('disabled', true);
                        $row.find('td:eq(2) .tabledit-span').addClass('text-muted');
                    } else if (tipoDato === 1) {
                        // 禁用Kg列（索引3）
                        $row.find('td:eq(3) input.tabledit-input').prop('disabled', true);
                        $row.find('td:eq(3) .tabledit-span').addClass('text-muted');
                    }
                }, 100);
            },
            onSuccess: function (data, textStatus, jqXHR) {
                console.log('Success:', data);
                if (data.success) {
                    toastr.success('Modifiche salvate con successo');

                    // 用data-id精准定位行，避免contains匹配错误
                    var $row = $table.find('tr[data-id="' + data.data.id + '"]');

                    // 更新显示内容和输入框值
                    $row.find('td:eq(2) span.tabledit-span').text(data.data.pezzi);
                    $row.find('td:eq(3) span.tabledit-span').text(data.data.kg);
                    $row.find('td:eq(5)').text(data.data.importoRiga);
                    $row.find('td:eq(2) input.tabledit-input').val(data.data.pezzi);
                    $row.find('td:eq(3) input.tabledit-input').val(data.data.kg);

                    // 切换显示状态
                    $row.find('.tabledit-input').hide();
                    $row.find('.tabledit-span').show();

                    // 重新应用禁用规则
                    var tipoDato = parseInt($row.data('tipo-dato'));
                    if (tipoDato === 0) {
                        $row.find('td:eq(2) input.tabledit-input').prop('disabled', true);
                        $row.find('td:eq(2) .tabledit-span').addClass('text-muted');
                    } else if (tipoDato === 1) {
                        $row.find('td:eq(3) input.tabledit-input').prop('disabled', true);
                        $row.find('td:eq(3) .tabledit-span').addClass('text-muted');
                    }

                    // 重置按钮状态
                    $row.find('.tabledit-toolbar button').prop('disabled', false);
                    $row.find('.tabledit-toolbar').removeClass('tabledit-toolbar-editing');

                    // 高亮提示更新成功
                    $row.addClass('table-success');
                    setTimeout(function () {
                        $row.removeClass('table-success');
                    }, 1500);
                } else {
                    toastr.error(data.message || 'Errore durante il salvataggio');
                }
            },
            onFail: function (jqXHR, textStatus, errorThrown) {
                console.error('Failed:', jqXHR.responseText);
                toastr.error('Errore durante il salvataggio');
            }
        });
    });
}

// 文档就绪时初始化
initAutoTabledit();

// 模态框显示后重新初始化
$('.modal').on('shown.bs.modal', function () {
    setTimeout(initAutoTabledit, 200);
});
});

关键修改说明 #

• 移除无效的onDraw事件，改用onClick钩子在编辑触发时处理，确保能捕获到动态生成的输入框
• 增加100ms延迟，等待Tabledit完成输入框的DOM渲染
• 优化行选择器为tr[data-id="..."]，避免ID值出现在其他单元格时的匹配错误
• 修复HTML中重复的data-id属性，消除DOM冲突

内容的提问来源于stack exchange，提问作者user2231301