jQuery Flexigrid　クリック（ダブルクリック）処理の追加

最終更新日: 2011-07-15
投稿日: 2011-06-09

jQueryプラグインの「Flexigrid」を使用したのですが、テーブルのフォーマットをこれでもかというぐらい見事にしてくれます。

これで充分なのですが、行をクリック（ダブルクリック）した時に処理をしたい時があると思います。というより私がそうしたい処理があったので調べてみました。

基本的にはコアファイルを弄るのは良くないと思うので、後から独自でクリック処理を追加してやるのが王道だと思います。
ただ調べている中で、コアファイルを改造してそういう処理を埋め込むやり方が書かれていたので今回はそれを参考にクリック処理を追加してみました。（flexigridのバージョンは1.1です。）

参照URL :
http://groups.google.com/group/flexigrid/browse_thread/thread/8b068601cb659c49/723605f2911b1b71
http://groups.google.com/group/flexigrid/browse_thread/thread/3b6817e91684b8e8/f877eee4f5e9f037

まずは初期設定の登録。

// ほぼ最初の行の箇所
$.addFlex = function (t, p) {
  ・・・
  onSuccess: false,
  onError: false,
  onSubmit: false, //using a custom populate function
  onRowClick: false,  // ←クリックイベントハンドラ 追加
  onDblClick: false   // ←ダブルクリックイベントハンドラ 追加
}, p);

次に行クリック時、ダブルクリック時の箇所にイベントハンドラの登録を追加します。

// v1.1の場合、650行目あたり
addRowProp: function () {
  $('tbody tr', g.bDiv).each(function () {
    $(this).click(function (e) {
      var obj = (e.target || e.srcElement);
      if (obj.href || obj.type) return true;
      $(this).toggleClass('trSelected');
      if (p.singleSelect) $(this).siblings().removeClass('trSelected');
      // ここから追加
      if (p.onRowClick) {
        var json;
        var tds = $(this).find('td');
        json = '{"rowid":"' + $(this).attr('id') + '",';
        for (var i = 0; i < p.colModel.length; i++) {
          json += '"' + p.colModel[i].name + '":"' + $(tds[i]).text() + '"';
          if ((i + 1) != p.colModel.length) json += ',';
        }
        json += '}';
        data = $.parseJSON(json);
        p.onRowClick($(this), data);
      }
      // ここまで追加
    }).mousedown(function (e) {
      ・・・
    }, function () {}).dblclick(function() { // ダブルクリックイベント自体が無いので、イベントを追加
      if (p.onDblClick) {
        // 処理はクリック時と同じ
        ・・・
        p.onDblClick($(this), data); // 最後は違います
      }
    });

これでクリックイベントとダブルクリックイベントが追加されます。
もちろんどちらか一方だけでも構いません。（当たり前の話ですが）

後はいつものように使えば良いです。

jQuery("#table1").flexigrid({
  url: 'data.php',
  dataType: 'json',
  colModel : [
    {display: 'ISO', name : 'iso', width : 40, sortable : true, align: 'center'},
    {display: 'Name', name : 'name', width : 180, sortable : true, align: 'left'},
  ],
  ・・・
  useRp: true,
  rp: 15,
  onRowClick: function(row, data) { // クリックイベント処理
    alert(data.iso);
  }
});

使い勝手は良くなりますが、コアファイルの改造ですのでバージョンアップされた場合などで面倒くさい事になると思います。なので割り切りが必要だと思います。

タグ: Flexigrid, jquery, クリック処理, ダブルクリック処理, 行
トラックバックURL

jQuery Flexigrid クリック（ダブルクリック）処理の追加