custom formatterとunformatを使う(jqGrid.colModel)

概要

データベースからPHP経由等で取得したデータをフォーマットして表示する。
たとえば、http://d.hatena.ne.jp/というデータをリンクにして表示したいとか、
0ならA、1ならBと表示したいときに使う。

predefined_formatter

ただ単にリンクにしたいだけならばjqGridに用意されている
フォーマットをそのまま適用するだけでよい。

$('#grid').jqGrid(
{
    'colModel':
    [
        {'name':'id', 'hidden':true'},
        {'name':'url', 'label':'URL', 'formatter':'link'}
    ]
});


参考:
wiki:predefined_formatter - jqGrid Wiki


custom format

0ならA、1ならB と表示するが、編集時は取得時の値を使用する場合。

  1. formatterの第三引数とunformatの第三引数が異なることに注意
  2. optionsの実装はドキュメントと異なるので注意(2010/12/21日時点)

ドキュメントとのコードとの違いは元データをspanで保管していること。
これで不可逆変換でも安心だね!

var fn_formatValue = function (celldata, options, rowobject)
{
    var showdata = '';
    if (celldata == '0') {
        showdata = 'A';
    } else if (celldata == '1'){
        showdata = 'B';
    } else {
        showdata = celldata;
    }

    return $(document.createElement('span'))
            .attr('original-value', celldata)
            .text(showdata);
};

var fn_unformatValue = function (celldata, options, cellobject)
{
    return $(cellobject).children('span').attr('original-value');
};

$('#grid').jqGrid(
{
    'colModel':
    [
        {'name':'id', 'hidden':true'},
        {'name':'value', 'formatter':fn_formatValue, 'unformat':fn_unformatValue}
    ]
});