EasyUI DataGrid在updateRow会重新渲染该行，导致绑定的事件失效

十步杀一人_千里不留行2024-03-07 10:25

因为在更新行数据时，EasyUI DataGrid 会重新渲染该行，导致之前绑定的事件失效。这是因为当您调用 updateRow 方法后，DataGrid 会重新生成该行的 HTML，而原有的事件绑定只作用于旧的 HTML 元素上。

为了解决这个问题，您可以采用事件委托的方式来绑定事件。事件委托是一种在父元素上监听事件的技术，然后根据事件的目标元素来执行相应的操作。由于父元素不会随着子元素的更新而改变，因此这种方法可以确保即使子元素被重新渲染，事件依然能够被触发。

有问题的代码：

javascript 复制代码

$('.checkbox-isuse').click(function (e) {
    console.log('click0')
    //获取点击复选框当前行的索引
    var $checkbox = $(this);
    var ix = $checkbox.closest('tr.datagrid-row').attr('datagrid-row-index');
    var row = data.rows[ix];

    var checked = $checkbox.prop("checked");// 获取当前复选框的选中状态
    var field = $checkbox.attr('data-field'); // 获取对应的字段名

    console.log(ix, checked, field, row)

    // 更新对应字段的值
    $('#gridBox-0').datagrid('updateRow', {
        index: ix,
        row: {
            [field]: checked ? 1 : 0
        }
    });

    e.stopPropagation();
});

使用事件委托的解决方案：

javascript 复制代码

onLoadSuccess: function (data) {
    // 使用事件委托方式绑定点击事件
    $('#gridBox-0').datagrid('getPanel').off('click', '.checkbox-isuse').on('click', '.checkbox-isuse', function(e) {
        var $checkbox = $(this);
        var index = $checkbox.closest('tr.datagrid-row').attr('datagrid-row-index');
        var field = $checkbox.attr('data-field'); // 获取对应的字段名
        var checked = $checkbox.prop('checked'); // 获取当前复选框的选中状态

        // 更新对应字段的值
        $('#gridBox-0').datagrid('updateRow', {
            index: parseInt(index),
            row: {
                [field]: checked ? 1 : 0
            }
        });

        // 阻止事件冒泡
        e.stopPropagation();
    });
},

在这个示例中，我们使用 $('#gridBox-0').datagrid('getPanel') 来获取 DataGrid 的面板元素，并在这个元素上绑定点击事件。off('click', '.checkbox-isuse') 是为了避免重复绑定事件，每次 onLoadSuccess 被调用时先移除之前的事件绑定。

这种方式可以确保即使行被重新渲染，事件依然能够被正确触发。您应该在 onLoadSuccess 回调中使用这种方式来绑定复选框的点击事件。