2

Grails UI プラグイン 1.0.2 (YUI は 2.6.1) を使用して、Grails 1.1 プロジェクトで YUI DataTable を使用しています。

デフォルトでは、DataTable には 2 つのページネーターが表示されます。1 つはテーブルの上に、もう 1 つはテーブルの下にあります。YUI API ドキュメントを調べると、YUI コンテナーの配列を構成パラメーターとして渡すことができることがわかりましたが、これらのコンテナーの名前は何ですか?

Firebug を使用してページの HTML を調べてみました。ページネーターを含む div の ID は、yui-dt0-paginator0 (上) および yui-dt0-paginator1 (下) です。それらを使用してナビゲーターのコンテナーを構成すると、ナビゲーターはまったく表示されません。Datatable 要素を含む GSP ページの関連する抜粋を次に示します。

    <div class="body">
        <h1>This is the List of Control Accounts</h1>
        <g:if test="${flash.message}">
        <div class="message">${flash.message}</div>
        </g:if>
        <div class="yui-skin-sam">
            <gui:dataTable
            controller="controlAccount" action="enhancedListDataTableJSON"
            columnDefs="[
                [key:'id', label:'ID'],
                [key:'col1', label:'Col 1', sortable: true, resizeable: true],
                [key:'col2', label:'Col 2', sortable: true, resizeable: true]
                ]"
            sortedBy="col1"
            rowsPerPage="20"
            paginatorConfig="[
            template:'{PreviousPageLink} {PageLinks} {NextPageLink} {CurrentPageReport}',
            pageReportTemplate:'{totalRecords} total accounts',
            alwaysVisible:true,
            containers:'yui-dt0-paginator1'
            ]"
            rowExpansion="true"
            />
        </div>
    </div>

何か助けはありますか？

ありがとう！

ロロ

4

3 に答える 3

4

わかりました、私は今それを持っています。誰かが同じ質問に出くわした場合に備えて、ここに投稿してください。

だからあなたがしなければならないことは、どんなIDでも「コンテナ」（DIVが行う）を作成し、それをコンテナ構成アイテムに参照することです。例：

<div class="body">
    <h1>This is the List of Control Accounts</h1>
    <g:if test="${flash.message}">
    <div class="message">${flash.message}</div>
    </g:if>
            <div class="yui-skin-sam">
                    <gui:dataTable
                    controller="controlAccount" action="enhancedListDataTableJSON"
                    columnDefs="[
                            [key:'id', label:'ID'],
                            [key:'col1', label:'Col 1', sortable: true, resizeable: true],
                            [key:'col2', label:'Col 2', sortable: true, resizeable: true]
                            ]"
                    sortedBy="col1"
                    rowsPerPage="20"
                    paginatorConfig="[
                    template:'{PreviousPageLink} {PageLinks} {NextPageLink} {CurrentPageReport}',
                    pageReportTemplate:'{totalRecords} total accounts',
                    alwaysVisible:true,
                    containers:'dt-paginator'
                    ]"
                    rowExpansion="true"
                    />
            </div>
            <div id="dt-paginator" class="yui-skin-sam yui-pg-container" style="text-align: right;">
</div>

div に関連付けられているクラスが yui-pg-container であることを確認するだけです。追加のボーナスとして、その div のスタイルは、ページネーターを右に揃えます。

ロロ

于 2009-03-27T12:19:07.837 に答える
0

私は何十ものYUIデータテーブルを持っていますが、それぞれにセレクターを書く必要がなかったので、ここで私がしたことです。各データテーブルの周りに「コンテナー」div を作成し、最初の子セレクターを使用して、次のように可視性を非表示に設定します。

.container_div .yui-dt-paginator:first-child {
    visibility:hidden;
}

注 .container_div は、好きなように呼び出すことができます。

インスピレーションを与えてくれた Rollo と jm のおかげで、これは両方のアイデアのマッシュアップのようなものです。

于 2010-03-17T01:56:49.883 に答える
0

YUI 2.8.0 では (おそらく 2.6 でも)、もっと簡単な方法があります。スタイルを追加するだけです：

.yui-skin-sam .yui-dt-paginator {
    text-align:right;
} 

#yui-dt0-paginator1 {
    display:none;
}

これには、ページネーターがテーブルの右端に揃えられるという利点があります。表の一番下にページネーションを配置したい場合は、yui-dt0-paginator1をyui-dt0- paginator0 に変更するだけです。

于 2010-01-05T22:46:17.680 に答える