そういうこと（機能）を実装したい場合があると思います。
JSのsort関数（定義に関しては下の方にまとめているので見てください）と
jQueryを組み合わせることで結構簡単にできたので備忘録しときます。
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ステップをコーディングするだけ。
１、ソート対象配列を取得
【実装】
var sortItem = $('.sort_item');
２、ソート関数を実装
【実装】
sortItem.sort(function(a, b){
//ここに比較処理を書く
//返却は-1, 0 , 1のどれか
});
いろいろ検証してsort関数について理解を深めていきます。
検証はChrome28を使ってます。
★検証パターン１
引数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){
//検証パターン１
//出力
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は「ソート順を定義する関数を指定します。省略された場合、配列を各要素の文字列比較に基づき辞書順にソートされます。」だそうです。
jQueryで並べなおす機能を実装するには以下の2ステップをコーディングするだけ。
１、ソート対象配列を取得
【実装】
var sortItem = $('.sort_item');
２、ソート関数を実装
【実装】
sortItem.sort(function(a, b){
//ここに比較処理を書く
//返却は-1, 0 , 1のどれか
});
いろいろ検証してsort関数について理解を深めていきます。
検証はChrome28を使ってます。
★検証パターン１
引数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){
//検証パターン１
//出力
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 件のコメント:
コメントを投稿