エントリー
jquery.tablesorter.jsをメディア管理以外でも使用する方法
- カテゴリー：管理画面
- タグ：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>に変更（赤字部分を追加）します。
関連エントリー
- 2023/09/05 freoのプロフィールやコメントでGravatarのアバターを表示する方法
- 2021/11/14 ショッピングカートプラグインの商品配送方法・料金などの変更
- 2018/06/10 freo用markItUp!拡張版の配布
- 2018/05/12 freoのエントリーのタグ投稿を楽にする方法
- 2018/03/16 freoのエントリーとページの編集画面で添付ファイルとイメージの画像を表示する方法
- 2018/03/16 freoのエントリーとページの編集画面でオプションの画像を表示する方法
- 2018/02/09 freoのエントリーとページの管理画面に閲覧制限情報を表示する
- 2017/06/10 freoのtablesorter.jsを最新版にしてメディアの挿入ファイルを更新日時の新しいもの順に並べる
- 2017/06/10 freoのコメント登録フォームを折りたたむボタン
- 2017/06/10 freoをスマートフォンから見た時にリストのリンクなどをボタン化する
コメント
- コメントはまだありません。
コメント登録
- コメントを入力してください。
- 一旦登録したコメントは、あとで編集できませんのでご注意下さい。
