在 jqGrid 中使用带有自定义格式化程序和 cellEdit 的图像会导致 JavaScript 错误 - 解决方案

Question

当我将 jqGrid 与可编辑单元格（选项中的 cellEdit: true ）和基于单元格值返回图像的自定义格式化程序一起使用时，我的 Web 应用程序遇到了问题。

当单击单元格时，该单元格不在图像本身上，单元格编辑就像一个魅力。但是，当单击图像本身时，您会遇到 JavaScript 错误，声称无法找到parentNode。

我没有深入研究这个问题，但我想这与 jqGrid 如何使用自定义格式化程序应用图像，或者它如何尝试获取父节点有关。

无论如何，通过在图像本身上指定一个 onclick 事件来调用其父节点并单击它，可以避免错误。

例如，可以避免此错误的简单自定义格式化程序是：

function booleanFormatter(cellvalue, options, rowObject){
    if (cellvalue == true){
        return '<img src="checked.png" onclick="this.parentNode.click();"/>';
    }
    else if (cellvalue == false){
        return '<img src="notchecked.png" onclick="this.parentNode.click();"/>';
    }
    else {
        return '';
    }
}

使用格式化程序的 colmodel 的摘录可以是：

colmodel: [ { name: 'CheckableCell', index: 'CheckableCell', editable: true, formatter: booleanFormatter}]

Answer 1

是的，或者您可以通过更不显眼的、类似 jQuery 的方式实现相同的结果。首先，按如下方式更改格式化程序函数：

function booleanFormatter(cellvalue, options, rowObject){
    if (cellvalue == true){
        return '<img src="checked.png" class="imgclickable"/>';
    }
    else if (cellvalue == false){
        return '<img src="notchecked.png" class="imgclickable"/>';
    }
    else {
        return '';
    }
}

接下来，将其添加到网格本身的属性列表中（将函数附加到网格的 gridComplete 事件）：

gridComplete: function() {
    jQuery('.imgclickable').click(function() {
        this.parentNode.click();
    });
}