2012-07-05 124 views
0

我想突出显示使用Ricfaces呈现的表格的当前选定行,但它不起作用。这里是我的代码:Richfaces Javascript not firing

的facelet:

<ui:composition xmlns="http://www.w3.org/1999/xhtml" 
xmlns:c="http://java.sun.com/jsp/jstl/core" 
xmlns:h="http://java.sun.com/jsf/html" 
xmlns:f="http://java.sun.com/jsf/core" 
xmlns:ui="http://java.sun.com/jsf/facelets" 
xmlns:a4j="http://richfaces.org/a4j" 
xmlns:rich="http://richfaces.org/rich" template="templates/main.xhtml"> 

<ui:define name="body"> 
    <h:form> 
     <fieldset> 
      <legend> 
       <h:outputText value="#{msg['result.legend']}" /> 
      </legend> 

      <rich:dataTable id="resultTable" onRowMouseOver="this.style.backgroundColor='#f1f1f1'" 
       onRowMouseOut="this.style.backgroundColor=''" 
       value="#{searchController.result}" var="row"> 
       <c:forEach items="${searchController.headers}" var="headr" 
        varStatus="status"> 
        <rich:column> 
         <f:facet name="header"> 
          <h:outputText value="#{headr}" /> 
         </f:facet> 
         <h:outputText value="#{row[status.count-1]}" /> 
        </rich:column> 
       </c:forEach> 
      </rich:dataTable> 

     </fieldset> 
    </h:form> 
</ui:define> 

我无法粘贴整个模板(main.xhtml)的源代码。这是H的内容:body标签(刚发现为什么:-)):

<rich:panel styleClass="mainPanel"> 
    <ui:include src="../common/header.xhtml"></ui:include> 
    <ui:insert name="body"></ui:insert> 
</rich:panel> 

POM依赖关系:

<dependencyManagement> 
    <dependencies> 
     <dependency> 
      <groupId>org.richfaces</groupId> 
      <artifactId>richfaces-bom</artifactId> 
      <version>4.2.2.Final</version> 
      <scope>import</scope> 
      <type>pom</type> 
     </dependency> 
    </dependencies> 
</dependencyManagement> 

<dependencies> 

    <dependency> 
     <groupId>junit</groupId> 
     <artifactId>junit</artifactId> 
     <version>4.9</version> 
     <scope>test</scope> 
    </dependency> 

    <dependency> 
     <groupId>org.hamcrest</groupId> 
     <artifactId>hamcrest-all</artifactId> 
     <version>1.1</version> 
    </dependency> 

    <dependency> 
     <groupId>log4j</groupId> 
     <artifactId>log4j</artifactId> 
     <version>1.2.17</version> 
    </dependency> 

    <dependency> 
     <groupId>org.richfaces.ui</groupId> 
     <artifactId>richfaces-components-ui</artifactId> 
    </dependency> 
    <dependency> 
     <groupId>org.richfaces.core</groupId> 
     <artifactId>richfaces-core-impl</artifactId> 
    </dependency> 
    <!--dependency> <groupId>javax.faces</groupId> <artifactId>javax.faces-api</artifactId> 
     </dependency --> 
    <dependency> 
     <groupId>com.sun.faces</groupId> 
     <artifactId>jsf-api</artifactId> 
    </dependency> 
    <dependency> 
     <groupId>com.sun.faces</groupId> 
     <artifactId>jsf-impl</artifactId> 
    </dependency> 
    <dependency> 
     <groupId>com.sun.facelets</groupId> 
     <artifactId>jsf-facelets</artifactId> 
     <version>1.1.14</version> 
    </dependency> 
    <dependency> 
     <groupId>jstl</groupId> 
     <artifactId>jstl</artifactId> 
     <version>1.2</version> 
    </dependency> 
</dependencies> 

凡searchController.headers是一个List <字符串>和searchController.result是列表<列表<字符串>>。表本身已正确显示。

我在这里错过了什么?

我正在使用Richfaces 4.2.2.Final,在Eclipse Indigo上开发。

+0

可能的重复http://stackoverflow.com/q/10129551/1065197 – 2012-07-05 14:23:12

+0

我想按照该线程中的建议来实现onRowMouseOver。我将我的尝试基于我在这里找到的示例:http://livedemo.exadel.com/richfaces-demo/richfaces/dataTable.jsf,但我所做的不起作用。我不相信这是重复的。 – JazzHands 2012-07-05 14:32:35

+0

您的概念错误。onRowMouseOver和onRowMouseOut正在使用'this',因此您正在更改'rich:dataTable'背景颜色。查看我发布的链接,因为要实现您所需要的内容,应该在此[突出显示点击行]中使用JavaScript,如BalusC显示(http://balusc.blogspot.com/2006/06/using-datatables.html #HighlightRowsOnClick)示例或jQuery作为我提供的重复链接。 – 2012-07-05 14:38:22

回答

0

事实上,这个问题并不重复,因为richfaces处理这个问题有点不同于普通的jsf。

function mouseOutRichRow(row) { 
    if (row.highlight != true) { 
     row.style.backgroundColor=row.oldColor; 
    } 
} 
function mouseOverRichRow(row) { 
    if (row.highlight != true) { 
     row.oldColor=row.style.backgroundColor; 
     row.style.backgroundColor='#FFFF8A'; 
    } 
} 

它们绑定到onRowMouse事件:

我在该任务的应用程序创建了两个JS功能

<rich:dataTable 
    onRowMouseOver="mouseOverRichRow(this);" 
    onRowMouseOut="mouseOutRichRow(this);" 
    ....> 

事实上,Luiggi门多萨的评论是错误的 - RichFaces的应用这些参数到每一行,所以this有正确的范围。

编辑: 如果这仍然不起作用,尽量不要使用c:forEach。这是旧的jsp方式,并不适用于jsf生命周期。改为使用ui:repeata4j:repeat

+0

@JazzHands发布的链接指向RF 3.3这里是与RF 4.x的链接[DataTable Style](http://showcase.richfaces.org/richfaces/component-sample.jsf?demo=dataTable&sample=tableStyling&skin=blueSky ),他们使用jQuery脚本来添加事件。另外,我试过你的例子,并且不能使用RF 4.2和GlassFish 3。 – 2012-07-05 15:11:27

+0

对不起,你是对的。我的(和JazzHand的)例子是RF 3.3。我读过他提到RF 4的消息。 – Roben 2012-07-05 15:16:16

+0

@Roben - 我使用c:forEach,作为富人:列没有在v4.2中实现 – JazzHands 2012-07-05 15:20:07