堆栈内存溢出
  简体   繁体   English

JSF数据表的突出显示行

[英]Highlight row of JSF datatable

 原文  2012-04-12 18:27:21  0   2    java/ javascript/ jquery/ jsf/ jsf-2

问题描述

I want to highlight row into JSF table when the mouse pointer is on the row. 当鼠标指针位于行上时，我想在JSF表中突出显示该行。 I found this tutorial . 我找到了本教程 。

I tried to implement the example here: 我尝试在此处实现示例： 

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"    
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets">
    <h:head>
        <ui:insert name="header">           
            <ui:include src="header.xhtml"/>         
        </ui:insert>
        <script type="text/javascript" src="resources/js/jquery-1.7.2.min.js"></script>
    </h:head>
    <h:body>

        <script type="text/javascript">

            $("tr").not(':first').hover(
              function () {
                $(this).css("background","yellow");
              }, 
              function () {
                $(this).css("background","");
              }
            );

        </script>

        <h1><img src="resources/css/images/icon.png" alt="NVIDIA.com" /> History Center</h1>
        <!-- layer for black background of the buttons -->
        <div id="toolbar" style="margin: 0 auto; width:1180px; height:30px; position:relative;  background-color:black">
            <!-- Include page Navigation -->
            <ui:insert name="Navigation">           
                <ui:include src="Navigation.xhtml"/>         
            </ui:insert>

        </div>  

        <div id="greenBand" class="ui-state-default ui-corner-allh" style="position:relative; top:35px; left:0px;"> 
            <h:graphicImage alt="Dashboard"  style="position:relative; top:-20px; left:9px;"  value="resources/images/logo_sessions.png" />
        </div>
        <div id="main" style="margin: 0 auto; width:1190px; height:700px; position:absolute;  background-color:transparent; top:105px">

            <div id="mainpage" style="margin: 0 auto; width:1190px; height:500px; position:absolute;  background-color:transparent; top:80px">

                <div id="settingsHashMap" style="width:750px; height:400px; position:absolute;  background-color:r; top:20px; left:1px">

                    <h:form id="form">

                        <!-- The sortable data table -->
                        <h:dataTable id="dataTable" value="#{SessionsController.dataList}" var="item">


                            <h:column>
                                <f:facet name="header">
                                    <h:commandLink value="Account Session ID" actionListener="#{SessionsController.sort}">
                                        <f:attribute name="sortField" value="Account Session ID" />
                                    </h:commandLink>
                                </f:facet>
                                <h:outputText value="#{item.aSessionID}" />
                            </h:column>
                            <h:column>
                                <f:facet name="header">
                                    <h:commandLink value="User ID" actionListener="#{SessionsController.sort}">
                                        <f:attribute name="sortField" value="User ID" />
                                    </h:commandLink>
                                </f:facet>
                                <h:outputText value="#{item.userID}" />
                            </h:column>
                            <h:column>
                                <f:facet name="header">
                                    <h:commandLink value="Activity Start Time" actionListener="#{SessionsController.sort}">
                                        <f:attribute name="sortField" value="Activity Start Time" />
                                    </h:commandLink>
                                </f:facet>
                                <h:outputText value="#{item.activityStart}" />
                            </h:column>
                            <h:column>
                                <f:facet name="header">
                                    <h:commandLink value="Activity End Time" actionListener="#{SessionsController.sort}">
                                        <f:attribute name="sortField" value="Activity End Time" />
                                    </h:commandLink>
                                </f:facet>
                                <h:outputText value="#{item.activityEnd}" />
                            </h:column>
                            <h:column>
                                <f:facet name="header">
                                    <h:commandLink value="Activity" actionListener="#{SessionsController.sort}">
                                        <f:attribute name="sortField" value="Activity" />
                                    </h:commandLink>
                                </f:facet>
                                <h:outputText value="#{item.activity}" />
                            </h:column>
                        </h:dataTable>

                        <!-- The paging buttons -->
                        <h:commandButton value="first" action="#{SessionsController.pageFirst}"
                                         disabled="#{SessionsController.firstRow == 0}" />
                        <h:commandButton value="prev" action="#{SessionsController.pagePrevious}"
                                         disabled="#{SessionsController.firstRow == 0}" />
                        <h:commandButton value="next" action="#{SessionsController.pageNext}"
                                         disabled="#{SessionsController.firstRow + SessionsController.rowsPerPage >= SessionsController.totalRows}" />
                        <h:commandButton value="last" action="#{SessionsController.pageLast}"
                                         disabled="#{SessionsController.firstRow + SessionsController.rowsPerPage >= SessionsController.totalRows}" />
                        <h:outputText value="Page #{SessionsController.currentPage} / #{SessionsController.totalPages}" />
                        <br />

                        <!-- The paging links -->
                        <ui:repeat value="#{SessionsController.pages}" var="page">
                            <h:commandLink value="#{page}" actionListener="#{SessionsController.page}"
                                           rendered="#{page != SessionsController.currentPage}" />
                            <h:outputText value="#{page}" escape="false"
                                          rendered="#{page == SessionsController.currentPage}" />
                        </ui:repeat>
                        <br />

                        <!-- Set rows per page -->
                        <h:outputLabel for="rowsPerPage" value="Rows per page" />
                        <h:inputText id="rowsPerPage" value="#{SessionsController.rowsPerPage}" size="3" maxlength="3" />
                        <h:commandButton value="Set" action="#{SessionsController.pageFirst}" />
                        <h:message for="rowsPerPage" errorStyle="color: red;" />

                    </h:form>

                </div>   

                <div id="settingsdiva" style="width:350px; height:400px; position:absolute;  background-color:transparent; top:20px; left:400px">

                </div>   

                <div id="settingsdivb" style="width:350px; height:400px; position:absolute;  background-color:transparent; top:20px; left:800px">

                </div>   
            </div>  
        </div>

    </h:body>
</html>

Nothing happens. 什么都没发生。 I suppose that the JavaScript must be able to work. 我想JavaScript必须能够工作。 Is there a diffidence in highlighting row in a JSF table and a normal HTML table? 突出显示JSF表和普通HTML表中的行是否有区别？ Maybe the problem is the version of JQuery? 也许问题是JQuery的版本？

Best wishes 最好的祝愿

2 个解决方案

解决方案1
 3 已采纳  2012-04-12 18:52:45

The problem is, that your script gets executed before the DOM is completely loaded. 问题是您的脚本在DOM完全加载之前就已执行。

You can either put your script as it is at the bottom of the page or call it when the document is ready by putting it inside $(function() {}) : 您可以将脚本放在页面底部，也可以在文档准备好时调用它，方法是将其放在$(function() {}) ： 

<script type="text/javascript">
  $(function() {
    $("tr").not(':first').hover(
      function () {
        $(this).css("background","yellow");
      }, 
      function () {
        $(this).css("background","");
      }
    );
  })
</script>

解决方案2
 1  2012-04-13 11:49:19

You can use these js action call in dataTable: 您可以在dataTable中使用以下js操作调用： 

onrowmouseover="this.style.cursor='default';this.style.backgroundColor='#F1F1F1';" 
onrowmouseout="this.style.backgroundColor='#{a4jSkin.tableBackgroundColor}'"

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何在JSF数据表中突出显示特定行 - how to highlight particular row in JSF datatable JSF：数据表行多选 - JSF: datatable row manyselect 在jsf中更新数据表中的选定行 - Updating a selected row in datatable in jsf jsf-dataTable中的CommandLink用于删除行 - jsf - commandLink in a dataTable for delete row JSF Datatable的“优雅”方式来编辑行的内容 - JSF Datatable “elegant” way to edit the content of a row 如何在JSF数据表中获取选定的行索引？ - How to get selected row index in JSF datatable? 提交数据表中已编辑的行（Primefaces JSF） - Submit edited row in a DataTable (Primefaces JSF) 将行组件动态添加到JSF 2 dataTable - Dynamically adding row component to JSF 2 dataTable JSF中的DataTable - DataTable in JSF 如何在JSF的数据表顶部添加新行？ - How can I add a new row at the top of my datatable in JSF?
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM