使用 CSS 在 tr:table 中设置行带和选择的样式

发布于 2024-09-05 06:14:13 字数 1150 浏览 8 评论 0原文

我有一个 tr:table，需要使用 CSS 设置样式。表格的所有正常样式功能都可以正常工作，但行带和行选择不会出现。当我查看渲染的源代码时，我没有看到要获取的 id 或类的行存在差异，并且官方文档没有任何用于声明样式类的属性。这可能吗？如果可以，我需要做什么才能让我的 CSS 抓住它？

<tr:table id="myTable" value="#{tableValues}" rowBandingInterval="1">
    <tr:column>
        ##Stuff##
    </tr:column>
    <tr:column>
        ##Stuff##
    </tr:column>
    <tr:column>
        ##Stuff##
    </tr:column>
</tr:table>

编辑

让我试着弄清楚发生了什么。

首先，使用上面的声明告诉 jsf 生成一个表，并且属性 rowBandingInterval 告诉它为每行提供交替颜色（如果设置为 2，那么它将执行 2 行一种颜色，2 行另一种颜色，2 行原始颜色等）

一旦页面呈现为标准 html，trinidad（和 jsf）就会将自己的类和 ID 应用于 html。我的正常程序是查看渲染的 html，找到它正在应用的类并为其添加 CSS 规则。然而在这种情况下，没有添加额外的样式（渲染的 html 中没有任何内容表示一行与另一行不同）。

所以问题是，我如何告诉特立尼达提供交替行和用户选择的行不同的类/ID，以便我使用 CSS 获取？

编辑 2

只是为了让大家注意，实际的 td 元素也没有发生任何变化

编辑 3

在切换所有属性后然后将所有代码剥离到只剩下骨头，我找到了行带属性。 Trinidad 类相当复杂，除非您重新格式化代码并消除所有噪音，否则您将看不到它。 Trinidad 将 .af_column_cell-text-band 类添加到带状行，而普通行只有 .af_column_cell-text。这样问题就解决了一半。我仍然需要知道用户选择的行的选择器，为此我很乐意将所有弹珠交给任何可以给我答案的人。

原文

I've got a tr:table that I need to style using CSS. All the normal style functions of a table are working, but row banding and row selection aren't coming up. When I view the rendered source, I'm not seeing a difference in the rows for an id or class to grab on to, and the official documentation doesn't have any attributes for declaring a style class for either. Is this possible and if so what do I need to do to get my CSS to grab onto it?

<tr:table id="myTable" value="#{tableValues}" rowBandingInterval="1">
    <tr:column>
        ##Stuff##
    </tr:column>
    <tr:column>
        ##Stuff##
    </tr:column>
    <tr:column>
        ##Stuff##
    </tr:column>
</tr:table>

Edit

Let me try to clairfy what's happening.

First, using the declaration above tells jsf to generate a table, and the attribute rowBandingInterval tells it to give each row alternating colors (If it was set to 2, then it would do 2 rows one color, 2 rows another, 2 rows the original, etc.)

Once the page gets rendered into standard html, trinidad (and jsf) apply their own classes and IDs to the html. My normal procedure is to look at the rendered html, find the class that it is appling and add CSS rules for it. However in this case, no additional styles are added (nothing in the rendered html denotes one row to be different from another).

So the question is, how do I tell trinidad to either give alternating rows and the user selected row different classes/IDs for me to grab on to with CSS?

Edit 2

Just to keep anybody paying attention posted, there are no changes to the actual td elements either

Edit 3

After having switched all the attributes around and then stripping all the code down to it's bare bones, I found the row banding attribute. Trinidad classes are rather convluted, and unless you reformat the code and pull out all the noise you won't see it. Trinidad adds the class .af_column_cell-text-band to the banded rows, where as the normal rows have just .af_column_cell-text. So that's half the problem solved. I still need to know the selector for a user selected row, for which I'll happily give all the marbles to anybody that can give me an answer to just that.

分享到QQ

分享到微博

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

发布评论

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

梦里南柯 2024-09-12 06:14:13

此处有一个漂亮且简单的 jquery 代码来执行行突出显示。

jQuery 如下然后是

<script type="text/javascript">
  $(document).ready(function(){
    $(".stripeMe tr")
      .mouseover(function() { $(this).addClass("over");})
      .mouseout(function() { $(this).removeClass("over");
      });
    $(".stripeMe tr:even").addClass("alt");
  });
</script>

一些 css

tr.alt td { background: #ecf6fc; }
tr.over td { background: #bcd4ec; }

顺便说一句，我从以下站点获取了所有代码，您也可以查看演示。

There is a nice and simple jquery code to do the row highlighting located here.

The jQuery is as follows

<script type="text/javascript">
  $(document).ready(function(){
    $(".stripeMe tr")
      .mouseover(function() { $(this).addClass("over");})
      .mouseout(function() { $(this).removeClass("over");
      });
    $(".stripeMe tr:even").addClass("alt");
  });
</script>

Then a bit of css

tr.alt td { background: #ecf6fc; }
tr.over td { background: #bcd4ec; }

btw I took all that code from the following site where you can also view the demo.

回复收藏 0 原文

握住我的手 2024-09-12 06:14:13

这并没有直接回答你的问题，但是为什么不使用CSS3伪类nth-child来实现这个效果呢？例如：

tr:nth-child(2n)
{
background-color:red;
}

This is not directly answering your question, but why not use the CSS3 pseudo-class nth-child to achieve this effect ? For instance :

tr:nth-child(2n)
{
background-color:red;
}

回复收藏 0 原文

罪#恶を代价 2024-09-12 06:14:13

我在注册过程中犯了一些错误，所以这是一个新答案而不是评论。

要处理 trinidad-skinning 主题，您需要执行以下操作：

在您的 web.xml 中，您需要在开发时将此参数设置为 true：

<context-param>
<param-name>org.apache.myfaces.trinidad.DISABLE_CONTENT_COMPRESSION</param-name>
<param-value>true</param-value></context-param>

为您的 Firefox 获取 firebug。使用该附加组件，您可以确定组件上使用哪个 trinidad 选择器。

用户选择的行没有选择器。我是这样做的：
为您的对象提供类似于“突出显示属性”的内容，如果它是选定的对象，则可以更改该对象。

<tr:column sortProperty="nr" sortable="true" defaultSortOrder="ascending" headerText="Nr" inlineStyle="#{object.tablerowhighlight}text-align:right;"><tr:outputText value="#{object.nr}"/></tr:column>

对表格的所有列执行此操作，您就完成了。

I made something wrong during the registration process, so this is a new answer instead of a comment.

To deal with the trinidad-skinning topic you need to do the following:

In your web.xml you need to set this parameter to true while developping:

<context-param>
<param-name>org.apache.myfaces.trinidad.DISABLE_CONTENT_COMPRESSION</param-name>
<param-value>true</param-value></context-param>

Get firebug for your firefox. With that add-on you can determine which trinidad-selector is used on a component.

There is no selector for a user selected row. I did it this way:
Give your object something like a "highlight property", which you change if it is the selected one.

<tr:column sortProperty="nr" sortable="true" defaultSortOrder="ascending" headerText="Nr" inlineStyle="#{object.tablerowhighlight}text-align:right;"><tr:outputText value="#{object.nr}"/></tr:column>

Do that for all columns of your table and you are done.

回复收藏 0 原文

狂之美人 2024-09-12 06:14:13

将这些选择器放入您的 trinidadskin.css 文件中（在我的例子中是 smSkin.css ）：
.AFTableCellDataBackgroundColor:别名
{
背景颜色：#F5F5DC；
.AFTableCellDataBandedBackgroundColor

:别名
{
背景颜色：#FFFFFF；
配置

trinidad-skins.xml 的

<skin>
    <id>
        sm.desktop
    </id>
    <family>
        sm
    </family>
    <render-kit-id>
        org.apache.myfaces.trinidad.desktop
    </render-kit-id>
    <style-sheet-name>
        skins/sm/smSkin.css
    </style-sheet-name>
</skin>

put these selectors in your trinidadskin.css-file(smSkin.css in my case):
.AFTableCellDataBackgroundColor:alias
{
background-color: #F5F5DC;
}

.AFTableCellDataBandedBackgroundColor:alias
{
background-color: #FFFFFF;
}

Configuration of trinidad-skins.xml

<skin>
    <id>
        sm.desktop
    </id>
    <family>
        sm
    </family>
    <render-kit-id>
        org.apache.myfaces.trinidad.desktop
    </render-kit-id>
    <style-sheet-name>
        skins/sm/smSkin.css
    </style-sheet-name>
</skin>

回复收藏 0 原文