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

【问题标题】：Button background color/text change inside datatable in PrimeFacesPrimeFaces中数据表内的按钮背景颜色/文本更改
【发布时间】：2013-09-20 05:25:16
【问题描述】：

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

我的数据表看起来像：

<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）点击另一个按钮将在下面工作--

如果有绿色的按钮，先把它变成蓝色
然后将点击按钮的颜色更改为绿色。

【问题讨论】：

请定义“选择”和“取消选择”。这在这个问题中是模棱两可的，因为您使用的是 <p:dataTable selection> 而没有 <p:column selectionMode> 这令人困惑。你在用<p:column selectionMode>吗？或者你的意思是按钮本身应该作为一个开关？请明确说明 UI 要求。
@BalusC：很抱歉这个问题。现在更新了要求

标签： jquery css jsf primefaces datatable

【解决方案1】：

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

替换

background-color: green;

通过

background: green;

我认为它应该可以工作。

【讨论】：

【解决方案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'});
    }
 });
});

【讨论】：

var row = $('div.myForm> interfaces>tbody>tr');这就是我所做的，但它不起作用。知道为什么吗？
@ Sudipta Deb ：您只需将属性styleClass="interfaces" 和selectionMode="" 添加到<p:dataTable>。然后试试这个var row = $('div.interfaces>table>tbody>tr')。您必须捕获动态创建的每一行表。这种方式对我有用。

【解决方案3】：

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

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

【讨论】：