2013-06-05 43 views
0

在我的程序中,這是一個項目跟蹤器,我有一個表格,其中包含與項目對應的行,以及與項目的不同信息(名稱,截止日期,狀態等)相對應的列。最後一列應該是'更多'列,它應該顯示項目的其他屬性的下拉列表,只要你按下它。我如何在Grails中做到這一點? 下面是我的list.gsp:Grails中的下拉列表

<calendar:resources lang="en"/> 

<!doctype html> 
<html> 
    <head> 
     <meta name="layout" content="layoutMain"/> 
     <g:set var="entityName" value="${message(code: 'project.label', default: 'Project')}" /> 
     <title><g:message code="default.list.label" args="[entityName]" /></title> 
    </head> 
    <body> 
     <div class="nav" role="navigation"> 
      <ul> 
       <li><g:link class="create" action="create"><button>New Project</button></g:link></li> 
      </ul> 
     </div> 
     <div id="list-project" class="content scaffold-list" role="main"> 
      <h1><g:message code="default.list.label" args="[entityName]" /></h1> 
      <g:if test="${flash.message}"> 
      <div class="message" role="status">${flash.message}</div> 
      </g:if> 
      <table> 
       <thead> 
        <tr> 

         <g:sortableColumn property="name" title="${message(code: 'project.name.label', default: 'Name')}" /> 

         <g:sortableColumn property="dueDate" title="${message(code: 'project.dueDate.label', default: 'Due Date')}" /> 

         <g:sortableColumn property="startDate" title="${message(code: 'project.startDate.label', default: 'Start Date')}" /> 
         <g:sortableColumn property="status" title="${message(code: 'project.name.label', default: 'Status')}" /> 

         <g:sortableColumn property="requirements" title="${message(code: 'project.name.label', default: 'Requirements')}" /> 

         <g:sortableColumn property="design" title="${message(code: 'project.name.label', default: 'Design')}" /> 

         <g:sortableColumn property="development" title="${message(code: 'project.name.label', default: 'Development')}" /> 

         <g:sortableColumn property="qa" title="${message(code: 'project.name.label', default: 'QA')}" /> 

         <g:sortableColumn property="ua" title="${message(code: 'project.name.label', default: 'UA')}" /> 

         <g:sortableColumn property="delivery" title="${message(code: 'project.name.label', default: 'Delivery')}" /> 

         <g:sortableColumn property="more" title="${message(code: 'project.name.label', default: 'More')}" /> 

        </tr> 
       </thead> 
       <tbody> 
       <g:each in="${projectInstanceList}" status="i" var="projectInstance"> 
        <tr class="${(i % 2) == 0 ? 'even' : 'odd'}"> 

         <td><g:link action="show" id="${projectInstance.id}">${fieldValue(bean: projectInstance, field: "name")}</g:link></td> 

         <td><g:formatDate date="${projectInstance.dueDate}" /></td> 

         <td><g:formatDate date="${projectInstance.startDate}" /></td> 

         <td><g:link action="show" id="${projectInstance.id}">${fieldValue(bean: projectInstance, field: "status.name")}</g:link></td> 

         <td><g:link action="show" id="${projectInstance.id}">${fieldValue(bean: projectInstance, field: "requirements.name")}</g:link></td> 

         <td><g:link action="show" id="${projectInstance.id}">${fieldValue(bean: projectInstance, field: "design.name")}</g:link></td> 

         <td><g:link action="show" id="${projectInstance.id}">${fieldValue(bean: projectInstance, field: "development.name")}</g:link></td> 

         <td><g:link action="show" id="${projectInstance.id}">${fieldValue(bean: projectInstance, field: "qa.name")}</g:link></td> 

         <td><g:link action="show" id="${projectInstance.id}">${fieldValue(bean: projectInstance, field: "ua.name")}</g:link></td> 

         <td><g:link action="show" id="${projectInstance.id}">${fieldValue(bean: projectInstance, field: "delivery.name")}</g:link></td> 

         <td><g:link action="show" id="${projectInstance.id}">${fieldValue(bean: projectInstance, field: "delivery.name")}</g:link></td> 
        </tr> 
       </g:each> 
       </tbody> 
      </table> 
      <div class="pagination"> 
       <g:paginate total="${projectInstanceTotal}" /> 
      </div> 
     </div> 
    </body> 
</html> 

回答

1

如果你想使用標準的Grails可以創建在使用g:select標籤Grails的下拉。一個更漂亮的解決方案可能是使用jQuery(或類似的)來顯示隱藏HTML塊。

如果您的項目域看起來像:

class Project { 

    String name 
... 
    // more info 
    String attr1 
    int  attr2 
    boolean isAttr3 

} 

您可以添加一個方便的方法,以您的域名聚集可用於一個下拉框的字段到一個列表(或者可能是另一個對象) 。例如。

// utility getter to aggregate the fields into an array 
def getMoreInfo() { 
    [attr1, attr2, isAttr3] 
} 

然後你可以使用在你的GSP如下:

<td><g:select name="more" from="${projectInstance.moreInfo}" /></td> 
0

在多個列的點擊,您可以發送一個Ajax請求一些動作,可以給你帶來JSON兩個數組:

{extraColumns:{c1,c2}, columnValues:{{v11,v12}, {v21,v22}}} 

在Ajax的響應中,您可以解析JSON併爲行標題和附加列值創建附加列。