在一个 Grails 视图中显示父/子列表答案

【问题标题】：Display Parent / child list in one Grails view在一个 Grails 视图中显示父/子列表
【发布时间】：2013-08-08 17:03:20
【问题描述】：

我正在尝试使用 grails 2.2.1 在一个视图上显示一对多关系。

本质上，我想使用一个视图来显示两个列表（一个父列表，一个子列表）。此外，我想创建对控制器的调用，以根据在父列表中选择的记录在子列表中显示正确的子记录。域看起来像这样...

class Parent{
    string name
    string attribute

    static hasMany = [children : Child]

}


class Child{
    string name
    string childattribute

    static belongsTo = [parent: Parent]

}

父控制器将是 ...

class AppstackController {

static scaffold = Appstack

def index ={
   def parent = Parent.list()
   def childList= parent?.child
   render(view: "list", model:[parentlist: Parent.list(), childList: childList])
}

def getChildren = {
    def parent= Appstack.get(params.id)
    def childList= parent?.child
    render (view: "list", model:[childList: childList])
}


}

我希望能够调用 getChildren 操作并通过单击父列表中的行来更新视图上的子列表。我认为这可以通过 remoteLink 或 remoteFunction 来完成。

控制器和视图代码应该是什么样的？

【问题讨论】：

标签： grails

【解决方案1】：

gsp: 您需要包含 jquery

      <g:each in="${ parentlist}" var="FoundParent">

                <button id=whatever 
onclick="<g:remoteFunction controller="AppstackController"  
        action="getChildren" update="myBOX"  
        id="${FoundParent.id}"  params="${[name:FoundParent.name,param2:'something']}"/>">
        FoundParent.name</button>
     </g:each>
                 <div id=myBox>
                   <g:each in="${childList}" var="FoundChild">
                            ${FoundChild.name}
               </g:each>
                 </div>

【讨论】：

【解决方案2】：

我推荐使用 GET http 请求。无论如何，您可以在之后添加 AJAX 请求。如何使用 AJAX 请参阅 Grails 文档。

class ParentController {

    def index(){ redirect action: 'list' }

    def list(){
        [parents: Parent.list()]
    }

    def show(long id){
       def parent = Parent.get(id)
       if (!parent) { redirect: action:'list'; return }

       //prepare model
       model=[:]
       model.parents = Parent.list()
       model.parent = parent
       render view:'list', model:model
    }

}

${parent?.children} 在 GSP 中给你 Set 孩子。您可以使用“g:each”标签。

普惠制

<ul>
   <g:each in="${parents}" var="p">
   <li class="selectable ${ p==parent?'selected': ''}">
      <g:link action="show" id="${p.id}">
          ${p.name}
      </g:link>
   </li>
   </g:each>
</ul>

<ul>
   <g:each in="${parent?.children}" var="child">
   <li>
      ${child.name}
   </li>
   </g:each>
</ul>

CSS

li.selectable{}
li.selectable:HOVER{ border: 1px solid gray;}
li.selected{ border: 1px solid gray; background-color: silver;}

【讨论】：