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

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

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

都道府県名 市区町村名 番地等
大阪府 大阪市西区新町 5-8
  〃   〃 9-11
  〃 大阪市西区南堀江 11-13
  〃   〃 14-19
兵庫県 神戸市灘区篠原本町 1-110
  〃 神戸市中央区脇浜 8-31

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


function myFormatter(cellvalue, options, rowObject) {
  //  行番号(最初の行番号は1空開始)
  var rid = options.rowId;
  //  このグリッドのid属性名
  var gid = options.gid;
  //  colModel ... {... name: xxx , ... } のxxx を返す(いわゆるカラム名)
  var cname = options.colModel.name;
  //  表示する値
  var showdata = '';
  //  現在行のセルの値
  var curdata = cellvalue;
  //  1つ上の行同じセルの値
  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'); }
カテゴリー: javascriptweb

0件のコメント

コメントを残す

メールアドレスが公開されることはありません。