Question

我很难确定如何从DropDownMenu中选择从选择后的新数据重新加载视图的一部分 （在grails 3.3.9中））

我尝试在grails中使用按钮的相同约定，这很简单：

<g:select class="btn bg-primary" action="filterByCommittee" controller="management"
 from="${Committee.list()}" optionKey="id" optionValue="${name}" 
name="committees" value="${committees}" noSelection="${['null':'Select..']}"/>

以上代码表示（AFAIK）我想使用params.committees（字段名称）触发驻留在控制器（管理）中的动作（filterByCommittee）。上述操作将过滤所选委员会的购买（向用户显示的列表）。

任何帮助将不胜感激！

一些相关代码：

class ManagementController {

    PurchaseService purchaseService
    CommitteeService committeeService

    def index(Integer max) {
        params.max = Math.min(max ?: 10, 100)
        List<Purchase> purchaseList = Purchase.findAllByAccountantApprovalInList(Approval.findAllByApproved(true))
        }
        respond purchaseList, model:[purchaseCount: purchaseService.count()]
    }

    def filterByCommittee() {
        Committee selectedCommittee = Committee.findByName(params.committees)
        List<User> userList = User.findAllByCommittee(selectedCommittee)
        List<Purchase> purchaseList = Purchase.findAllByUserInList(userList)
        respond purchaseList, model:[purchaseCount: purchaseService.count()]
    }
}

class Committee {

    String name

    static hasMany = [users:User, summaries:Summary]

    static constraints = {
        users(nullable: true)
        summaries(nullable: true)
    }

    @Override
    public String toString() {
        return name
    }
}

<!DOCTYPE html>
<!--<%@ page import="attainrvtwo.Committee" contentType="text/html;charset=UTF-8" %>-->
<html xmlns:g="http://www.w3.org/1999/html">
<body>
<a href="#list-purchase" class="skip" tabindex="-1"><g:message code="default.link.skip.label" default="Skip to content&hellip;"/></a>
<div class="nav" role="navigation">
    <ul>
        <li><g:select class="btn bg-primary" action="filterByCommittee" controller="management" from="${Committee.list()}" optionKey="id" optionValue="${name}" name="committees" value="${committees}" noSelection="${['null':'Select..']}"/></li>
    </ul>
</div>
<div id="list-purchase" 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>
    <f:table collection="${purchaseList}" />

    <div class="pagination">
        <g:paginate total="${purchaseCount ?: 0}" />
    </div>
</div>
</body>
</html>

Answer 1

在gsp文件中，选择时（用相应的值填充“”）：

<g:select id="" name="" value="" from='${}' optionKey="id"
    onchange="optionChanged(this.value);" >
</g:select>
<div id="tabla"  style="display:block;"></div>

在同一个gsp文件中：

<script>
   function optionChanged(committeeId) { 
      <g:remoteFunction controller="management" action="filterByCommittee"
          update="tabla" params="'commId='+committeeId"/>
   }
</script>

在另一个gsp文件名=“ filterByCommittee.gsp”：

Code to display

在控制器中，将id参数添加到函数中：

def filterByCommittee(commId)

Answer 2

我拼凑的解决方案看起来像这样：

在 ManagementController

中

package attainrvtwo

class ManagementController {

    CommitteeService committeeService
    List<Purchase> purchaseList

    def filterByCommittee() {
        session.filterPurchases = true
        Committee selectedCommittee = committeeService.get(params.id)
        List<User> userList = User.findAllByCommittee(selectedCommittee)
        purchaseList = Purchase.findAllByUserInList(userList)
        respond purchaseList, model:[purchaseCount: purchaseService.count()]
    }
}

在管理视图的 index.gsp 文件中

<!DOCTYPE html>
<!--<%@ page import="attainrvtwo.Committee" contentType="text/html;charset=UTF-8" %>-->
<html xmlns:g="http://www.w3.org/1999/html">
<head>
    <meta name="layout" content="main" />
    <g:set var="entityName" value="${message(code: 'purchase.label', default: 'Purchase')}" />
    <title></title>
</head>
<body>
<a href="#list-purchase" class="skip" tabindex="-1"><g:message code="default.link.skip.label" default="Skip to content&hellip;"/></a>
<div class="nav" role="navigation">
    <ul>
<!--        <li><a class="home" href="${createLink(uri: '/volunteer/index')}"><g:message code="default.home.label"/></a></li>-->
        <li><g:select class="btn bg-primary" id="commDDLid" name="committeeDDL" action="filterByCommittee" controller="management" from="${Committee.list()}" optionKey="id" optionValue="${name}" value="${committees}" noSelection="${['null':'Select..']}" onchange="goToPage(this.value)"/></li>
    </ul>
</div>
<div id="list-purchase" 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>
    <f:table collection="${purchaseList}" />

    <div class="pagination">
        <g:paginate total="${purchaseCount ?: 0}" />
    </div>
</div>
<script type="text/javascript">
    function goToPage(requestParams) {
    window.location.href="${'/management/filterByCommittee'}" + "/" + requestParams;
    }
</script>
</body>
</html>

然后我还添加了 filterByCommitty.gsp 视图，该视图基本上是我的 index.gsp 的副本（请注意，导入行位于开头，脚本标记位于结尾）

<!DOCTYPE html>
<!--<%@ page import="attainrvtwo.Committee" contentType="text/html;charset=UTF-8" %>-->
<html xmlns:g="http://www.w3.org/1999/html">
<head>
    <meta name="layout" content="main" />
    <g:set var="entityName" value="${message(code: 'purchase.label', default: 'Purchase')}" />
    <title></title>
</head>
<body>
<a href="#list-purchase" class="skip" tabindex="-1"><g:message code="default.link.skip.label" default="Skip to content&hellip;"/></a>
<div class="nav" role="navigation">
    <ul>
        <li><g:select class="btn bg-primary" id="commDDLid" name="committeeDDL" action="filterByCommittee" controller="management" from="${Committee.list()}" optionKey="id" optionValue="${name}" value="${committees}" noSelection="${['null':'Select..']}" onchange="goToPage(this.value)"/></li>
    </ul>
</div>
<div id="list-purchase" 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>
    <f:table collection="${purchaseList}" />

    <div class="pagination">
        <g:paginate total="${purchaseCount ?: 0}" />
    </div>
</div>
<script type="text/javascript">
    function goToPage(requestParams) {
    window.location.href="${'/management/filterByCommittee'}" + "/" + requestParams;
    }
</script>
</body>
</html>

我希望这对某人有帮助。如果有任何改进建议，我将很乐意予以纠正。欢呼;）

如何使用g：select标记的onChange事件动态更改视图的一部分？

2 个答案: