SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

jQuery UI/プラグインの活用

データ操作に役立つjQueryプラグイン

「jQuery プラグイン」の利用(9)

  • X ポスト
  • このエントリーをはてなブックマークに追加

ダウンロード Sample.zip (2.7 MB)

table fixed headerプラグイン

 table fixed headerプラグインは、簡単なテーブル構成で作成したデータを、グリッド形式で表示するプラグインです。このプラグインを使うことで、データのソートやページングなどを簡単に適用させることができます。

 プラグイン適用後を図1に示します。

図1 table fixed headerプラグイン適用後
図1 table fixed headerプラグイン適用後

 また、列2に対してデータのソートを行った場合を図2に、列2の列幅を変更した場合を図3に示します。

図2 table fixed headerプラグイン適用後(列2でソーティング)
図2 table fixed headerプラグイン適用後(列2でソーティング)
図3 table fixed headerプラグイン適用後(列2の列幅を変更)
図3 table fixed headerプラグイン適用後(列2の列幅を変更)

 「table fixed header」のサイトからjquery.fixheadertable-2.0.zipをダウンロードし、解凍後にpluginフォルダ下に配置します。

 リスト1にtable fixed headerプラグインの使用例を示します。

リスト1 table fixed headerプラグインの使用例(jQueryPlugin_fixheadertable.html)
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>jQueryプラグイン(table fixed header) サンプル</title>
<!--1.jQueryの読み込み-->
<script type="text/javascript" src="Scripts/jquery-1.6.1.min.js"></script>
<!--2.プラグインの読み込み-->
<script type="text/javascript" src="plugins/jquery.fixheadertable-2.0/javascript/jquery.fixheadertable.min.js"></script>
<script type="text/javascript" src="Scripts/jquery-ui-1.8.13.custom/js/jquery-ui-1.8.13.custom.min.js"></script>
<!--3.CSSの設定-->
<link rel="stylesheet" type="text/css" href="plugins/jquery.fixheadertable-2.0/css/base.css" />
<link rel="stylesheet" type="text/css" href="Scripts/jquery-ui-1.8.13.custom/css/ui-lightness/jquery-ui-1.8.13.custom.css" />

<!--4.プラグインの設定-->
<script type="text/javascript">
    $(function () {
        $('.sampletabale').fixheadertable({
            caption: 'キャプションを指定する ',
            height: 200,
            width: 450,
            zebra: true, 
            resizeCol: true,
            minColWidth: 50,
            colratio: [100, 150, 200], 
            sortable: true,
            sortType: ['integer', 'string', 'string'],
            pager: true,
            rowsPerPage: 10
        });
    });
</script>
</head>
<body>
    <h1>jQueryプラグイン(table fixed header) サンプル</h1>
<table class="sampletabale">
    <thead>
        <tr><th>列1</th><th>列2</th><th>列3</th></tr>
    </thead>
    <tbody>
        <tr><td>1</td><td>YYY</td><td>ZZZ</td></tr>
	(中略)
        <tr><td>15</td><td>YYY</td><td>ZZZ</td></tr>
    </tbody>
</table>
</body>
</html>

 table fixed headerプラグインを使用するには、jquery.fixheadertable.min.jsを読み込み、「4.プラグインの設定」のように、表示領域のclass属性を指定し、fixheadertableメソッドを使用します。ページング機能を追加した場合などで、テーブルの外観にjQuery-UIを使用しているため、加えてjquery-ui-X.X.X.custom.min.jsとjquery-ui-X.X.X.custom.cssを読み込んでください。執筆時点のjQuery UIの最新版は、1.8.13です。jQuery UIのサイトからダウンロードしてください。

 fixheadertableメソッドのオプションでは、ソートやページング、データフォーマットなどを指定します。表示領域で、列名はtheadタグで指定し、データに当たる部分はtbodyタグを使用します。fixheadertableメソッドの主なオプションを表2に示します。

表2 fixheadertableメソッドのオプション
オプション名 概要 デフォルト
caption キャプション ' '
height テーブルの高さ null
width テーブルの幅 null
zebra 行のスタイルを置き換えるか。true/false false
resizeCol カラム幅が可変か。true/false false
minColWidth カラムの最小幅 100
colratio カラム幅の割合 []
sortable ソートするか。true/false false
sortType ソート時の型。float/integer/date/string []
pager ページングするか。true/false false
rowsPerPage 1ページに表示する行数 10

次のページ
Sigma Gridプラグイン

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
jQuery UI/プラグインの活用連載記事一覧

もっと読む

この記事の著者

山田 祥寛(ヤマダ ヨシヒロ)

静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。主な著書に「独習シリーズ(Java・C#・Python・PHP・Ruby・JSP&サーブレットなど)」「速習シリーズ(ASP.NET Core・Vue.js・React・TypeScript・ECMAScript、Laravelなど)」「改訂3版JavaScript本格入門」「これからはじめるReact実践入門」「はじめてのAndroidアプリ開発 Kotlin編 」他、著書多数

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

WINGSプロジェクト asa(asa)

 <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田...

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/5946 2011/05/31 14:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング