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

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

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

有问题的代码:
 

$('.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();
});

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

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 回调中使用这种方式来绑定复选框的点击事件。

  • 7
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

十步杀一人_千里不留行

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值