Supose我有一个视图,可以收到类似的列表:
@(notices: Seq[Notice])
@for( not <- notices) {
<tr> not.title </tr>
}
....
我在控制器中有一个方法,它通过ajax调用并更改列表的值。我知道de方法可以返回一个Result并使用新值重新呈现页面,例如:
public Result editNotice() {
/*change the list */
return ok(list.render(notices);
}
但我想只刷新列表所在的表。
如何在不重新加载整个页面的情况下刷新视图中的列表?
答案 0 :(得分:1)
只需创建较小的视图以仅渲染表格部分并在editNotice
动作中使用它,然后在收到AJAX响应后用JavaScript替换现有的(可能是jQuery)
要确保您不需要在两个视图中创建相同的表标记,请记住您可以使用另一个中的 include 模板,如{{ 3}}。
所以你的AJAX动作如下:
public Result editNotice() {
return ok(table.render(notices);
}
和您的list.scala.html
:
@(notices: Seq[Notice])
@table(notices)
....
和您的table.scala.html
:
@(notices: Seq[Notice])
<table>
@for(not <- notices) {
<tr><td>@not.title</td></tr>
}
</table>
其他解决方案
返回JsonNode - 对象数组 - 来自editAction
并使用JS构建新表。
答案 1 :(得分:0)
最后我解决了这个从控制器返回结果,但用javascript和div替换html中的内容。
<强>控制器:强>
public Result editNotice() {
return ok(table.render(notices);
}
Html:list.scala.html
@()
<div id="table">
</div>
<li>
<a class="ajax-call" href="#table" onclick="$('#table').load('/editNotice';"/>
</li>
Html:table.scala.html
@(notices: Seq[Notice])
<table>
@for(not <- notices) {
<tr><td>@not.title</td></tr>
}
</table>