0

在 JQuery UI 选项卡中显示来自 Grails 数据库的数据的最佳方式是什么？我想要的是有一个选项卡界面，每个选项卡上都有一个来自不同域的记录列表。例如，Tab1 显示来自 Domain1 的记录列表，Tab2 显示来自 Domain2 的记录列表，等等。

我已经设置并工作了 JQuery UI 选项卡界面，目前正在使用 createLink 从控制器调用方法以返回相应域的模型。选项卡如下所示：

<div id="tabs">
    <ul>
        <li><a href="${createLink(action: 'listHardware')}">Hardware records</a></li>
        <li><a href="${createLink(action:'listModel')}">Model records</a></li>
        <li><a href="${createLink(action:'listBuilding')}">Building records</a></li>

    </ul>       
</div>

来自控制器的方法如下所示：

def listHardware() {
    [hardwareList:Hardware.list(), hardwareInstanceTotal:Hardware.count()]      
}

我还尝试使用“render(view:'HardwareList', model:[hardwareList:Hardware.list(), hardwareInstanceTotal:Hardware.count()]”在选项卡中渲染整个 GSP，但这需要每次选择选项卡时加载时间很长（至少 5 秒），而且根本不理想，特别是如果每​​个选项卡都需要很长时间。

更新

正如我在下面对 Rimero 的回答中所指出的那样，我能够使用模板来显示我的域数据表。我还尝试使用标签在每个选项卡上实现分页，但是每次单击其中一个页面查看另一个页面时，都会将我带到选项卡界面之外的完整模板本身。关于如何格式化标签以使所有内容都保留在选项卡中的任何想法？

4

1 回答 1

1

这是我的建议：

  • 例如，您可以使用 index 方法在控制器中一次获取所有内容。
  • 您可以将选项卡内容实现为模板（g 渲染模板）。每个选项卡 == 1 个模板。
  • 您可以从控制器的 index 方法中获取域对象 buildingList 等。
  • 每个选项卡的 g:render 模板代码可能只需要传递一个地图或一个集合即可进行渲染。

在这种情况下，您不需要到控制器端点的超链接。您只需将锚点保留在选项卡（div id）上，就像这里的默认示例一样 -> http://jqueryui.com/tabs/。

更新的答案

正如您所说，一次发送所有数据需要很长时间，您可以异步获取它。如果可能，仅直接为第一个选项卡填充数据。

  • 为每个选项卡创建一个业务方法，它将模型作为 JSON 返回，仅在尚未从服务器检索到数据时才获取数据（需要保持状态或查看例如选项卡 ID 是否有一些 DOM 节点。

  • 使用 JQuery，当 DOM 准备好时，获取当前选项卡，如果您没有急切地获取第一个选项卡的数据，请在忙图像旋转的这一刻获取它。

  • 一旦你选择了一个新的标签，你需要检查数据是否已经被获取，如果没有，你发送一个 ajax 调用并且你的回调函数例如在标签 div 容器中填充数据。

希望能帮助到你。

于 2013-01-22T23:18:34.480 回答