Как динамически изменить раздел представления, используя событие onChange тега g: select? - PullRequest
Новая
       3

Как динамически изменить раздел представления, используя событие onChange тега g: select?

0 голосов
/ 28 апреля 2019

Мне трудно понять, как по существу перезагрузить секцию моего представления с новыми данными после выбора из 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) я хочу запустить действие (filterByCommittee)который находится в контроллере (Management), используя params.committees (имя поля).упомянутое действие отфильтровывает покупки (список, показанный пользователю) выбранным комитетом.

любая помощь будет принята с благодарностью!

некоторый соответствующий код: 

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>

Ответы [ 2 ]

0 голосов
/ 02 мая 2019

решение, которое я собрал, выглядит примерно так:

в 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 (обратите внимание на строку импорта в начале и тег script в конце) 

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

Надеюсь, это кому-нибудь поможет. если есть какие-либо предложения по улучшению, я буду рад их исправить. ура;)

0 голосов
/ 29 апреля 2019

В файле 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 name = "filterByCommittee.gsp": 

Code to display

В контроллере добавьте параметр id к функции: 

def filterByCommittee(commId)
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...