jquery.tablesorter.jsをメディア管理以外でも使用する方法

2013/09/25 22:58
カテゴリー：管理画面
タグ：freoテンプレート, tablesorter.js

freoの管理画面では、テーブルの表示でソートができるよう jquery.tablesorter.js が導入されていますが、メディア管理とファイル管理プラグインで使えるようにしかなっていません。
他の場面でも使えるようにするには、その都度 js/admin.js に設定を書くことになり、それでは効率が悪いので、テンプレートで設定をするようにしてみます。

1) jquery.metadata.js をダウンロードし、js/ ディレクトリにアップします。

2) templates/internals/admin/header.html の

<script type="text/javascript" src="{$freo.core.http_url}{$smarty.const.FREO_JS_DIR}jquery.tablesorter.js"></script>

の上の部分に、

<script type="text/javascript" src="{$freo.core.http_url}{$smarty.const.FREO_JS_DIR}jquery.metadata.js"></script>

を追加します。

3) js/admin.js の

$(document).ready(function() {

の直後に、

  //Tablesorter
  $("#table").tablesorter();

を追加します。

4) ソートをしたいテンプレートを編集します。
テンプレートの <table> タグに、id="table" class="tablesorter" を追加し、ソートさせる必要のない列の <th> タグに、class="{literal}{sorter: false}{/literal}" を追加します。
例：freoのユーザー管理の表示順を権限順にする場合
templates/internals/admin/user.html の25行目あたりにある

<table summary="ユーザー">

の部分を、

<table summary="ユーザー" id="table" class="tablesorter {literal}{sortlist: [[3,1],[4,1]]}{/literal}">

に変更（赤字部分を追加）します。
さらに33行目あたりにある

<th>作業</th>

の部分を、

<th class="{literal}{sorter: false}{/literal}">作業</th>

に変更（赤字部分を追加）します。

コメント登録

コメントを入力してください。
一旦登録したコメントは、あとで編集できませんのでご注意下さい。

名前

メールアドレス

URL

コメント（コメント本文の装飾について）

コメント本文の装飾について

本文に特定の記号を書くことにより、手軽にマークアップを行うことができます。

引用

概要

文章を >> だけの行と << だけの行で囲うと引用に変換します。

入力例

この部分は通常の文章です。
>>
ここは引用になります。
<<
この部分は通常の文章です。

結果

この部分は通常の文章です。

ここは引用になります。

この部分は通常の文章です。

整形コード

概要

文章を >|| だけの行と ||< だけの行で囲うと整形コードに変換します。プログラムの掲載時に利用すると読みやすくなります。

入力例

この部分は通常の文章です。
>||
<html>
　<body><p>HTMLやプログラムを掲載することができます。</p></body>
</html>
||<
この部分は通常の文章です。

結果

この部分は通常の文章です。

<html>
　<body><p>HTMLやプログラムを掲載することができます。</p></body>
</html>

この部分は通常の文章です。

閲覧制限

基本的には「全体に公開」されますが、内容によっては管理人の方で公開を制限する場合がありますので、その旨ご了承下さい。

freoをひらがな3文字で入力してください（スパム対策）

登録者情報を記憶する

日	月	火	水	木	金	土
-	-	-	-	-	1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30
31	-	-	-	-	-	-

freoカスタマイズ集