Google+ Followers

2013年7月21日日曜日

jQueryでtableをまるごとソートするためには

HTMLでテーブルを組んだあとで、何かをキーにして並べ替えをしたい、
そういうこと(機能)を実装したい場合があると思います。

JSのsort関数(定義に関しては下の方にまとめているので見てください)と
jQueryを組み合わせることで結構簡単にできたので備忘録しときます。

改善、もっと簡単にできるってのがあればコメントお願い致します。

sort関数は配列を簡単に並べ替えることができます。

よくある例では以下のような配列をソートします。
var a = [2, 1, 4, 3];

それを応用して以下のような配列をソートします。
var b = [object, object, object];

具体例を見ながらの方がいいと思います。
例)以下のテーブルを入力されたキーをもとにソートし直したい

<a id='resort' href='#'/>並べなおす</a>
<table>

<tr class='sort_item'>
  <td class='sort_key'>
    <input type='text' name='hoge1' value="0"/>
  </td>
  <td>
  ....
  </td>
</tr>

<tr class='sort_item'>
  <td class='sort_key'>
    <input type='text' name='hoge2' value=""/>
  </td>
  <td>
  ....
  </td>
</tr>

<tr class='sort_item'>
  <td class='sort_key'>
    <input type='text' name='hoge3' value="a"/>
  </td>
  <td>
  ....
  </td>
</tr>

<tr class='sort_item'>
  <td class='sort_key'>
    <input type='text' name='hoge4'  value="4"/>
  </td>
  <td>
  ....
  </td>
</tr>



</table>

jQueryで並べなおす機能を実装するには以下の2ステップをコーディングするだけ。

1、ソート対象配列を取得
【実装】
var sortItem = $('.sort_item');

2、ソート関数を実装
【実装】
sortItem.sort(function(a, b){
  //ここに比較処理を書く
  //返却は-1, 0 , 1のどれか
});

いろいろ検証してsort関数について理解を深めていきます。
検証はChrome28を使ってます。

★検証パターン1
引数aとbには何が入ってくるのか!?
【ソースコード】
<html>
<head><title>sort test</title>
<meta charset="utf-8"/>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script>
$(document).ready(function(){
$("#resort").click(function(){
var sortItem = $('.sort_item');
sortItem.sort(function(a, b){
//検証パターン1
//出力
console.log(a);
console.log(b);
});
});
});
</script>
</head>
<body>
<a id='resort' href='#'/>並べなおす</a>
<table>

<tr class='sort_item'>
  <td class='sort_key'>
    <input type='text' name='hoge1' value="0"/>
  </td>
  <td>
  0
  </td>
</tr>

<tr class='sort_item'>
  <td class='sort_key'>
    <input type='text' name='hoge2' value=""/>
  </td>
  <td>
  ....
  </td>
</tr>

<tr class='sort_item'>
  <td class='sort_key'>
    <input type='text' name='hoge3' value="a"/>
  </td>
  <td>
  a
  </td>
</tr>

<tr class='sort_item'>
  <td class='sort_key'>
    <input type='text' name='hoge4'  value="4"/>
  </td>
  <td>
  4
  </td>
</tr>
</body>
</html>

【結果】
出力は以下のようになりました。
これ順番に隣同士の要素を引数a、bに与えてるんですね。
-------

-------


さて、本題に戻ります。
これで引数に何が入ってくるかわかりました。

そこからキーを取って来てくらべればいいということです。

var aKey = $(a).find(".sort_key").val();
var bKey = $(b).find(".sort_key").val();
if (aKey > bKey) return -1;
else if (aKey < bKey) return 1;
else return 0;

という感じにすればいいということですね。

これでいろいろ応用が利くようになりますね!


■sort関数の定義
元情報(https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/sort)に基づいて話しています。

構文は【array.sort(compareFunction);】で定義されています。

この引数のcompareFunctionが今回のミソです。
元情報から引用すればcompareFunctionは「ソート順を定義する関数を指定します。省略された場合、配列を各要素の文字列比較に基づき辞書順にソートされます。」だそうです。


compareFunction が与えられた場合、配列の要素は比較関数の返り値に基づきソートされます。もし a と b が比較されようとしている要素の場合、
  • compareFunction(a, b) が 0 未満の場合、a を b より小さい添字にソートします。
  • compareFunction(a, b) が 0 を返す場合、a と b は互いに関して変えることなく、他のすべての要素に関してソートします。注意: ECMAScript 標準はこの振る舞いを保証しておらず、そのため一部のブラウザ (例えば、遅くとも 2003 年以前のバージョンの Mozilla) はこれを尊重していません。
  • compareFunction(a, b) が 0 より大きい場合、b を a より小さい添字にソートします。
(元情報より引用)

0 件のコメント:

コメントを投稿