2013-06-05 32 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并为行标题和附加列值创建附加列。