在jquery选项卡中显示Grails域 [英] Displaying Grails domains in jquery tabs

问题描述

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

我有JQuery UI标签界面设置和工作，我目前使用createLink从控制器调用该方法以返回适当域的模型。这些标签看起来像这样：

 < div id =tabs> 
< ul> 
< li>< a href =$ {createLink（action：'listHardware'）}>硬件记录< / a>< / li> 
< li>< a href =$ {createLink（action：'listModel'）}>模型记录< / a>< / li> 
< li>< a href =$ {createLink（action：'listBuilding'）}>建立记录< / a>< / li> 
 
< / ul> 
< / div> 
  

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

  def listHardware（）{
 [hardwareList：Hardware.list（），hardwareInstanceTotal：Hardware.count（）] 
} 
  

我也玩过使用render（view：'HardwareList'，model：[硬件列表：Hardware.list（），hardwareInstanceTotal：Hardware.count（）]，但每次选择标签时都需要非常长的时间（至少5秒）才能加载，特别是如果它是为每个标签花费很长时间。

更新

在我回答下面的Rimero的答案时，我能够使用模板来显示我的域的数据表，我也试图在每个标签上使用标签实现分页，但每次点击其中一个页面以查看另一个页面，它将我带到标签页之外的完整模板本身rface。关于如何格式化标签以使所有内容保持在标签中的任何想法

解决方案

这是我的建议：

• 例如，您可以在您的控制器中一次在您的控制器中获取所有内容。


• 您可以将标签内容实现为模板
  （g渲染模板）。每个标签== 1模板。


• 您可以从您的控制器的索引方法中获取您的域对象buildingList，
  等。


• 每个标签的g：render模板代码可能只需要传递一个地图或一个集合进行渲染即可。

在这种情况下，您不需要超链接到控制器端点。您只需将标签（div id）锚定为默认示例 - > http://jqueryui.com/tabs / 。

UPDATED ANSWER

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

• 为每个选项卡创建一个业务方法，返回模型作为JSON，如果尚未从服务器中检索数据，则只会提取数据（需要保持状态或查看例如标签ID是否包含一些DOM节点。）

使用JQuery，当DOM准备就绪时，获取当前选项卡，如果您没有热切地获取第一个选项卡的数据，请在此时使用繁忙的图像旋转获取它。 $ b $只要你选择一个新的标签，你需要检查数据是否已经被获取，如果没有，你发送一个ajax调用，并且你的回调函数例如填充标签div容器中的数据。

希望它有帮助。

What would be the best way to display data from Grails database in JQuery UI tabs? What I would like is to have a tab interface and on each tab is a list of the records from a different domain. For instance, Tab1 displays the record list from Domain1, Tab2 displays the record list from Domain2, etc.

I have the JQuery UI tab interface set up and working and am currently using createLink to call the method from the controller to return the model of the appropriate domain. The tabs look like this:

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

The method from the controller looks like this:

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

I've also played around with rendering a whole GSP within the tab by using "render(view:'HardwareList', model:[hardwareList:Hardware.list(), hardwareInstanceTotal:Hardware.count()]", but that takes a VERY long time (at least 5 seconds) to load each time the tab is selected and is not at all ideal, especially if it were to take that long for each tab.

UPDATE

As noted in one of my answers to Rimero's answer below, I was able to use templates to display tables of my domains' data. I'm also trying to implement pagination on each tab using the tag, but each time I click on one of the pages to view another page, it takes me to the full template itself outside of the tab interface. Any thoughts on how to format the tag so that everything stays within the tab??

解决方案

Here's my suggestion:

• You can fetch everything at once in your controller in your index method for example.
• You can implement your tab contents as templates (g render template). Each tab == 1 template.
• You can fetch your domain objects buildingList, etc. from the index method of your controller.
• The g:render template code for each tab may only need to be passed a map or a collection for rendering.

In this case you don't need hyperlinks to controllers endpoints. You just keep anchors to the tab(div id) as in the default example here -> http://jqueryui.com/tabs/.

UPDATED ANSWER

As you said that sending all the data at once takes a long time, you could fetch it asynchronously. If possible populate the data only for the first tab directly.

• Create a business method for each tab, that will return the model as JSON, data is only fetched if not already retrieved from the server (Need to keep state or see for example if the tab id has some DOM nodes.

• Using JQuery, when the DOM is ready, get the current tab and if you didn't fetch the data for the first tab eagerly, fetch it at this moment with the busy image spinning.

• As soon as you select a new tab, you need to check if the data was already fetched, if not, you send an ajax call and your callback function populate the data in the tab div container for example.

Hope it helps.

这篇关于在jquery选项卡中显示Grails域的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！