JSF 2.0 Javascript 和 CSS 表

发布于 2024-10-18 09:01:59 字数 3477 浏览 1 评论 0原文

我是 JSF 2.0 的新手，并且在 js/css 事件方面遇到了麻烦。基本上我有这个 html 代码：

<!-- CSS goes in the document HEAD or added to your external stylesheet -->
<style type="text/css">
table.hovertable {
    font-family: verdana,arial,sans-serif;
    font-size:11px;
    color:#333333;
    border-width: 1px;
    border-color: #999999;
border-collapse: collapse;
}
table.hovertable th {
    background-color:#c3dde0;
    border-width: 1px;
    padding: 8px;
    border-style: solid;
    border-color: #a9c6c9;
}
table.hovertable tr {
    background-color:#d4e3e5;
}
table.hovertable td {
    border-width: 1px;
    padding: 8px;
    border-style: solid;
    border-color: #a9c6c9;
}
</style>

<!-- Table goes in the document BODY -->

<table class="hovertable">
<tr>
    <th>Info Header 1</th><th>Info Header 2</th><th>Info Header 3</th>
</tr>
<tr onmouseover="this.style.backgroundColor='#ffff66';" onmouseout="this.style.backgroundColor='#d4e3e5';">
    <td id="here">Item 1A</td><td>Item 1B</td><td>Item 1C</td>
</tr>
<tr onmouseover="this.style.backgroundColor='#ffff66';" onmouseout="this.style.backgroundColor='#d4e3e5';">
    <td>Item 2A</td><td>Item 2B</td><td>Item 2C</td>
</tr>
<tr onmouseover="this.style.backgroundColor='#ffff66';" onmouseout="this.style.backgroundColor='#d4e3e5';">
    <td>Item 3A</td><td>Item 3B</td><td>Item 3C</td>
</tr>
<tr onmouseover="this.style.backgroundColor='#ffff66';" onmouseout="this.style.backgroundColor='#d4e3e5';">
    <td>Item 4A</td><td>Item 4B</td><td>Item 4C</td>
</tr>
<tr onmouseover="this.style.backgroundColor='#ffff66';" onmouseout="this.style.backgroundColor='#d4e3e5';">
    <td>Item 5A</td><td>Item 5B</td><td>Item 5C</td>
</tr>
</table>

它呈现一个简单的表格，在“鼠标悬停”时改变其颜色。我想将其“转换”为 JSF 2.0 代码，如下所示：

<?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://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets">
    <h:head>
        <h:outputStylesheet library="css" name="table-style.css"  />

    </h:head>

    <h:body>

        <h1>JSF 2.0 + Spring + Hibernate :)</h1>

        <h:dataTable value="#{cBean.getcBeanList()}" var="c"
                 styleClass="hovertable"
                 >
            <h:column>
                <f:facet name="header" id="h1">Info Header 1</f:facet>#{c.cBeanId}
            </h:column>

            <h:column>
                <f:facet name="header">Info Header 2</f:facet>#{c.name}
            </h:column>

            <h:column>
                <f:facet name="header">Info Header 3</f:facet>#{c.address}
            </h:column>

        </h:dataTable>

    </h:body>
</html>

但包括 onmouseover 事件。

另外，cBean.getcBeanList()返回一个List

好了，我想就这些了，希望你能帮助我。
提前致谢。

原文

I'm new to JSF 2.0 and I'm having troubles with js/css events.
Basically I have this html code:

<!-- CSS goes in the document HEAD or added to your external stylesheet -->
<style type="text/css">
table.hovertable {
    font-family: verdana,arial,sans-serif;
    font-size:11px;
    color:#333333;
    border-width: 1px;
    border-color: #999999;
border-collapse: collapse;
}
table.hovertable th {
    background-color:#c3dde0;
    border-width: 1px;
    padding: 8px;
    border-style: solid;
    border-color: #a9c6c9;
}
table.hovertable tr {
    background-color:#d4e3e5;
}
table.hovertable td {
    border-width: 1px;
    padding: 8px;
    border-style: solid;
    border-color: #a9c6c9;
}
</style>

<!-- Table goes in the document BODY -->

<table class="hovertable">
<tr>
    <th>Info Header 1</th><th>Info Header 2</th><th>Info Header 3</th>
</tr>
<tr onmouseover="this.style.backgroundColor='#ffff66';" onmouseout="this.style.backgroundColor='#d4e3e5';">
    <td id="here">Item 1A</td><td>Item 1B</td><td>Item 1C</td>
</tr>
<tr onmouseover="this.style.backgroundColor='#ffff66';" onmouseout="this.style.backgroundColor='#d4e3e5';">
    <td>Item 2A</td><td>Item 2B</td><td>Item 2C</td>
</tr>
<tr onmouseover="this.style.backgroundColor='#ffff66';" onmouseout="this.style.backgroundColor='#d4e3e5';">
    <td>Item 3A</td><td>Item 3B</td><td>Item 3C</td>
</tr>
<tr onmouseover="this.style.backgroundColor='#ffff66';" onmouseout="this.style.backgroundColor='#d4e3e5';">
    <td>Item 4A</td><td>Item 4B</td><td>Item 4C</td>
</tr>
<tr onmouseover="this.style.backgroundColor='#ffff66';" onmouseout="this.style.backgroundColor='#d4e3e5';">
    <td>Item 5A</td><td>Item 5B</td><td>Item 5C</td>
</tr>
</table>

It renders a simple table that change its color on 'mouseover'.
I want to "convert" it to JSF 2.0 code like this:

<?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://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets">
    <h:head>
        <h:outputStylesheet library="css" name="table-style.css"  />

    </h:head>

    <h:body>

        <h1>JSF 2.0 + Spring + Hibernate :)</h1>

        <h:dataTable value="#{cBean.getcBeanList()}" var="c"
                 styleClass="hovertable"
                 >
            <h:column>
                <f:facet name="header" id="h1">Info Header 1</f:facet>#{c.cBeanId}
            </h:column>

            <h:column>
                <f:facet name="header">Info Header 2</f:facet>#{c.name}
            </h:column>

            <h:column>
                <f:facet name="header">Info Header 3</f:facet>#{c.address}
            </h:column>

        </h:dataTable>

    </h:body>
</html>

but including onmouseover event.

In addition, cBean.getcBeanList() returns a List<Object>

Well, I think that's all, I hope you can help me.

Thanks in advance.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

眉黛浅 2024-10-25 09:01:59

如果您不关心 IE6 用户，只需使用:hover 伪选择器即可。将以下内容添加到您的 CSS 中。

table.hovertable tbody tr:hover {
    background: #ffff66;
}

如果您出于某些不明显的原因确实关心它们，请使用 JavaScript。

var trs = document.getElementById('dataTable').getElementsByTagName('tbody')[0].getElementsByTagName('tr');
for (var i = 0; i < trs.length; i++) {
    trs[i].onmouseover = new Function("this.bgColor = '#ffff66'");
    trs[i].onmouseout = new Function("this.bgColor = '#d4e3e5'");
}

在窗口加载期间或正文末尾调用它。请注意，Javascript 中的元素 ID dataTable 必须与生成的 < 的 HTML ID 完全相同。 /代码>。

<h:dataTable id="dataTable">

对于这种情况，使用 jQuery.hover() 函数可以实现更好的效果你使用 jQuery。

$('.hovertable tbody tr').hover(
    function() { this.bgColor = '#ffff66'; },
    function() { this.bgColor = '#d4e3e5'; }
);

If you don't care about IE6 users, just use :hover pseudoselector. Add the following to your CSS.

table.hovertable tbody tr:hover {
    background: #ffff66;
}

If you do care about them for some unobvious reasons, use JavaScript.

var trs = document.getElementById('dataTable').getElementsByTagName('tbody')[0].getElementsByTagName('tr');
for (var i = 0; i < trs.length; i++) {
    trs[i].onmouseover = new Function("this.bgColor = '#ffff66'");
    trs[i].onmouseout = new Function("this.bgColor = '#d4e3e5'");
}

Call it during onload of the window or at end of the body. Note that the element ID dataTable in the Javascript has to be exactly the same as the generated HTML <table> ID of the <h:dataTable>.

<h:dataTable id="dataTable">

This is fancier possible with jQuery.hover() function, for the case you use jQuery.

$('.hovertable tbody tr').hover(
    function() { this.bgColor = '#ffff66'; },
    function() { this.bgColor = '#d4e3e5'; }
);

回复收藏 0 原文

毅然前行 2024-10-25 09:01:59

获得该功能的最简单方法是使用 RichFaces。 RichFaces 中的 dataTable 为您提供 onRowMouseOver 和其他选项。您可以将其用作：

<rich:dataTable onRowMouseOver="this.style.backgroundColor='#F1F1F1'" onRowMouseOut="this.style.backgroundColor='#{a4jSkin.tableBackgroundColor}'">

否则您将不得不编写一些 javascript。看看这个论坛帖子： http:// /www.coderanch.com/t/212203/JSF/java/highlight-row-datatable-when-mouse （参考 Munish K Singh 的回复 - 第 4 条回复）

The most easy way to get the functionality is to use RichFaces. The dataTable in RichFaces provide you with onRowMouseOver and other options. You can use it as:

<rich:dataTable onRowMouseOver="this.style.backgroundColor='#F1F1F1'" onRowMouseOut="this.style.backgroundColor='#{a4jSkin.tableBackgroundColor}'">

Otherwise you will have to cookup some javascript. Have a look at this forum thread: http://www.coderanch.com/t/212203/JSF/java/highlight-row-datatable-when-mouse (Refer to the response of Munish K Singh - 4th reply)

回复收藏 0 原文

~没有更多了~