Xpages、引导程序和数据视图答案

【问题标题】：Xpages, Bootstrap and Data ViewsXpages、引导程序和数据视图
【发布时间】：2015-12-23 21:19:10
【问题描述】：

我在使用 Bootstrap 主题的 Xpage 应用程序中有一个数据视图。我开始使用视图，但永远无法让寻呼机排队，并且数据视图工作得更好。

但我不明白将我的表格类 css 放在哪里。例如，如果我想要一个剥离表，我在视图的 styleClass 中输入“table table-striped”（或者它可能是 dataStyleClass）。如果我在数据视图的 styleClass 中这样做，我不会得到条带。

我尝试了下面 Mark 的建议，但有些东西不起作用。我添加了一个脚本调用并使用了 tableview 的 id。它上面已经有一个“clearfix table”类。

我添加了 Chrome 的网络检查器来显示发生了什么。

【问题讨论】：

我看到了 2 个问题：第一个是 JavaScript 代码是在定义表之前放置（并执行）的，所以它永远不会找到它。两种可能的解决方案：将其放在桌子下方或将其包裹在 $(document).ready( function() { } ) 中（就像屏幕截图中前面几行所做的那样）。如果您这样做，由于第二个问题，它仍然无法工作：您使用的 jQuery 选择器是错误的：它会查找带有 dataView1_ajax 类的表。将其更改为我的答案中的那个，它会找到表格。

标签： twitter-bootstrap-3 xpages xpages-extlib

【解决方案1】：

xe:dataView 控件确实有一个styleClass 属性，但是您在那里设置的类被添加到包装数据视图的div 元素中，而不是table（这就是Bootstrap 需要table-striped 的地方类。我会用一些 JavaScript 来解决这个问题，在 table 元素上添加你需要的类

<xp:scriptBlock
id="scriptBlock1">
  <xp:this.value><![CDATA[
    $("table.dataview").addClass("table-striped table-hover")
  ]]></xp:this.value>
</xp:scriptBlock>

【讨论】：

马克，这看起来应该可以工作，但我的代码有问题。我在上面添加了一些细节。
标记完美。非常感谢您的澄清。
马克，我发现另一个问题，当我刷新时，我失去了课程。相信我需要添加一个事件处理程序。我发布了一个关于这个的新问题，如果你有兴趣，这里是一个链接...stackoverflow.com/questions/34615735/…