Question

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

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

ROW1 | COL1 | COL2 | COL3 | COL4 |详细
2行| COL1 | COL2 | COL3 | COL4 |详细
row3 | col1 | col2 | col3 | col4 |详细信息

点击后：

ROW1 | COL1 | COL2 | COL3 | COL4 |详细
-------- row1Detail ---------------
2行| COL1 | COL2 | COL3 | COL4 |详细
row3 | col1 | col2 | col3 | col4 |详细信息

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

e.g：

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的第一个问题，顺便说一下 - 所以请告诉我你是否需要更多细节。

Answer 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>

Answer 2

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

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

在displaytag中创建一个下拉行

2 个答案: