0

我有一个用于添加一堆图像的数据表，其中 liveScroll 设置为 true。这将在 html 中创建一个表，并且每一行都有其类“ui-datatable-odd”或“ui-datatable-even”。我正在尝试使用 CSS 将表格显示为网格画廊，每行有两个图像。下面是我的 primeFaces 代码：

<h:form>
<p:dataTable id="campaignDataGrid" var="campaignImage" value="#{allCampaignImages}"
    scrollRows="9" scrollHeight="500" scrollable="true" liveScroll="true">

    <!-- <p:column>
        Description: <h:outputText value="#{campaignImage.description}" /><br />
        Location: <h:outputText value="#{campaignImage.location}" />
    </p:column> -->

    <p:column>
        <div class="cell">
            <p:graphicImage value="#{campaignImage.url}" />
        </div>
    </p:column>

</p:dataTable>

我只是将它用于CSS：

.ui-datatable-odd {
    position: relative;
    display: block;
    left: 360px;
    bottom: 316px;
}

这是生成的 HTML 代码：

<div id="j_idt40:campaignDataGrid" class="ui-datatable ui-widget ui-datatable-scrollable"><div class="ui-widget-header ui-datatable-scrollable-header"><div class="ui-datatable-scrollable-header-box"><table role="grid"><thead><tr role="row"><th id="j_idt40:campaignDataGrid:j_idt42" class="ui-state-default" role="columnheader"><div class="ui-dt-c"><span></span></div></th></tr></thead></table></div></div><div class="ui-datatable-scrollable-body" style="height:500px;"><table role="grid"><tbody id="j_idt40:campaignDataGrid_data" class="ui-datatable-data ui-widget-content"><tr data-ri="0" class="ui-widget-content ui-datatable-even" role="row"><td role="gridcell"><div class="ui-dt-c">
                    <div class="cell"><img id="j_idt40:campaignDataGrid:0:j_idt44" src="http://localhost:8080/creatial/proxy/image/content/188" alt="" />
                    </div></div></td></tr><tr data-ri="1" class="ui-widget-content ui-datatable-odd" role="row"><td role="gridcell"><div class="ui-dt-c">
                    <div class="cell"><img id="j_idt40:campaignDataGrid:1:j_idt44" src="http://localhost:8080/creatial/proxy/image/content/182" alt="" />
                    </div></div></td></tr><tr data-ri="2" class="ui-widget-content ui-datatable-even" role="row"><td role="gridcell"><div class="ui-dt-c">
                    <div class="cell"><img id="j_idt40:campaignDataGrid:2:j_idt44" src="http://localhost:8080/creatial/proxy/image/content/178" alt="" />
                    </div></div></td></tr><tr data-ri="3" class="ui-widget-content ui-datatable-odd" role="row"><td role="gridcell"><div class="ui-dt-c">
                    <div class="cell"><img id="j_idt40:campaignDataGrid:3:j_idt44" src="http://localhost:8080/creatial/proxy/image/content/173" alt="" />
                    </div></div></td></tr><tr data-ri="4" class="ui-widget-content ui-datatable-even" role="row"><td role="gridcell"><div class="ui-dt-c">
                    <div class="cell"><img id="j_idt40:campaignDataGrid:4:j_idt44" src="http://localhost:8080/creatial/proxy/image/content/168" alt="" />
                    </div></div></td></tr><tr data-ri="5" class="ui-widget-content ui-datatable-odd" role="row"><td role="gridcell"><div class="ui-dt-c">
                    <div class="cell"><img id="j_idt40:campaignDataGrid:5:j_idt44" src="http://localhost:8080/creatial/proxy/image/content/163" alt="" />
                    </div></div></td></tr><tr data-ri="6" class="ui-widget-content ui-datatable-even" role="row"><td role="gridcell"><div class="ui-dt-c">
                    <div class="cell"><img id="j_idt40:campaignDataGrid:6:j_idt44" src="http://localhost:8080/creatial/proxy/image/content/158" alt="" />
                    </div></div></td></tr><tr data-ri="7" class="ui-widget-content ui-datatable-odd" role="row"><td role="gridcell"><div class="ui-dt-c">
                    <div class="cell"><img id="j_idt40:campaignDataGrid:7:j_idt44" src="http://localhost:8080/creatial/proxy/image/content/153" alt="" />
                    </div></div></td></tr><tr data-ri="8" class="ui-widget-content ui-datatable-even" role="row"><td role="gridcell"><div class="ui-dt-c">
                    <div class="cell"><img id="j_idt40:campaignDataGrid:8:j_idt44" src="http://localhost:8080/creatial/proxy/image/content/148" alt="" />
                    </div></div></td></tr></tbody></table></div><div class="ui-widget-header ui-datatable-scrollable-footer"><div class="ui-datatable-scrollable-header-box"><table role="grid"><tfoot></tfoot></table></div></div><input type="hidden" id="j_idt40:campaignDataGrid_scrollState" name="j_idt40:campaignDataGrid_scrollState" autocomplete="off" value="0,0" /></div><script id="j_idt40:campaignDataGrid_s" type="text/javascript">PrimeFaces.cw('DataTable','widget_j_idt40_campaignDataGrid',{id:'j_idt40:campaignDataGrid',scrollable:true,liveScroll:true,scrollStep:9,scrollLimit:38});</script><input type="hidden" name="javax.faces.ViewState" id="javax.faces.ViewState" value="6974751656016471616:-1737664871390977073" autocomplete="off" />

这就是它的样子： 在此处输入图像描述

因此，如您所见，问题在于当我定位奇数行时，即使其内容已被移动，这些行仍然存在。有人可以帮忙吗？

4

1 回答 1

0

我玩弄了你的 HTML / CSS 并想出了这个：http: //jsfiddle.net/dPKBR/

我浮动了奇数和偶数 TR 并做了一个明确的：都在偶数 TR 上：

.ui-datatable-odd {
    width:100px;
    background:orange;
    float:left;
    position: relative;
    display: block;

}

.ui-datatable-even{
    clear:both;
    width:100px;
    background:lime;
    float:left;
    position: relative;
    display: block;
}

它应该让你更接近解决你的问题。

于 2013-03-26T13:56:56.020 回答