0

我目前正在将 displaytag 用于表格数据，但想创建一个“类似 kayak.com”的界面，当用户单击一行时，会在不刷新页面的情况下向用户显示有关特定行的更多详细信息。

例如，在单击第 1 行的详细信息链接之前：

row1|col1|col2|col3|col4|详细信息
row2|col1|col2|col3|col4|详细信息
row3|col1|col2|col3|col4|详细信息

点击后：

row1|col1|col2|col3|col4|Detail
--------row1Detail-------------
row2|col1|col2|col3|col4|Detail
row3|col1| col2|col3|col4|详情

我尝试使用装饰器返回可以执行此操作的 javascript。javascript 被执行，但它只反映在它被呈现的列中。我希望插入一个新行，其中包含不影响 displaytag 分页和排序的数据。

例如：

public class CustomDecorator extends TableDecorator {
   public String getDetailsRow() {
      MyObject object = (MyObject)this.getCurrentRowObject();
      return "<a onClick=\"myjsfunction(object.getId()); return true\">Details</a>";
   }
}

...并且在 JSP 中，我将在 display:table 标记之间嵌套一个 detailsRow 属性：

<display:column property="detailsRow" sortable="false" />

有关如何正确插入新行的任何提示？解决方案可能是编写 javascript 的方式 - 我不是 Javascript 专家，所以任何提示将不胜感激。有没有更好的方法来使用 displaytag 做到这一点？我也不知道 displaytag 与 javascript 的任何显式集成（如“onclick”参数）。

这是我关于stackoverflow的第一个问题，顺便说一句-所以请让我知道您是否需要更多详细信息。

4

2 回答 2

1

很抱歉提出一个老问题，但这是一个可能的解决方案，以防有人遇到这个问题。覆盖时TableDecorator，覆盖该finishRow方法以返回您的详细信息行。此方法将在每一行写入表格后运行，因此对于每一真实行，您将有一个隐藏行，其中包含详细信息

public String finishRow() {
   return "<tr id='row1Details' style='visibility: collapse'><td colspan='500'>My Details</td></tr>";
}

然后，您只需在详细信息列上有一些 javascript 即可将隐藏行设置为可见。

编辑：附加细节：

添加一个新的 javascript 函数

function displayDetails(id) {
   document.getElementById(id + 'details').style.visibility = 'visible'
}

然后你的正常行看起来像：

<tr id='row1'><td> .... </td><td><a href="#" onClick="displayDetails('row1')">Details</a></td></tr>
于 2010-07-28T17:38:17.043 回答
0

我不确定这是否会有所帮助，但我是DataTables.net的忠实粉丝。它基于 jQuery，但功能非常强大。

他们有一个听起来很像你想要的例子：Row Details

于 2010-04-24T20:02:22.637 回答