如何在jsf中鼠标结束时突出显示扩展数据的行？ [英] How to highlight rows of extended datatable when mouse is over in jsf?
问题描述
当鼠标结束时，我试图突出显示扩展数据表的行。这是我的datatable：
I am trying to do highlight the rows of the extended datatable when mouse is over. Here is my datatable:
<rich:extendedDataTable onrowmouseover ="this.style.backgroundColor='#B5F3FB'" onrowmouseout="this.style.backgroundColor='white'" value="#{moneyTransferManager.allAccounts}" var="accounts"
selection="#{extTableSelectionBean.selection}" id="table" frozenColumns="2"
style="height:170px; width:484px;">
<a4j:ajax execute="@form" event="selectionchange" listener="#{extTableSelectionBean.selectionListener}"
render=":res"/>
<f:facet name="header">
<h:outputText value="Hesaplarım"/>
</f:facet>
<rich:column width="120px;">
<f:facet name="header">
<h:outputText value="Hesap Numarası"/>
</f:facet>
<h:outputText value="#{accounts.accountNumber}"/>
</rich:column>
<rich:column width="120px;">
<f:facet name="header">
<h:outputText value="Para Birimi"/>
</f:facet>
<h:outputText value="#{accounts.accountCurrency}"/>
</rich:column>
</rich:extendedDataTable>
只有当行被点击时，才会突出显示。然后我尝试了以下JavaScript代码：
This one highlights only if row is clicked. Then i tried the following javascript code:
<script type="text/javascript">
$("tr").not(':first').hover(
function () {
$(this).css("background","yellow");
},
function () {
$(this).css("background","");
}
);
</script>
但是，当鼠标结束时，所有行都突出显示。有人可以帮助我吗？
But this time when mouse is over, all of the rows are highlighted. Can anyone help me with this?
谢谢
编辑：这次我尝试了JavaScript代码： p>
This time i tried that javascript code:
<script type="text/javascript">
$(function() {
$("tr").not(':first').hover(
function() {
$(this).css("background", "yellow");
},
function() {
$(this).css("background", "");
}
);
})
</script>
但是，当鼠标在一行时，每行都会突出显示。我在这里做错什么？
But still, when the mouse is on one row, every rows are highlighted. What am i doing wrong here?
编辑2：我也尝试过：
<rich:extendedDataTable onrowmouseover ="this.style.backgroundColor='#B5F3FB'" onrowmouseout="this.style.backgroundColor='white'"
这个时候它有效，但是当鼠标在第1或第2列时，前2个被突出显示，当鼠标在第3或第4个列时，第3行和第4行是一起突出，我的意思是1-2被突出显示在一起，3-4个在一起
this time it works, but when mouse is on 1st or 2nd column, first 2 are highlighted and when mouse is on 3rd or 4th colum, the 3th and 4th rows are highlighted together, i mean 1-2 are highlighted together and 3-4 are together
这是页面的完整代码：
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:rich="http://richfaces.org/rich"
xmlns:f="http://xmlns.jcp.org/jsf/core"
xmlns:a4j="http://richfaces.org/a4j"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets">
<h:head>
<title>Facelet Title</title>
</h:head>
<h:body>
<div>
<ui:include src="/template.xhtml" />
</div>
<div style="position: relative; top: 120px; left: 300px">
<h:panelGrid columns="2">
<h:form>
<rich:extendedDataTable value="#{moneyTransferManager.allAccounts}" var="accounts"
selection="#{extTableSelectionBean.selection}" id="table" frozenColumns="2"
style="height:170px; width:484px;">
<a4j:ajax execute="@form" event="selectionchange" listener="#{extTableSelectionBean.selectionListener}"
render=":res"/>
<f:facet name="header">
<h:outputText value="Hesaplarım"/>
</f:facet>
<rich:column width="120px;">
<f:facet name="header">
<h:outputText value="Hesap Numarası"/>
</f:facet>
<h:outputText value="#{accounts.accountNumber}"/>
</rich:column>
<rich:column width="120px;">
`enter code here`<f:facet name="header">
<h:outputText value="Para Birimi"/>
</f:facet>
<h:outputText value="#{accounts.accountCurrency}"/>
</rich:column>
<rich:column width="120px;">
<f:facet name="header">
<h:outputText value="IBAN"/>
</f:facet>
<h:outputText value="#{accounts.iban}"/>
</rich:column>
<rich:column width="120px;">
<f:facet name="header">
<h:outputText value="Bakiye"/>
</f:facet>
<h:outputText value="#{accounts.balance}"/>
</rich:column>
</rich:extendedDataTable>
</h:form>
<a4j:outputPanel id="res">
<rich:panel header="Seçilen Hesap:" rendered="#{not empty extTableSelectionBean.selectionItems}">
<rich:list type="unordered" value="#{extTableSelectionBean.selectionItems}" var="sel">
<h:outputText value="#{sel.accountCurrency} - #{sel.iban} - #{sel.balance}"/>
</rich:list>
</rich:panel>
</a4j:outputPanel>
<rich:panel styleClass="top">
<div style="position: relative; left: -3px; top: 23px">
<h:outputText style=" font-size: 12px; font-weight: bold; " value="Yapmak istediğiniz işlem .."></h:outputText>
</div>
<h:form>
<div style="position: relative; left: 160px; top: -3px">
<rich:select value="#{transactionManager.selection}" defaultLabel="Bir işlem seçin...">
<f:selectItem itemValue="0" itemLabel="Hesap Hareketlerini Listele" />
</rich:select>
</div>
<div style="position: relative; left: 380px; top: -22px">
<h:commandButton action="#{transactionManager.accountActivity()}" value="Devam" style="color: #000000; font-weight: bold; width: 70px; height: 21px; background-color: grey; -moz-border-radius: 0px; -webkit-border-radius: 15px;"></h:commandButton>
</div>
</h:form>
</rich:panel>
</h:panelGrid>
</div>
</h:body>
</html>
推荐答案
使用 onrowmouseover 和 onrowmouseout 在我的结尾工作正常。尝试使用< rich：extendedDataTable> 的 rowClass 属性，并在样式表中定义一个规则。
Using onrowmouseover and onrowmouseout worked fine on my end. Try using rowClass attribute of <rich:extendedDataTable> and define a rule in your stylesheet like so.
.test:hover {
background-color: yellow;
}
并做
<rich:extendedDataTable rowClass="test">
记住设置你的< h：outputStylesheet> 在< h：head>
这篇关于如何在jsf中鼠标结束时突出显示扩展数据的行？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
