Flexigridをprototype.jsと一緒に使う方法

テーブルをcoolなグリッドにしてくれるjQuery用javascriptライブラリのFlexigridを試してみたのでメモ。

Flexigrid for jQuery : Web 2.0 Javascript Data Grid
http://webplicity.net/flexigrid/

Using Flexigrid.js with jQuery and Prototype.js.

次の様なコードでjQueryとPrototype.jsを一緒に使おうとするとFlexigrid.jsが上手く動いてくれません。グリッドが真っ白になって枠しか表示されないという事態に。

<link rel="stylesheet" type="text/css" href="./css/flexigrid/flexigrid.css" />
<script type="text/javascript" src="./jquery.js"></script>
<script>
jQuery.noConflict();
var j$ = jQuery;
</script>
<script type="text/javascript" src="./flexigrid.js"></script>
<script type="text/javascript" src="./prototype.js"></script>

<script>
j$(function(){
	j$(".flexime1").flexigrid();
});
</script>

調べてみたらFlexigrid.jsの中でDOM要素に hide というプロパティを追加してセルの表示/非表示を判断するためのフラグにしているのが原因の様で。Prototype.js をincludeしていると、全てのDOM要素に hide というfunctionが追加されるため、 hide というプロパティの有無をチェックしているif文が全てtrueになる。

// Flexigrid 1.0b3 950行目辺り
// Prototype.js を読み込んでいると次の行が必ず実行される
if (this.hide) $(this).hide();

これを回避するためには hide というプロパティを使っている7箇所を全て書き換えてやればOK。

// hide の代わりに _hide を使う
//th.hide = true;
th._hide = true;

// hide の代わりに _hide を使う
//if (this.hide) $(this).hide();
if (this._hide) $(this).hide();