使用命令组件进行单选时高亮显示行

Question

基于素数面文档：

带有命令组件的单选此方法使用命令组件实现，例如commandLink或commandButton。如果您正在使用EL 2.2或使用CCD_ 1。

<p:dataTable var="car" value="#{carBean.cars}">
    <p:column>
        <p:commandButton value="Select">
            <f:setPropertyActionListener value="#{car}"
            target="#{carBean.selectedCar}" />
        </p:commandButton>
    </p:column>
    ...columns
</p:dataTable>

当我按下按钮而不直接选择行时，我需要突出显示该行

这是我的代码：

<p:dataTable
    rowKey="${xxx.y1}-${xxx.y2}"
    selection="${managedBean.selectedRow}"
    selectionMode="single"
    value="#{managedBean.listOfBeans}" var="xxx">
    <p:column>
        <p:commandButton action="${managedBean.saveSomethingInDB}"
            update="vvvComponent">
            <f:setPropertyActionListener value="#{currentRow}"
                target="#{managedBean.selectedRow}" />
        </p:commandButton>
    </p:column>
</p:dataTable>

Answer 1

我用这种方式解决了它：

<p:dataTable
    rowKey="${xxx.y1}-${xxx.y2}"
    selection="${managedBean.selectedRow}"
    selectionMode="single"
    value="#{managedBean.listOfBeans}" var="xxx">
    <p:column>
        <p:commandButton action="${managedBean.saveSomethingInDB}" onclick="highlightRow(jQuery(this));"
            update="vvvComponent">
            <f:setPropertyActionListener value="#{currentRow}"
                target="#{managedBean.selectedRow}" />
        </p:commandButton>
    </p:column>
</p:dataTable>
function highlightRow(commandButton) {
    $('.ui-state-highlight').removeClass('ui-state-highlight');
    commandButton.closest('table').closest('tr').addClass('ui-state-highlight');
}

Answer 2

您的代码适用于我。

多亏了propertyActionListener，当我按下按钮时，该行就会突出显示

<f:setPropertyActionListener value="#{currentRow}"
            target="#{managedBean.selectedRow}" />

Answer 3

我知道已经太晚了，但这对有效

 <p:commandButton action="${managedBean.saveSomethingInDB}" onclick="$('.ui-state-highlight').removeClass('ui-state-highlight');PF('tableWidgetVar').selectRow($(this).parents('tr:first').addClass('ui-state-highlight'));" >
                <f:setPropertyActionListener value="#{currentRow}"
                    target="#{managedBean.selectedRow}" />
            </p:commandButton>

这样你就不需要在数据表上选择或选择模式