0

鉴于下面的代码（取自PrimeFaces ShowCase），更改功能以使第二列中的文本<h:outputText value="#{car.id}" />- 充当扩展/收缩行（而不是<p:rowToggler>图像）的链接的最佳方法是什么？

不确定这有多容易/应该有多容易，但我对 PrimeFaces 很陌生，不确定如何做到这一点。我查看了文档和PrimeFaces ShowCase)，（并使用类似的代码玩了几个小时），但我一直无法完成。

展示代码：

<h:form>
    <p:dataTable var="car" value="#{dtBasicView.cars}">
        <f:facet name="header">
            Expand rows to see detailed information
        </f:facet>
        <p:column style="width:16px">
            <p:rowToggler />
        </p:column>
        <p:column headerText="Id">
            <h:outputText value="#{car.id}" />  <!-- This text needs to be a link that expands the row -->
        </p:column>
        <p:column headerText="Year">
            <h:outputText value="#{car.year}" />
        </p:column>

        <p:rowExpansion>
            <p:panelGrid  columns="2" columnClasses="label,value" style="width:300px">
                <f:facet name="header">
                    <p:graphicImage name="demo/images/car/#{car.brand}-big.gif"/> 
                </f:facet>

                <h:outputText value="Id:" />
                <h:outputText value="#{car.id}" />

                <h:outputText value="Year" />
                <h:outputText value="#{car.year}" />

                <h:outputText value="Color:" />
                <h:outputText value="#{car.color}" style="color:#{car.color}"/>

                <h:outputText value="Price" />
                <h:outputText value="$#{car.price}" />
            </p:panelGrid>
        </p:rowExpansion>
    </p:dataTable>
</h:form>

编辑- 找到了一个简单的解决方案，但不确定它是最优雅的。有什么理由不使用它？

<p:column style="display:none !important">
    <p:rowToggler />
</p:column>
<p:column>
    <h:outputLink value="#">#{car.id}</h:outputLink>
</p:column>`
4

2 回答 2

1

默认的 PrimeFaces 配置不允许除 a 之外的任何东西<p:rowToggler />来切换 a <p:rowExpansion>。

一种解决方案是使用一些自定义 JS 函数在生成的 HTML 元素上添加/删除 CSS 类。

其他解决方案可以在这里找到：http: //forum.primefaces.org/viewtopic.php?f= 3&t=11308&p=55114#p55114 。这是关于修改 PrimeFaces 源以满足您的需求。

于 2014-10-24T09:58:38.850 回答
1

有一种简单的方法可以做到这一点。在 div 中创建一个链接并使用“ui-row-toggler”修改 div 的类，您可以从 rowToggler html 源代码中获取该链接。例如

<div class="ui-row-toggler"><a href="##" class="ui-row-toggler">Test</a></div>

您可以这样做的原因是，如果您检查 primefaces 行切换器的 html 源代码，您会发现它是

<div class="ui-row-toggler ui-icon ui-icon-circle-triangle-e"></div>

所以你唯一需要做的就是把同一个类放到你自定义的 div 里面，里面有一个链接。

于 2015-02-03T16:38:23.727 回答