【JQuery】「jquery-resizable」プラグインを使ってテーブルの列をリサイズできるようにしてみた
おはようございます。
以前紹介した「jquery-resizable」プラグインで、テーブル列のリサイズを試してみました。
プログラムは前回のものを流用。
【JQuery】FlexBoxを使って簡単にリサイズ可能なレイアウトを作れる「jquery-resizable」プラグイン
スポンサーリンク
プログラム
css
css/style.css
html,
body {
height: 100%;
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
padding: 0;
margin: 0;
overflow: auto;
}
.main-header {
-o-transition:margin-left .3s ease-in-out;
-webkit-transition:margin-left .3s ease-in-out;
border:none;
border-radius:0;
margin-bottom:0;
margin-left:0;
max-height:50px;
min-height:50px;
transition:margin-left .3s ease-in-out;
background-color: #7e83b6;
}
.main-header div {
padding:10px 10px;
font-size: 24px;
}
.panel-container {
display: flex;
flex-direction: row;
border: 1px solid silver;
overflow: hidden;
xtouch-action: none;
}
.panel-left {
flex: 0 0 auto;
padding: 10px;
width: 300px;
min-height: 200px;
min-width: 150px;
white-space: nowrap;
}
.splitter {
flex: 0 0 auto;
width: 10px;
background: url(https://raw.githubusercontent.com/RickStrahl/jquery-resizable/master/assets/vsizegrip.png) center center no-repeat #c1d0ea;
min-height: 200px;
cursor: col-resize;
}
.panel-right {
flex: 1 1 auto;
/* resizable */
padding: 10px;
width: 100%;
min-height: 200px;
min-width: 200px;
background: #e6e8f3;
}
.table {
background-color: #FFF;
}
.table thead tr th {
background-color: #ddd;
}
.resizer {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: auto;
width: 3px;
cursor: col-resize;
}
テーブル用、リサイズ用の定義を追加しました。
HTML
sample.html
<html> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title>リサイズレイアウトサンプル</title> <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" /> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css"> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="wrapper" > <header id="header-menu" class="main-header"> <div> <span>ヘッダー</span> </div> </header> <div class="panel-container"> <div class="panel-left" > サイド </div> <div class="splitter"></div> <div class="panel-right"> <div class="content container-fluid"> <div class="row"> <div class="col-md-12"> <table class="table table-striped table-bordered table-hover"> <thead> <tr> <th>No</th> <th>名前</th> <th>性別</th> <th>年齢</th> <th>種別</th> <th>好物</th> </tr> <thead> <tbody> <tr> <td>1</td> <td>そら</td> <td>♂</td> <td>6</td> <td>キジトラ</td> <td>犬の人形</td> </tr> <tr> <td>2</td> <td>りく</td> <td>♂</td> <td>5</td> <td>長毛種（不明）</td> <td>人間</td> </tr> <tr> <td>3</td> <td>うみ</td> <td>♀</td> <td>4</td> <td>ミケ（っぽい）</td> <td>高級ウェットフード</td> </tr> <tr> <td>4</td> <td>こうめ</td> <td>♀</td> <td>2</td> <td>サビ</td> <td>横取り</td> </tr> </tbody> </table> </div> </div> </div> </div> </div> </div> <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script> <script src="js/jquery-resizable.min.js"></script> <script src="js/jquery-resizableTableColumns.min.js"></script> <script src="js/script.js"></script> </body> </html>
jquery-resizableTableColumns の読み込みと、テーブルを追加しました。
Javascript
js/script.js
/**
* 画面読み込み後に高さを調整する
*/
$(window).on("load resize", function(){
var h = $(window).height() - 90;
$(".content").css("max-height", h);
$(".content").css("height", h);
})
/**
* 読み込み時の処理
*/
$(function(){
// リサイズできるようにする
$(".panel-left").resizable({
handleSelector: ".splitter",
resizeHeight: false
});
$("td,th").resizableTableColumns();
});
ヘッダ、ボディのセルにリサイズの設定をします。
起動してみる
無事にリサイズすることができました。
まとめ
リサイズした際に、別のカラムの幅も調整されてしまうのですが、標準的な動きなんでしょうかね？
ちょっと気に入らないので、時間が出来たらどうにかならないか調べてみたいと思います。
何かのお役に立てれば。
ではでは。