2

我在使用 Grails UI 插件 1.0.2（YUI 为 2.6.1）的 Grails 1.1 项目中使用 YUI DataTable。

默认情况下，DataTable 显示 2 个分页器：一个在表格上方，另一个在表格下方。查看 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 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 回答
0

我有几十个 YUI 数据表，不想为每个数据表编写一个选择器，所以这就是我所做的。在每个数据表周围创建一个“容器”div，然后使用第一个子选择器将可见性设置为隐藏，如下所示：

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

注意 .container_div 可以任意命名。

感谢 Rollo 和 jm 的灵感，这是两种想法的混搭。

于 2010-03-17T01:56:49.883 回答