0

編集可能なセル (cellEdit: オプションで true) とセルの値に基づいて画像を返すカスタム フォーマッタで jqGrid を使用すると、Web アプリケーションで問題が発生しました。

画像自体ではないセルをクリックすると、セル編集が魅力的に機能します。ただし、画像自体をクリックすると、parentNode が見つからないという JavaScript エラーが発生します。

私は問題を深く掘り下げていませんが、jqGrid がカスタム フォーマッタを使用して画像を適用する方法、または parentNode を取得しようとする方法に関係があると思います。

とにかく、parentNode を呼び出してクリックする画像自体に onclick-event を指定することで、エラーを回避できます。

たとえば、このエラーを回避する簡単なカスタム フォーマッタは次のとおりです。

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

1 に答える 1

0

はい、または、より目立たない 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();
    });
}
于 2011-07-04T17:09:35.570 に答える