jQueryでテーブル幅を変更できる「jQuery Resizable Columnsプラグイン」

jQueryでテーブル幅を変更できる「jQuery Resizable Columnsプラグイン」

Posted at November 5,2014 12:55 AM
Tag:[jQuery, Plugin, table]

jQueryでテーブル幅を変更できる「jQuery Resizable Columnsプラグイン」の紹介です。

変更前
変更前

変更後
変更後

1.はじめに

テーブルの列幅は通常であれば固定されていますが、このプラグインを利用することで可変にすることができます。

特定の列を折り返しなしで見たいときなど便利そうです。

また変更内容をlocalStorageに保存して、リロードしても元に戻らないようにさせることも可能です。

2.プラグインのダウンロード

jQuery Resizable Columnsプラグインのページにアクセスし、「Download ZIP」をクリックしてアーカイブをダウンロードします。

jQuery Resizable Columnsプラグインのページ

ダウンロードしたアーカイブを展開し、中にあるdist配下の、

  • jquery.resizableColumns.js
  • jquery.resizableColumns.min.js

のいずれかを利用します。

3.基本

簡単なサンプルとして、次のHTMLとCSSを用意します。

<style>
table {
    width: 500px;
}
table, th, td {
    border: 1px solid #999;
    border-collapse: collapse;
}
</style>
<table>
  <thead>
    <tr><th>No</th><th>foo</th><th>bar</th><th>hoge</th></tr>
  </thead>
  <tbody>
    <tr><td>1</td><td>aaa</td><td>xxx</td><td>123</td></tr>
    <tr><td>2</td><td>bbb</td><td>yyy</td><td>456</td></tr>
    <tr><td>3</td><td colspan="2">ccc</td><td>789</td></tr>
  </tbody>
</table>

次にhead要素に下記のscript要素を記述します。jquery.resizableColumns.min.jsのパスは適宜設定してください。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"><\/script>
<script src="jquery.resizableColumns.min.js"></script>
<script>
$(function(){
    $("table").resizableColumns();
});
</script>

「$("table")」の部分にプラグインを実行したいtable要素を指定すれば、列幅が可変になります。

4.特定の列を固定する

特定の列を固定するには、th要素に「data-noresize」を追加します。

<tr><th>No</th><th data-noresize>foo</th><th>bar</th><th>hoge</th></tr>

これで設定したth要素の前後の幅を変更できなくなります。

5.localStorageに保存する

HTML5のlocalStorageに保存して、変更した幅を保持させるには、store.jsと組み合わせます。

まず、table要素およびth要素に「data-resizable-column-id」という属性を設定し、任意の値を設定します。

<table data-resizable-columns-id="sample">
  <thead>
    <tr>
      <th data-resizable-column-id="no">No</th>
      <th data-resizable-column-id="foo">foo</th>
      <th data-resizable-column-id="bar">bar</th>
      <th data-resizable-column-id="hoge">hoge</th>
    </tr>
    …後略…

そしてscript要素に対し、下記の赤色の追加・変更を行います。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"><\/script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/store.js/1.3.14/store.min.js"></script>
<script src="jquery.resizableColumns.min.js"></script>
<script>
$(function(){
    $("table").resizableColumns({
        store: window.store
    });
});
</script>

これで列の幅を変更したあとにページをリロードしても直前の変更が反映されます。

関連記事
zenback
人気エントリー
トラックバックURL


コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)