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

问题描述 投票：0回答：2

在从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>
grails
2个回答
0
投票

在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)
0
投票

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

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

我希望这可以帮助别人。如果有任何改进建议，我很乐意纠正它们。欢呼;）

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.