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>
に変更(赤字部分を追加)します。