前回の続きです。
今回は、scaffoldのindex.gspを編集していきます！
<!DOCTYPE html>
<html>
<head>
<meta name="layout" content="bootstrap" />
<g:set var="entityName" value="\${message(code: '${propertyName}.label', default: '${className}')}" />
<title><g:message code="default.list.label" args="[entityName]" /></title>
</head>
<body>
<div id="list-${propertyName}" class="content scaffold-list" role="main">
<div class="page-header">
<h1><g:message code="default.list.label" args="[entityName]" /></h1>
</div>
<g:link class="btn btn-primary" action="create"><g:message code="default.new.label" args="[entityName]" /></g:link>
<g:if test="\${flash.message}">
<div class="alert alert-info" role="alert">\${flash.message}</div>
</g:if>
<f:table collection="\${${propertyName}List}" />
<div class="pagination">
<g:paginate total="\${${propertyName}Count ?: 0}" />
</div>
</div>
</body>
</html>
とりあえず書き換えたのは、上記のハイライト部分です。
前回伝えた通り、meta name=”layout”のcontentをbootstrapに変更しています。また、class名をBootstrap3のものに変えたり、page-headerで囲んだりしています。
f:tableってなんぞ？
これですが、Grailsのfieldsプラグインによって作られているTagLibです。いきなり登場するので、正直わけがわかりませんでした。
参考ページ
qiita: Groovyのちょっとしたこと「GrailsのScaffoldingページのGSPに出てくる謎の<f:table />タグ」
このqiitaの記事のコメントによると、fieldsプラグインによって作られるテーブルのテンプレートも定義すれば書き換えられるようです。うーむ、罠だ。Grailsはちゃんとドキュメント作っておいてほしいですねぇ…。
f:tableで参照されるテンプレートを作る
grails-app/views/templates/_fields/_table.gspを定義して、作り直せばいいそうです。
作り直すというと大仰ですが、Bootstrap3のclassをテーブルに反映させたいので、githubからの参照コードを丸々書いて、クラス名だけ反映させておきました。
<table class="table table-striped">
<thead>
<tr>
<g:each in="${domainProperties}" var="p" status="i">
<g:set var="propTitle">${domainClass.propertyName}.${p.name}.label</g:set>
<g:sortableColumn property="${p.name}" title="${message(code: propTitle, default: p.naturalName)}" />
</g:each>
</tr>
</thead>
<tbody>
<g:each in="${collection}" var="bean" status="i">
<tr>
<g:each in="${domainProperties}" var="p" status="j">
<g:if test="${j==0}">
<td><g:link method="GET" resource="${bean}"><f:display bean="${bean}" property="${p.name}" displayStyle="${displayStyle?:'table'}" /></g:link></td>
</g:if>
<g:else>
<td><f:display bean="${bean}" property="${p.name}" displayStyle="${displayStyle?:'table'}" /></td>
</g:else>
</g:each>
</tr>
</g:each>
</tbody>
</table>
table-stripedをあてたら、自動的に奇数行・偶数行で背景色が変わるので、tr部分でクラスをつける処理は削除しています。
ページネーションはどうするの？
ページネーションはg:paginateっていうTagLibがあるのですが、これ、固定のhtmlになっているようで、Bootstrap3のページネーションを気軽に当てる方法がありません。css側をいじってGrailsのページネーションに合わせるか、新しいTagLibを作ってBootstrap3のページネーションに合わせるか、しかないと思いますが、私的には後者にしたいなぁというところですね。といってもTagLibとかまだ作ったこともないのですが…（しかも車輪の再発明感が半端ない）。
Grailsはここ直したほうがいいんじゃないですかねぇ…。デフォルトはこのままでもいいから…。
Bootstrap3化には大きな支障が出ますが、とりあえずはページネーションは今回は放っておきます。他のscaffoldを先に直すことを優先していきます！
今回のまとめ
- src/main/templates/scaffolding/index.gspを修正しよう。
- fieldsプラグインが突然登場するので注意しよう。
- g:paginateはイケてない…。今回は放っておく。
次回の予定
次は新規作成画面を修正していきたいと思います。
