チェックボックスの付いたテーブル要素のソーティングがしたかったので、ソーティング機能を持ったjQueryのプラグインである「Tablesorter」とshift＋クリックで一括チェック・一括チェック解除が出来る「jQuery Field Plug-in」を併用して使いました。
単純に二つのプラグインを設定したら、ソーティングをした時に、一括チェックが指定した順番にならない現象が生じたので、その対策のメモとして記載したいと思います。
目次
- 前提条件
- 各プラグインダウンロード先
- 対応方法
- サンプルプログラム
- サンプルプログラム実行結果
前提条件
- 検証ブラウザ：Firefox 22.0
- jQueryのバージョン：jquery1.8.3
- Tablesorterのバージョン：2.0.5
- jQuery Field Plug-inのバージョン：0.9.6
各プラグインダウンロード先
各プラグインのダウンロード先は以下になります。対応方法
Tablesorterでソートした後に再度一括チェックのプラグイン「jQuery Field Plug-in」を定義してあげないと、ソートした前の状態でjQuery Field Plug-inが紐付いてしまっている為、予期せぬ場所にチェックが入ってしまいます。そこで、Tablesorterのソートが終わった時発生するイベント「sortEnd」時に再度定義してあげると動きます。
サンプルプログラム
実際にサンプルプログラムを使って動かしてみます。<!DOCTYPE HTML>
<html lang="jp">
<head>
<meta charset="utf-8">
<!--ダウンロードしてきたCSSを読み込みます -->
<link rel="stylesheet" type="text/css" href="themes/green/style.css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://www.pengoworks.com/workshop/jquery/field/jquery.field.min.js"></script>
<script src="jquery.tablesorter.min.js"></script>
<script type="text/javascript">
$(function() {
//jquery fieldの設定
$('input:checkbox').createCheckboxRange();
//tablesorterの設定
$('#large').tablesorter()
.bind("sortEnd", function(){
//再設定
$('input:checkbox').createCheckboxRange();
});
});
</script>
</head>
<body>
<table id="large" cellspacing="0" class="tablesorter">
<thead>
<tr>
<th>Name</th>
<th>Major</th>
<th>Sex</th>
<th>English</th>
<th>Japanese</th>
<th>Calculus</th>
<th>Geometry</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Major</th>
<th>Sex</th>
<th>English</th>
<th>Japanese</th>
<th>Calculus</th>
<th>Geometry</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Student01</td>
<td>Languages</td>
<td>male</td>
<td>80</td>
<td>70</td>
<td>75</td>
<td><form><input type="checkbox" checked=""/></form></td>
</tr>
<tr>
<td>Student02</td>
<td>Mathematics</td>
<td>male</td>
<td>90</td>
<td>88</td>
<td>100</td>
<td><form><input type="checkbox"/></form></td>
</tr>
<tr>
<td>Student03</td>
<td>Languages</td>
<td>female</td>
<td>85</td>
<td>95</td>
<td>80</td>
<td><form><input type="checkbox" checked=""/></form></td>
</tr>
<tr>
<td>Student04</td>
<td>Languages</td>
<td>male</td>
<td>60</td>
<td>55</td>
<td>100</td>
<td><form><input type="checkbox" checked=""/></form></td>
</tr>
</tbody>
</table>
</body>
</html>
サンプルプログラム実行結果
サンプルプログラムを実行した結果は以下のようになります。Japaneseでソートした後にGeometryを一番上から3番目までシフトを押しながらチェックをしています。
0 コメント:
コメントを投稿