小粋空間  -  a cheap joke and a play on words site

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

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

変更前

変更後

１．はじめに

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

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

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

２．プラグインのダウンロード

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

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

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

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

３．基本

簡単なサンプルとして、次の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要素を指定すれば、列幅が可変になります。

４．特定の列を固定する

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

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

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

５．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>

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