小ネタ tablesorterをデフォルトで複数行ソートにする
ほんとは今日はSeam2.1.0GAのRSSサポートを技術検証しようと思ってたのですが、
さっき帰宅したばっかりなので今日は小ネタだけにします。
jQueryプラグインのtablesorterは、shiftキーを押しながらヘッダ行をクリックすると
複数行ソート、そのまま押せば単一行ソートになります。
では、はじめから複数行ソートだけにしたい時はどうすれば良いか?
そのまま真っ正直に使おうとするとこれは実現できません。もちろん改造すればOKですが、
できれば改造なしで複数行ソートをデフォルトにしたいものです。
tablesorterには"sortMultiSortKey"というオプションがあります。これは、複数行ソートする
ためのキーはどれにしますか?というもので、デフォルトは"shiftkey"になっています。
この値はjs内でイベントオブジェクト(window.event)に使われます。
問題の部分のjsはこのようになっています。
// user only whants to sort on one column if(!e[config.sortMultiSortKey]) { // flush the sort list config.sortList = []; if(config.sortForce != null) { var a = config.sortForce; for(var j=0; j < a.length; j++) { if(a[j][0] != i) { config.sortList.push(a[j]); } } } // add column to sort list config.sortList.push([i,this.order]); // multi column sorting } else { // the user has clicked on an all ready sortet column. if(isValueInArray(i,config.sortList)) { // revers the sorting direction for all tables. … } … }
「if(!e[config.sortMultiSortKey]) {」が常にelseを通るようにすれば良いので、
解決方法は「sortMultiSortKeyにtypeと設定する」になります。
クリックというイベントは必ず発生しているからです。
本家サイトのサンプルの書き方を真似れば
$(document).ready(function() { $("#myTable").tablesorter( {sortMultiSortKey: 'type'} ); } );
となる、という事ですね。これでデフォルトで複数行ソートになります。
HTMLの改行で発生した半角スペースを取り除く方法
<body> <a href="#"><img src="..."/></a> <a href="#"><img src="..."/></a> <a href="#"><img src="..."/></a> </body>
こんな感じで横並びの画像リンクをつくろうとすると、画像と画像の間に
半角スペース1つ分のスキマができてしまいます。
<body> <a href="#"><img src="..."/></a><a href="#"><img src="..."/></a><a href="#"><img src="..."/></a> </body>
こうやって改行しなければ、スキマなくぴったり画像リンクがくっつくのですが
Seamなどカスタムタグから自動生成される場合に困ってしまいます。
この事象を解決するには、以下のような記述にすればOKです。
<body> <div style="float:left"> <a href="#"><img src="..."/></a> </div> <div style="float:left"> <a href="#"><img src="..."/></a> </div> <div> <a href="#"><img src="..."/></a> </div> </body>