jQueryのテーブル・プラグインはググれば一杯出てくるんだけど 細かい動作が思った通り行かなかったり、 デザインが合わなかったり、 で以外とカスタマイズにコストがかかる。

と言うわけで自分の好みのテーブル・プラグインを作ってみた。

基本方針はエクセルっぽい雰囲気 (^^;。
こんな機能で

  • カラム幅の動的変更
  • カラム順序の動的変更
  • ソート
  • ヘッダ固定
  • カラム幅に合わせたセル内での行の折返し
  • セルの表現方法のカスタマイズ

こんな感じになった。(個人データはダミーです)

使い方：

<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>ExTable</title> <script src="../jq/jquery-1.8.2.js" ></script> <link href="../Common/css/Common.css" rel="stylesheet" /> <script src="../Common/js/Common.js" ></script> <link href="css/ExTable.css" rel="stylesheet" /> <script src="js/ExTable.js" ></script> <link href="css/RateBar.css" rel="stylesheet" /> <style> html,body{ padding: 0; margin: 0; height: 100%; overflow: hidden; } </style> <script> $(function(){ // 「進捗」表示用カスタムカラム関数 function rateSetter($elem,data,index) { var val = data[index]; $elem.html("<div class='RateBar'><span></span></div>"); $elem.find(">div>span").css("width",val+"%"); } // カラムメタ情報 var columnMetas =[ {title:"番号", width:36, style:{textAlign:"right"}}, {title:"氏名", width:100 }, {title:"生年月日", width:100 }, {title:"進捗", width:30, setter:rateSetter}, {title:"住所", width:"100%", style:{whiteSpace:"normal", height:"auto"}} ]; // テーブルデータ var data = [ [1,"田附 昌宏" ,"1946/10/12",0,"神奈川県 横浜市鶴見区 仲通 50丁目6952-5264"], [2,"信宮 淳師" ,"1981/07/16",13,"新潟県 柏崎市 上方 91丁目3500-1101"], [3,"江羅 清紹" ,"1978/01/21",75,"広島県 安芸郡海田町 寿町 81丁目2602-5544"], [4,"中宿 巳代志","1955/06/19",45,"徳島県 那賀郡那賀町 丈ケ谷 98丁目3767-9635"], [5,"蟹山 稔大" ,"1951/10/24",53,"宮城県 亘理郡亘理町 下茨田 99丁目3076-2003"], [6,"金坂 又治","1990/05/08",21,"福岡県 福岡市南区 多賀 97丁目7522-4953"], [7,"常雪 晋大","1989/05/10",4,"長崎県 佐世保市 吉井町春明 43丁目9868-3882"], [8,"渡瀬 冨貴美","1987/09/11",67,"石川県 白山市 幸明町 66丁目6911-4432"], [9,"芳家 久登美","1978/05/01",67,"兵庫県 姫路市 飾磨区英賀東町 39丁目5646-4202"], [10,"波入 常林","1974/08/18",93,"大阪府 堺市堺区 海山町 24丁目4004-8405"], [11,"子末 滋富","1986/06/19",38,"愛知県 愛知郡長久手町 井堀 81丁目7801-9934"], [12,"杭本 大仁","1972/10/16",51,"千葉県 長生郡長南町 山内 81丁目3983-9220"], [13,"江寺 華林","1970/10/26",83,"京都府 福知山市 下紺屋 32丁目9109-7172"], [14,"黒森 徳","1954/06/01",3,"広島県 安芸高田市 吉田町多治比 38丁目7966-5842"], [15,"民井 祐宏","1961/12/14",5,"香川県 坂出市 文京町 97丁目7763-5388"], [16,"苅間澤 己蔵","1955/02/28",52,"神奈川県 川崎市川崎区 観音 94丁目6213-9307"], [17,"元川 茉由美","1975/05/03",67,"千葉県 柏市 松ケ崎新田 45丁目3309-7161"], [18,"石加 将王","1989/12/24",0,"愛知県 蒲郡市 西迫町 50丁目1806-5805"], [19,"矢草山 開次郎","1990/01/01",38,"愛知県 犬山市 木津 78丁目565-5209"], [20,"堤野 逸行","1965/02/06",6,"岐阜県 美濃加茂市 下米田町山本 58丁目4887-8192"], [21,"穂元 勝視","1969/09/20",41,"北海道 釧路市 海運 54丁目3726-9813"], [22,"木引 安吉","1971/02/03",68,"青森県 五所川原市 唐笠柳 38丁目2452-2323"], [23,"平体 惇","1979/11/14",58,"神奈川県 足柄下郡箱根町 木賀 99丁目1389-5725"], [24,"本屋敷 泉希","1990/01/17",93,"北海道 沙流郡平取町 荷菜 51丁目8471-9191"], [25,"入砂 初元","1992/04/22",84,"長崎県 南松浦郡新上五島町 鯛ノ浦郷 60丁目7499-3486"], [26,"松ノ木 倉蔵","1963/02/27",52,"鹿児島県 南さつま市 加世田宮原 37丁目1600-6786"], [27,"末釜 八久","1950/05/11",9,"島根県 松江市 千鳥町 71丁目6310-1694"], [28,"用原 松琴","1967/07/16",65,"熊本県 菊池市 七城町台 44丁目3007-3259"], [29,"石岬 紳也","1985/02/08",41,"栃木県 矢板市 平野 97丁目6245-5288"], [30,"潤米 耕一良","1982/02/04",70,"兵庫県 豊岡市 但東町正法寺 39丁目748-8259"] ]; // テーブル生成 var exTable = new ExTable("#exTable"); exTable.header(columnMetas).data(data); }); </script> </head> <body> <div id="exTable" class="ExTable"></div> </body> </html>



IE8 でも一応動いてる。 IE6,7はギブアップ (^^;

扱えるレコード数は IE8 前提なら 100レコードくらい。
Chromeなら500くらい有っても何とかしてくれる。

コードは結局、CSSが150stepくらいで、JSが 600step くらい。
カスタマイズするのにお手軽って程でも無い感じ。
ソースが見たい人は以下からどうぞ。(　っ・ω・)っﾄﾞｿﾞｫ

タウンロード：

  • http://code.google.com/p/kotemaru/downloads/list
    -> ExTable-demo.tgz