Question

我有一个数据和内部，我有命令按钮作为列。我想在select和deselect上更改commandbutton的颜色。例如，未选择/取消选择时为RED，选择时为绿色。

我的数据表看起来像：

<p:dataTable id="interfaces"
    value="#{studentBean.studentDataModel}"
    var="studentDetails" emptyMessage="No Student found."
    selection="#{studentBean.selectedStudents}" >

    <p:column headerText="Select this Student" style="width:1%">
        <p:commandButton value="Select"
            action="#{studentBean.saveThisStudent}"
            styleClass="non-selected-button-background-color">
        </p:commandButton>
    </p:column>

</p:dataTable>

以下是我在default.css中的内容

.non-selected-button-background-color {
    background-color: blue
}

.selected-button-background-color {
    background-color: green
}

现在我该如何实现这项功能？

更新了功能：
1）所有命令按钮最初都是蓝色
2）点击一个按钮后，它的颜色应变为绿色 3）再次点击同一按钮，颜色应变为蓝色
4）点击另一个按钮将在下面 -

如果有任何绿色按钮，请先将其设为蓝色
然后将单击按钮的颜色更改为绿色。

Answer 1

我认为问题来自你的风格。您只能替换背景颜色，但某些主要样式使用图像作为dataTable中的背景。

替换

background-color: green;

通过

background: green;

我认为它应该有用。

Answer 2

试试这个：

在<p:dataTable>代码中添加以下两行。

<p:ajax event="rowSelect" oncomplete="abcd()" />
<p:ajax event="rowUnselect" oncomplete="abcd()" />

以这种方式定义js函数。在这里，我改变了孔行的css。您可以更改相应行的特定列。

var abcd = function() {
var row= $('div.interfaces>table>tbody>tr');
$(row).each(function(){
    if($(this).hasClass("ui-state-highlight")){
        $(this).find('button.non-selected-button-background-color').css({'font-style':'italic'});
    }
    else {
    $(this).find('button.non-selected-button-background-color').css({'font-style':'normal'});
    }
 });
});

Answer 3

您使用默认或特殊的primafaces主题。首先，您需要设置
background-image css属性无。因为这个主题使用组件的背景图像。这是简单有用的primefaces按钮css继承类。

.styleFilterCommandButton-BackgroundColor,
.ui-widget-content .styleFilterCommandButton-BackgroundColor,
.ui-widget-header .styleFilterCommandButton-BackgroundColor*
{
    background-image:none;
    background-color: #ee4400;  
}

在PrimeFaces中数据表内的按钮背景颜色/文本更改

3 个答案: