Rich Datatable单击时突出显示选定的行复选框

时间:2019-09-17 12:20:59

标签: javascript jquery jsf richfaces

我有数据表,我想突出显示jsf中的“使用丰富的面孔框架”时选中的行(复选框0)

我的jquery脚本应该如何?

<rich:dataTable id="modelList" value="#{bean.modelList}" var="model" rows="#{bean.dataTableRowCountEachPage}"  rowClasses="odd-row,even-row">
            <rich:column width="20px">
                <f:facet name="header">
                    <h:outputText value="Select" />
                </f:facet>
                <h:selectBooleanCheckbox  class="checkboxClass" value="#{model.selected}">
                    <f:ajax event="click" listener="#{bean.getSelectedItems}" render=":tableForm:res" />
                </h:selectBooleanCheckbox>
            </rich:column>

            <rich:column sortBy="#{model.applicationName}" filterValue="#{model.applicationName}" filterExpression="#{fn:containsIgnoreCase(model.applicationName,bean.applicationNameFilter)}">
                <f:facet name="header">
                    <h:panelGroup>
                        <h:outputText value="Application Name" />

                        <h:inputText value="#{bean.applicationNameFilter}">
                            <a4j:ajax event="blur" render="modelList" execute="@this" />
                        </h:inputText>
                    </h:panelGroup>
                </f:facet>
                <h:outputText value="#{model.applicationName}" />
            </rich:column>  

    </h:form>

我正在使用此CSS查询

<script>
        $(document).ready(function(){
                          $("checkboxButton").click(function(){
                                            $("tr").toggleClass("selected");
                                            });
                          });
        </script>



<style>
.selected
{

.rf-dt-c:select-checkbox{
                background-color: #f7dbdb;
        }

}
</style>

此查询工作错误的方式突出显示所有行

1 个答案:

答案 0 :(得分:0)

我现在处理。我用了这个脚本

<script>
$('.checkboxClass').each(function (index, item) {
        if ($(item).is(':checked')==true) {

        var row = $('.rf-dt-r')[index];

        $(row).css('background-color', '#f7dbdb');
    }
    });

</script>
相关问题