表(table)の列幅をドラッグで変更させる方法【jQueryプラグイン】

/

表(table)の列幅をドラッグで変更させる方法【jQueryプラグイン】

ここではjQueryのプラグイン「jQuery Resizable Columns」を使った、列幅をドラッグで変更できるようにする方法を解説します。

通常表の列幅は固定されています。それをユーザーが自由に変更できるようにする、ということです。
列幅が小さいため折り返している列を1行にしたいときなんかにあると便利な機能ですね。

これは表を使ったWEBアプリなど、様々な用途でこの表の列幅変更は使われています。
私の場合は、PythonのWebワークフレームDjangoでインシデントマネージャーアプリに使用しております。
インシデントが登録された表の列幅をドラックでユーザーが変更できるようにしております。

「jQuery Resizable Columns」による列幅変更のデモサイトは以下のリンクですので、どういった動きをするのか、まず確かめてみてください。

jQuery Resizable Columns demo site

それでは、表の列幅をドラッグで変更できるようにする方法を見ていきましょう。

jQuery Resizable Columnsのダウンロード

「jQuery Resizable Columns」のプラグインを以下ページ(Github)からダウンロードしてください。

jQuery Resizable Columnsダウンロード

上記ページのCODEボタン>DOWNLOAD ZIPよりZIPファイルをダウンロードします。

ダウンロードしたZIPファイルは解凍し、その中にあるdistフォルダ内のcssとjsファイルを使用しまので、特定のcssフォルダ、jsフォルダに移動してください。

表の列幅を変更できるようにする

解凍したファイルのdistフォルダにあるjquery.resizableColumns.cssとjquery.resizableColumns.min.jsの2種類のファイルを読み込ませます。

<link rel="stylesheet" href="./jquery.resizableColumns.css" />
<script src="./jquery.resizableColumns.min.js"></script>

もしjqueryの読み込みがされてなければ、下記も追加してください。

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

次に以下jQueryのコードを記載します。

$(function() {
    $('table').resizableColumns();
});

$(‘table’)は対象のtableのIDやClassを指定しても問題ありません。
これにより対象のテーブルの列幅がドラッグで変更可能になります。

以下に簡単なサンプルプログラムを記します。

<head>
<link rel="stylesheet" href="jquery.resizableColumns.css" />
</head>
<body>
<table>
    <thead>
        <tr>
            <th>Office54</th>
            <th>Python</th>
            <th>jQuery</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>FiveFour</td>
            <td>Django</td>
            <td>javascript</td>
        </tr>
        <tr>
            <td>Great</td>
            <td>Perfect</td>
            <td>Amaging</td>
        </tr>
    </tbody>
</table>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="jquery.resizableColumns.min.js"></script>
<script>
$(function(){
    $("table").resizableColumns({
    });
});
</script>
</body>

もし特定の列だけ可変させないようにしたい場合は、要素に「data-noresize」属性を追加します。

そうすることで、特定の列だけ、可変不可能となります。

変更した列幅を保存させる

この状態ですと、列幅を変更したのちにページをリロードすると、幅は元に戻ってしまいます。

この変更した幅を保存させるためにlocalStorageを使用します。

使い方はstore.jsというファイルを読み込ませて、各要素に「data-resizable-column-id」の属性を設定するだけです。

まずstore.jsファイルは以下ページからダウンロードしてください。

store.jsダウンロード

そうしたら、store.jsファイルを読み込ませます。

<script src="store.js"></script>

そして対象のtable要素とtdまたはth要素に「data-resizable-column-id」属性を追加してあげます。

最後、script要素にstore: window.storeを加えれば設定完了です。

$(function(){
    $("table").resizableColumns({
        store: window.store
    });
});

これらの設定により、列幅を変更してページをリロードしても、幅を変更した記録が残るようになります。

最初に紹介しているデモページがこの方法を使っているので、そちらも併せて確認してみてください。