リストやテーブルなど（li、tr、option）をソート「SortedList」
当ページのリンクには広告が含まれています。
スポンサーリンク
リストやテーブルなど（li、tr、option）をソートするプラグイン「SortedList」を紹介します。
jQueryプラグイン「SortedList」
このプラグインを使えば、リストやテーブルのアイテムをクリックなどアクションでソートすることができます。
リストやテーブルだけではなく、DOM要素であれば何でもソートすることができるようなので、使い勝手がよさそうですね。
スポンサーリンク
それではデモページのチェックボックスをクリックして、ソートしてみてください。
デモのソース（HTML + jQuery）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="SortedList のデモでーす。">
<title>SortedList - jQuery Plugin Demo</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="jquery.sortedlist.js"></script>
<script>
$(function(){
$("#demo").sortedList({
sort : [
{ desc : { data : "moved" } },
{ asc : { data : "al-index" } }
]
});
$("#demo").find( "input[type=checkbox]" ).each(function(){
$( this ).parent().data( "moved", 0 );
}).change( function(){
$( this ).parent().data( "moved", $(this).is(":checked") );
$("#demo").sortedList( "order" )
});
});
</script>
</head>
<body>
<p><a href="https://webkaru.net/jquery-plugin/sortedList/">「jQueryプラグインまとめ」に戻る</a></p>
<h1>SortedList のデモ。</h1>
<ul id="demo">
<li><input type="checkbox" /> A</li>
<li><input type="checkbox" /> B</li>
<li><input type="checkbox" /> C</li>
<li><input type="checkbox" /> D</li>
<li><input type="checkbox" /> E</li>
</ul>
</body>
</html>
スポンサーリンク