2

我有一个需要使用 CSS 设置样式的 tr:table。表格的所有正常样式功能都可以正常工作，但没有出现行带和行选择。当我查看渲染的源代码时，我没有看到要抓取的 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行原来的， ETC。）

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

所以问题是，我如何告诉特立尼达给交替的行和用户选择的行不同的类/ID，让我用 CSS 抓住？

编辑 2

只是为了让任何人注意张贴，实际td元素也没有变化

编辑 3

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

4

5 回答 5

3

有一个漂亮而简单的 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; }

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

于 2010-06-17T20:46:40.907 回答
2

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

tr:nth-child(2n)
{
background-color:red;
}
于 2010-06-12T21:08:52.490 回答
1

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

要处理 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 获取萤火虫。使用该附加组件，您可以确定在组件上使用哪个 trinidad-selector。

用户选择的行没有选择器。我是这样做的：给你的对象一个类似“突出显示属性”的东西，如果它是选定的，你可以改变它。

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

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

于 2010-10-06T07:33:01.847 回答
0

我将向您推荐特立尼达文档。 http://myfaces.apache.org/trinidad/trinidad-api/tagdoc/tr_table.html 在他们的示例中，他们将条带声明为行banding="row"我认为您没有得到任何东西的原因是您没有声明它是否是行或列带。

于 2010-06-14T16:25:12.517 回答
0

将这些选择器放入您的 trinidadskin.css 文件（在我的情况下为 smSkin.css）： .AFTableCellDataBackgroundColor:alias { background-color: #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>

于 2010-10-05T08:41:06.670 回答