1

我有一个数据表，里面有命令按钮作为列。我想在选择和取消选择时更改命令按钮的颜色。例如，未选择/取消选择时为红色，选择时为绿色。

我的数据表看起来像：

<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）单击另一个按钮将起作用以下 -

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

3 回答 3

1

我认为问题出在你的风格上。您只替换背景颜色，但某些 primefaces 样式使用图像作为 dataTable 中的背景。

代替 

background-color: green;

经过

background: green;

我认为它应该工作。

于 2013-09-16T12:11:17.890 回答
0

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

.styleFilterCommandButton-BackgroundColor,
.ui-widget-content .styleFilterCommandButton-BackgroundColor,
.ui-widget-header .styleFilterCommandButton-BackgroundColor*
{
    background-image:none;
    background-color: #ee4400;  
}
于 2014-04-11T11:26:37.240 回答
0

尝试这个：

将以下两行放入<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'});
    }
 });
});
于 2013-09-17T04:28:53.610 回答