Gijgo网格重载时渲染图标重复问题求助（内联模式）

这个问题我之前也碰到过，本质是网格重载时render函数会重复执行，但之前渲染的DOM元素没有被清理，导致新图标叠加在旧元素上。下面是具体的修复方案：

问题根源 #

Gijgo网格在调用reload()方法时，会重新触发所有列的render函数。如果你的render函数只在特定条件下添加元素，却没有处理之前已经存在的元素，就会导致新旧图标重复出现。

修复步骤 #

核心思路是每次渲染前先清空目标容器的内容，再根据条件重新添加元素：

1. 在render函数开头，用$displayEl.empty()清空显示容器（这是Gijgo提供的用于显示单元格内容的元素）；
2. 统一处理逻辑：不管是否需要显示按钮，都确保容器状态是干净的；
3. 重新添加按钮并绑定事件（如果需要的话）。

修改后的完整代码 #

var EditRenderer = function (value, record, $cell, $displayEl, id) {
    // 第一步：清空容器，移除之前渲染的所有元素
    $displayEl.empty();
    
    var ThisLine = Object.values(record);
    // 判断是否需要显示编辑/更新按钮
    if (value !== true && !ThisLine.includes("Totals")) {
        var $editBtn = $('<p class="glyphicon glyphicon-pencil gj-cursor-pointer" data-key="' + id + '"></p>'),
            $updateBtn = $('<p class="glyphicon glyphicon-save gj-cursor-pointer" data-key="' + id + '"></p>').hide();
        
        // 将按钮添加到清空后的容器中
        $displayEl.append($editBtn).append($updateBtn);
        
        // 示例：绑定按钮点击事件（根据你的业务逻辑调整）
        $editBtn.on('click', function() {
            $editBtn.hide();
            $updateBtn.show();
            // 这里可以添加切换到编辑模式的逻辑，比如让单元格变成可编辑状态
        });
        
        $updateBtn.on('click', function() {
            $updateBtn.hide();
            $editBtn.show();
            // 这里可以添加保存更新的逻辑，比如提交数据到后端
        });
    }
    // 条件不满足时，容器已经被清空，不会显示任何按钮
};

额外提示 #

• 如果你的按钮事件绑定比较复杂，建议使用事件委托（比如绑定到网格容器上），避免每次渲染都重复绑定事件，减少内存开销；
• 确保$displayEl是你用来放置图标的正确容器（Gijgo的render函数中，$displayEl是专门用于显示单元格内容的元素，优先使用它而不是$cell，避免影响网格的内部结构）。

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