0

liveScrollをtrueに設定して、一連の画像を追加するために使用しているdataTableがあります。これにより、htmlでテーブルが作成され、各行のクラスは「ui-datatable-odd」または「ui-datatable-even」になります。CSSを使用して、行ごとに2つの画像を含むグリッドギャラリーとしてテーブルを表示しようとしています。以下は私の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 に答える