ユーティリティ

2017年12月

- - - - - 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 - - - - - -

キーワード検索

キーワード検索フォーム
キーワード

ユーザー

  • cccのアバター

新着画像

新着コメント

過去ログ

Twitter

Twilogを見る

Feed

エントリー

jquery.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
コメント(コメント本文の装飾について
閲覧制限
※基本的には「全体に公開」されますが、内容によっては管理人の方で公開を制限する場合がございますので、その旨ご了承下さい。
freoをひらがな3文字で入力してください(スパム対策)