在jqGrid中将图像与自定义格式程序和cellEdit一起使用会导致JavaScript错误-解决方案

如何解决在jqGrid中将图像与自定义格式程序和cellEdit一起使用会导致JavaScript错误-解决方案

|| 在将jqGrid与可编辑单元格（cellEdit：选项中为true）和自定义格式化程序（基于单元格的值返回图像）一起使用时，我的Web应用程序出现问题。 单击不在图像本身上的单元格时，单元格编辑就像一个超级按钮。但是，单击图像本身时，您会遇到一个JavaScript错误，声称找不到parentNode。 我还没有深入研究这个问题，但是我想这与jqGrid如何使用自定义格式器应用图像或它如何尝试获取parentNode有关。 无论如何，通过在图像本身上指定一个onclick事件来调用其parentNode并单击它，就可以避免错误。 例如，一种可以解决此错误的简单自定义格式化程序是：

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}]

    

解决方法

        是的，或者您可以以一种更加不引人注目的，类似于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();
    });
}