JqGridの項目幅をデータに合わせて動的に変更する

やりたいこと

JqGridの項目幅をデータに合わせて動的に変更したい。
以下を参照すると、APIはなさそうだ。
[jqGrid で動的に列幅を変更する]
(http://qiita.com/labocho/items/fe132c58da7b11c8e555)

方法

JqGrid#gridComplete でデータに合わせて項目幅を調整する。
[JqGrid(events)]
(http://www.trirand.com/jqgridwiki/doku.php?id=wiki%3Aevents)
幅の計算は文字数ではなく、SPAN要素を一時的に追加して、innerWidthから取得する。

動作環境

• JqGrid 4.3.3 (※諸事情でちょっと古い)
• IE11, Chrome

前提

• JqGridの以下の要素は予め指定する.

autoWidth: false
shrinkToFit: false

• データ部の項目のwidthは指定する

(これを指定しないと幅をドラッグで調整する際の補助線表示位置が崩れる)

サンプル

/**
 * JqGridの描画後処理.
 */
function addressListOnGridComplete() {

  var listId   = 'JqGridのIDを指定';
  var $list    = $('#' + listId);
  var colNames = ['項目幅を調整したい項目のnameを配列で指定'];
  var rowData  = $("#" + listId).jqGrid('getRowData');

  for (var i = 0; i < colNames.length; i++) {
    var colName    = colNames[i];
    var $col       = $("#" + listId + '_' + colName);
    var fontSize   = $col.css('font-size');
    var fontFamily = $col.css('font-family');
    var fontWeight = $col.css('font-weight');
    var textAlign  = $col.css('text-align');
    var caption    = '';

    // 項目幅保持用.
    var colSizeList = [];

    // 項目幅をすべて取得する.
    for (var j = 0; j < rowData.length; j++) {
      var rowDatum = rowData[j];
      caption  = rowDatum[colName];
      var colWidth = calcColumnWidth(caption, fontSize, fontFamily, fontWeight, textAlign);
     // 項目幅を保持する
      colSizeList.push(colWidth);
    }

    // ヘッダの幅を取得する.
    var $header = $('#' + 'jqgh_' + listId + '_' + colName);
    fontSize   = $header.css('font-size');
    fontFamily = $header.css('font-family');
    fontWeight = $header.css('font-weight');
    textAlign  = $header.css('text-align');
    caption    = $header.text();
    var headerWidth = calcColumnWidth(caption, fontSize, fontFamily, fontWeight, textAlign);
    // 項目幅を保持する.
    colSizeList.push(headerWidth);

    // 保持した項目幅の最大値を取得する.
    var colSize = Math.max.apply(null, colSizeList);
    // 項目に指定した幅を設定する
    $col[0].style.width = colSize + "px";
    // 複数選択/単一選択を取得する.(1列目に幅を適用するかの判定)
    var isMultiSelect = $list.jqGrid('getGridParam', 'multiselect');
    var idx = i + (isMultiSelect ? 1 : 0);
    // ヘッダ項目に指定した幅を設定する
    $(".jqgfirstrow > td")[idx].style.width = colSize + "px";
    // JqGridの項目の幅情報の上書き.
    $list[0].grid.headers[idx].width = colSize;
    // colModelの幅の情報を更新する.
    var colModel = $list.jqGrid('getGridParam', 'colModel');
    colModel[idx].width = colSize;
    $list.jqGrid('setGridParam', 'colModel', colModel);

    colSizeList = [];
  }
}

/**
 * 幅を計算する.
 * @param {string} caption    キャプション. 
 * @param {string} fontSize   フォントサイズ.
 * @param {string} fontFamily フォント.
 * @param {string} fontWeight フォント書式.
 * @param {string} textAlign  テキスト位置.
 * @return {Number} 項目幅.
 */
function calcColumnWidth(caption, fontSize, fontFamily, fontWeight, textAlign) {

  // 幅計算用のSPAN要素を生成.
  var spanElement = {
    id: 'colWidthCalc',
    html: caption,
    css: {
      'color'      : 'red',
      'font-size'  : fontSize,
      'white-space': 'nowrap',
      'font-family': fontFamily,
      'font-weight': fontWeight,
      'text-align' : textAlign,
      'visibility' : 'hidden'
    }
  };
  var $element = $('<span></span>', spanElement);
  $(document.body).append($element);

  // 幅を計算.
  var calcWidth = $element.innerWidth();

  // 幅計算用のSPAN要素をremove.
  $('span').remove('#colWidthCalc');

  return calcWidth;
}