14

私はJSFPrimefaces3.1をまったく使用していません。「複雑な」テーブルを作成しようとしましたが、dataTableを使用して適切なソリューションを見つけることができません（並べ替えコンポーネントが必要です）。

次のような基本的なPOJOを使用して、次のHTML表現に相当するテーブルを作成したいと思います。

String field1
String field2
List<String> fields3 // 3 items
String field4

<table border="1">
<tr>
    <td rowspan="3">col1</td>
    <td rowspan="3">col2</td>
    <td>col3.1</td>
    <td rowspan="3">col4</td>
</tr>
<tr>
    <td>col3.2</td>
</tr>
<tr>
    <td>col3.3</td>
</tr>       
</table>

情報が少なすぎるかもしれないので、必要な場合は教えてください:)私の質問が明確であることを願っています。

ありがとうございました

4

4 に答える 4

3

カスタムグリッドの堅実で柔軟なソリューションは、Primefaces <p：panelGrid>と一緒に<c：forEach>を使用することです。

<html ... xmlns:c="http://java.sun.com/jsp/jstl/core"
          xmlns:p="http://primefaces.org/ui">
    <p:panelGrid>
        <p:row>
            <p:column styleClass="ui-state-default" colspan="2"><!-- header -->
                <h:outputText value="Some Header"/>
            </p:column>
            ...
        </p:row>
        <p:row><!-- other header row -->
            ...
        </p:row>
        <c:forEach items="#{list}" var="element">
            <p:row>
                <p:column styleClass="ui-state-default" rowspan="#{list.sublist.someSizeExpression}"><!-- left rowspan -->
                    <h:outputText value="#{element.name}"/>
                </p:column>
                <c:forEach items="#{element.sublist}" var="subelement">
                    <p:column>
                        <h:selectBooleanCheckbox/>
                    </p:column>
                </c:forEach>
            </p:row>
        </c:forEach>
    </p:panelGrid>
</html>

見栄えがよく、コマンドボタンとAJAXはヘッドとセルの両方で機能します。

于 2012-12-25T15:25:08.113 に答える
1

primefacesあなたがあなたのタグで言及したので。p：panelGridを使用することをお勧めします

<p:panelGrid>  

    <p:row>  
        <p:column rowspan="3"/>  
        <p:column rowspan="3"/>  
        <p:column rowspan="1"/>  
        <p:column rowspan="3"/>  
    </p:row>  

    <p:row>  
        <p:column/>
    </p:row>  

    <p:row>  
        <p:column/>  
    </p:row>  

</p:panelGrid>
于 2012-10-30T13:00:27.960 に答える
1

同じ問題がありました。primefaces（またはrichfaces）は、ヘッダーとフッターに対してのみ行スパンを提供します。

次に、icefacesace:datatableコンポーネントを使用しようとしましたが、「行スパン可能」にしたい列に1つの属性のみを追加して実行しますace:column:: groupBy="#{bean.field}"。

通常どおり行のリストを指定すると、このコンポーネントは、生成されたhtmlテーブルにすべての行スパンを自動的に生成します（等しい値の近傍を自動検出することによって）。

これは、primefacesコンポーネントと一緒に実行されます。現時点では、icefacesデータテーブルセルにprimefaces outputlabelがあり、このicefacesデータテーブルはprimefacesパネル内にあります。

于 2012-11-22T16:25:38.443 に答える
0

RichFacesのdataTableを見てみましょう。複雑なレイアウトでは、PrimeFacesテーブルよりも柔軟性があることがわかりました。

使用できます

 <rich:collapsibleSubTable
     value="#{bean.getData()}"
     var="line"
     id="subTable"
     rowKeyVar="rowKey"
     width="100%">
<rich:column width="40" rendered="#{rowKey eq 0}" rowspan="#{line.firstColRowSpan}">
    #{line.country}
    </rich:column>
    <rich:column rendered="#{line.index eq 0}" rowspan="#{line.secondColRowSpan}">
       #{line.state}
    </rich:column>
    <rich:column>
    #{line.city}
    </rich:column>
</rich:subtable>

したがって、ラインデータが次のようになっている場合：

US CA San Francisco 0 (index) 6 (firstColRowSpan) 3 (secondColRowSpan)
US CA LA 1 6 3
US CA Jose 2 6 3
US TX Huston 0 6 2
US TX Dallas 1 6 2
US AZ Phoenix 0 6 1
UK Surrey Guildford 0 1 1

表には次のように表示されます

US  CA     San Francisco
           LA
           Jose
    TX     Huston
           Dallas
    AZ     Phoenix 
UK  Surrey Guildford

行スパン列の1つにボタン/リンクなどがある場合は、そこにもrendered = "＃{rowKeyeq0}"を追加することが重要です。

于 2015-06-04T15:41:46.290 に答える