如何开发 AJAX 列表（list）页面、如何开发多页签的列表页面?

为了提升性能与用户体验，可以列表界面加载数据时，可以采用ajax方式。

在 BroFramework 中，通过查询框架，可以很轻松的实现 ajax 加载的需求，示例如下。

• 修改 list.gsp，给 s:form 标签添加属性 ajax，如：
  <s:form action="${actionName}" ajax="true">
• 将 list.gsp 中的 <div class="list"> 和 <div class="paginateButtons">两端代码，剪切出来粘贴到一个新的 _list.gsp 文件中
• 修改 list.gsp ，在上述两个 div 原本所在位置插入标签 g:render，如：
  <g:render template="/foo/bar/list" plugin="bro-foobar"  />
  注：如果是插件开发，则需要 plugin 属性，否则不需要
• 修改控制器中的 list 方法，将最后的 render 修改为：
  if ( isAjax() ) {
      render ( view:"${VIEW_PATH}_list", model:[......] )
  } else {
      render ( view:"${VIEW_PATH}list", model:[......] )
  }
  也就是判断 ajax 请求时，仅渲染 _list.gsp

经过上述改造后，页面加载的时候会一次性渲染完整的第一页，但是点击翻页、表头排序、查询时，都会自动采用 ajax 方式加载列表了。

此外，某些场景下，列表页面中需要加载多个页签，并且每个页签下显示一个独立的列表，但是页签顶部有一个统一的查询栏，效果如下图所示：

这个需求开发略微复杂，以上述截图中的待办列表为例。

改造 list.gsp，添加页签：

子列表页面 _list.gsp 如下：

控制器操作如下：

这样改造后，任意一个列表翻页、排序时，会覆盖其他列表，因此，每次翻页或排序时，需要指定本次操作的容器（某个页签），这里通过查询框架的事件来实现；此外，由于只有一个查询栏，点搜索按钮时也会自动用 ajax 方式查询，得到的结果也不是想要的，需要改造成搜索时不通过 ajax、直接加载整个页面，此时同样可以通过查询框架的事件来执行。如下面的 js 示例代码，贴到 list.gsp 中：

1、在页签中翻页、排序时（我们在 _list.gsp 中设置了一个 tabId 的额外参数，通过它可以判断），给 s:form 设置一个 ajaxContainer 的表单参数，指向 list.gsp 中的页签 div 容器

2、搜索操作时，删除 s:form 标签的 ajax 属性，实现非 ajax 查询

最后，默认的 jQuery UI 的页签组件显示效果适用于表单，在列表界面中不太好看，因此，需要设置一些 css 样式，上图中的样式示例如下：