[jQuery]jqGridのformatter、unformat についての覚書

jqGridでデータを表示させる時に、エクセルで言うところの「セルの書式設定」的なことができる、fomatterというプロパティがあるんですが、それについての覚書です・・

※その後の検証結果、ベタ書きでデータをJavaScriptファイルにおいている場合は可能ですが、Ajax経由でサーバから取得したJsonデータで同じことをしようとしたところ、直前のレコードのデータを取得できませんでした。
よって、この文書はあまりあてにはなりません。

MS-Access なんかでレポートを作成するときに、「重複データの非表示」というオプションがあって、すぐ上のレコードの内容と現在のレコードの内容が同じ場合に表示させないオプションがあります。
例えば、こんな感じです。

いろいろ試行錯誤しましたが、結局次のように処理しました。

function myFormatter(cellvalue, options, rowObject) {
  //  行番号（最初の行番号は１空開始）
  var rid = options.rowId;
  //  このグリッドのid属性名
  var gid = options.gid;
  //  colModel ... {... name: xxx , ... } のxxx を返す（いわゆるカラム名）
  var cname = options.colModel.name;
  //  表示する値
  var showdata = '';
  //  現在行のセルの値
  var curdata = cellvalue;
  //  １つ上の行同じセルの値
  var prvdata;

  if (rid > 1) {
    prvdata = $("#" + gid + '_' + (rid - 1) + '_' + cname).attr("cellvalue");
    if (prvdata == curdata) {
      //  現在のセルの値と、上の値が同じなら「〃」で。
      showdata = '　　〃';
    } else {
      //  違うなら現在のセルの値
      showdata = curdata;
    }
  } else {
    //  一行目は現在行のデータを
    showdata = curdata;
  }
  //  表示する値 になる。
  var val = '' + showdata + '';
  return val;
}

function myUnformat(cellvalue, options, cellobject) {
  return $(cellobject).children('span').attr('cellvalue');
}

全体のサンプルソース

/**
 *   にグリッドを表示します。
 */
var data = [ 
             [ 48803, "DSK1", "", "02200220", "OPEN" ],
             [ 48769, "APPR", "", "77733337", "ENTERED" ] 
             ];

var subgridData = [ 
                   [ 1, "Item 1", 3 ], [ 2, "Item 1", 2 ], [ 3, "Item 1", 3 ],
                   [ 4, "Item 2", 6 ], [ 5, "Item 2", 1 ], [ 6, "Item 2", 8 ],
                   [ 7, "Item 3", 2 ], [ 8, "Item 3", 1 ], [ 9, "Item 4", 3 ],
                   [ 10, "Item 4", 5 ], [ 11, "Item 4", 5 ], [ 12, "Item 4", 5 ], 
                   ];

var globalSubGridNames = [];

$("#grid").jqGrid({
  datatype : "local",
  height : 250,
  colNames : [ 'Inv No', 'Thingy', 'Blank', 'Number', 'Status' ],
  colModel : [ {
    name : 'id',
    index : 'id',
    width : 60,
    sorttype : "int"
  }, {
    name : 'thingy',
    index : 'thingy',
    width : 90,
    sorttype : "date"
  }, {
    name : 'blank',
    index : 'blank',
    width : 30
  }, {
    name : 'number',
    index : 'number',
    width : 80,
    sorttype : "float"
  }, {
    name : 'status',
    index : 'status',
    width : 80,
    sorttype : "float"
  } ],
  pager : 'pagerId',
  caption : "Stack Overflow Subgrid Example",
  subGrid : true,
  subGridOptions : {
    "plusicon" : "ui-icon-triangle-1-e",
    "minusicon" : "ui-icon-triangle-1-s",
    "openicon" : "ui-icon-arrowreturn-1-e",
    "reloadOnExpand" : false,
    "selectOnExpand" : true
  },
  subGridRowExpanded : subg
});

var names = [ "id", "thingy", "blank", "number", "status" ];
var mydata = [];

for (var i = 0; i < data.length; i++) {
  mydata[i] = {};
  for (var j = 0; j < data[i].length; j++) {
    mydata[i][names[j]] = data[i][j];
  }
}

for (var i = 0; i <= mydata.length; i++) {
  $("#grid").jqGrid('addRowData', i + 1, mydata[i]);
}

$("#grid").jqGrid('setGridParam', {
  ondblClickRow : function(rowid, iRow, iCol, e) {
    alert('double clicked');
  }
});

function subg(subgrid_id, row_id) {
  var subgrid_table_id, pager_id;
  subgrid_table_id = subgrid_id + "_t";
  pager_id = "p_" + subgrid_table_id;
  $("#" + subgrid_id).html(
      "
");
  $("#" + subgrid_table_id).jqGrid({
    datatype : "local",
    colNames : [ 'No', 'Item', 'Qty' ],
    colModel : [ {
      name : "num",
      index : "num",
      width : 80,
      key : true
    }, {
      name : "item",
      index : "item",
      width : 130,
      formatter : myFormatter
    }, {
      name : "qty",
      index : "qty",
      width : 70,
      align : "right"
    } ],
    rowNum : 20,
    pager : pager_id,
    sortname : 'num',
    sortorder : "asc",
    height : '100%'
  });
  $("#" + subgrid_table_id).jqGrid('navGrid', "#" + pager_id, {
    edit : false,
    add : false,
    del : false
  });

  var subNames = [ "num", "item", "qty" ];
  var mysubdata = [];
  for (var i = 0; i < subgridData.length; i++) {
    mysubdata[i] = {};
    for (var j = 0; j < subgridData[i].length; j++) {
      mysubdata[i][subNames[j]] = subgridData[i][j];
    }
  }
  for (var i = 0; i <= mysubdata.length; i++) {
    $("#" + subgrid_table_id).jqGrid('addRowData', i + 1, mysubdata[i]);
  }
}

function myFormatter(cellvalue, options, rowObject) {

  var rid = options.rowId;
  var gid = options.gid;
  var cname = options.colModel.name;
  var showdata = '';
  var curdata = cellvalue;
  var prvdata;

  if (rid > 1) {
    // prvdata = $("#"+gid).getCell(rid -1, cname);
    prvdata = $("#" + gid + '_' + (rid - 1) + '_' + cname).attr("cellvalue");
    if (prvdata == curdata) {
      showdata = 'same as above.';
    } else {
      showdata = curdata;
    }
  } else {
    showdata = curdata;
  }
  var val = '' + showdata + '';
  return val;
}

function myUnformat(cellvalue, options, cellobject) {
  return $(cellobject).children('span').attr('cellvalue');
}