分页后复选框不会保持检查状态

时间:2017-03-29 07:09:32

标签: javascript ajax grails checkbox gsp

每当我检查列表页面上的复选框时,保存它然后转到页面例如2(使用分页)并在那里检查并保存它未选中我的第一页上的复选框。我想过使用AJAX将复选的复选框保存到grails会话但不知道如何做 - 我是初学JS和使用视图。有人可以帮帮我吗? 这是在我的gsp中列出所有公司和复选框的部分:

 <g:form name="company-list-form" action="listCompany">

    <div>
        <g:textField id="search-field" name="query" value="${params.query}"/>

        <span>
            <g:checkBox id="only-blockades-box" name="onlyBlockades" class="submit-on-change" value="${params.onlyBlockades}" title="Pokaż tylko blokady"/>
            <label for="only-blockades-box">Tylko blokady</label>
        </span>

        <g:actionSubmit value="${message(code: 'default.buttons.search', default: 'Szukaj')}" action="listCompany" class="button_orange"/>
        <g:link action="listCompany" class="button_gray"><g:message code="default.buttons.clean" default="Wyczyść"/></g:link>
    </div>

    <div class="padding-top">
        <table class="table_td company-list-table">
            <tbody>
            <tr class="gray2">
                <th class="first">Id</th>
                <th style="max-width: 100px;">Nazwa</th>
                <th>Id Kontrahenta</th>
                <th title="Dostęp do TPO">TPO</th>
                <th style="width: 20px;" title="Dostawa bezpośrednio do magazynu">Dostawa bezpośrednio</th>
                <th style="width: 20px;" title="Możliwość potwierdzania zamówień">Potwierdzanie zamówień</th>
                <th style="width: 20px;" title="Możliwość importowania awizacji z XLS">Import z&nbsp;Excel</th>
                <th style="width: 20px;" title="Możliwość awizowania zamówionych indeksów">Awizacja zam. indeksów</th>
                <th style="width: 20px;" title="Możliwość awizowania tygodniowego">Awizacja tyg.</th>
                <th style="width: 20px;" title="Dostęp jedynie do awizowania tygodniowego">Tylko awizacja tyg.</th>
                <th title="Limit AGD przypadający na każdą kratkę okna prywatnego">AGD</th>
                <th title="Limit rowerów przypadający na każdą kratkę okna prywatnego">Rowery</th>
                <th>Blokady</th>
                <th class="is-blocked-th">Zablokowany?</th>
            </tr>
            <g:each in="${companyInstanceList}" var="company" status="i">
                <tr class="${(i % 2) == 0 ? 'even' : 'odd'} table_td_gray2 ${i + 1 == companyInstanceList?.size() ? 'last' : ''}">
                    <td class="first" style="text-decoration: underline;">
                        <g:link action="editCompany" id="${company?.id}">${company?.id}</g:link>
                    </td>
                    <td>
                        ${company?.name}
                    </td>
                    <td>
                        ${company?.idKontrahenta}
                    </td>
                    <td>
                        <g:checkBox name="tpoAccess.${company?.id}" id="tpo-access-${company?.id}"
                                    checked="${company?.tpoAccess}"/>
                    </td>
                    <td>
                        <g:checkBox name="directDeliveryAvailable.${company?.id}"
                                    id="direct-delivery-available-${company?.id}"
                                    checked="${company?.directDeliveryAvailable}"/>
                    </td>
                    <td>
                        <g:checkBox name="accessToOrderConfirmation.${company?.id}"
                                    id="access-to-order-confirmation-${company?.id}"
                                    checked="${company?.accessToOrderConfirmation}"/>
                    </td>
                    <td>
                        <g:checkBox name="accessToXlsImport.${company?.id}"
                                    id="access-to-xls-import-${company?.id}"
                                    checked="${company?.accessToXlsImport}"/>
                    </td>
                    <td>
                        <g:checkBox name="accessToOrderedProductsAvisation.${company?.id}"
                                    id="access-to-ordered-products-confirmation-${company?.id}"
                                    checked="${company?.accessToOrderedProductsAvisation}"/>
                    </td>
                    <td>
                        <g:checkBox name="accessToLimitedAvisation.${company?.id}"
                                    id="access-to-limited-avisation-${company?.id}"
                                    checked="${company?.accessToLimitedAvisation}"/>
                    </td>
                    <td>
                        <g:checkBox name="accessOnlyToLimitedAvisation.${company?.id}"
                                    id="access-only-to-limited-avisation-${company?.id}"
                                    checked="${company?.accessOnlyToLimitedAvisation}"/>
                    </td>
                    <td>
                        <input type="text" name="agdPrivateWindowLimit.${company?.id}"
                               value="${company?.agdPrivateWindowLimit}"
                               class="shortText" id="agd-private-window-limit-${company?.id}"
                               onchange="validateLimits('agdPrivateWindowLimit.${company?.id}')">
                    </td>
                    <td>
                        <input type="text" name="bicyclePrivateWindowLimit.${company?.id}"
                               value="${company?.bicyclePrivateWindowLimit}"
                               class="shortText" id="bicycle-private-window-limit-${company?.id}"
                               onchange="validateLimits('bicyclePrivateWindowLimit.${company.id}')">
                    </td>
                    <td>
                        <g:link class="button_gray" controller="productGroup" action="list" params="[companyId: company?.id, query: params.query ?: '']">
                            Blokady
                        </g:link>
                    </td>
                    <td>
                        <g:if test="${company?.findBlockades()}">
                            <span title="Dostawca ma aktywne blokady grup towarowych." class="bold large">
                                &#x2713;
                            </span>
                        </g:if>
                    </td>
                </tr>
            </g:each>
            </tbody>
        </table>
    </div>

    <div class="paginateButtons">
        <g:paginate controller="company" action="listCompany" total="${companyInstanceTotal}"
                    params="[query: params.query ?: '']"/>
    </div>

    <div style="float:right;">
        <g:link action="createCompany" class="button_orange">
            <g:message code="default.button.create.label" default="Utwórz"/>
        </g:link>
        <g:actionSubmit action="updateCompanies" name="companyListSubmit" class="button_orange" value="Zapisz"/>
    </div>

</g:form>

这是我与该视图相关联的javascript文件:

    function validateLimits(name) {
    document.getElementsByName(name)[0].value = document.getElementsByName(name)[0].value.replace(/[A-Za-z!@#$%^&*" "]/g, "");
    var quantity = document.getElementsByName(name)[0].value;
    var toBeAvised = 9999;
    if (quantity.indexOf(',') > -1 || quantity.indexOf('.') > -1 || /*quantity == "" ||*/ isNaN(quantity)) {
        alert("Limit musi być liczbą całkowitą");
        document.getElementsByName(name)[0].value = '';
    } else if (parseInt(quantity) > toBeAvised) {
        alert("Podana liczba jest większa niż maksymalny limit równy " +toBeAvised + ".");
        document.getElementsByName(name)[0].value = '';
    } else if (parseInt(quantity) < 0) {
        alert("Limit musi być liczbą dodatnią!");
        document.getElementsByName(name)[0].value = '';
    }
}

这是控制器方法(listCompany):

 def listCompany(Integer max) {
        Person person = Person.read(springSecurityService.principal.id)
        Company comp = person?.company

        params.max = Math.min(max ?: 25, 100)
        params.offset = params.offset ?: 0
        params.readOnly = true

        String q = (params.query as String)?.toLowerCase() ?: ""

        def query = Company.where {
            id != comp?.id
            name =~ "%$q%" || idKontrahenta as String =~ "%$q%"
            if (params.onlyBlockades == "on") {
                id in ProductGroupBlockade.findAllByCompanyIsNotNullAndEnabled(true)*.companyId
            }
        }
        List<Company> companyInstanceList = query.list([max: params.int("max"), offset: params.int("offset"), sort: "name"])
        Integer count = query.count()
        if (flash.message) {
            params.errors = flash.message
        }
        [companyInstanceList: companyInstanceList, companyInstanceTotal: count, companySaved: params.companySaved, errors: params.errors]
    }

我如何解决这个问题,以便保存后我的复选框保持检查状态?现在,每当我转到下一页并在那里保存一些复选框时,它们就会被取消选中。

2 个答案:

答案 0 :(得分:0)

我倾向于使用DataTables来处理这类情况,但这取决于你正在处理的数据量。

如果你有一个相对较小的数据集,比如1000行或更少,你可以使用普通的DataTable,如果你有更多,那么你可能想要使用server side processing DataTable

使用DataTable,您将取消所有Grails分页,为您的表提供ID,并在javascript中创建表格,如:

    <script type="text/javascript">
        $(document).ready( function() {
            $( '#companyListTable' ).DataTable();
        } );
    </script>

所有分页都是在javascript中处理的,并且在浏览表格分页时会保留复选框。

答案 1 :(得分:0)

原因是您需要使用pagination构建自己的搜索参数:

<g:paginate total="${instanceTotal}" params="${search}" />

类似的帖子可以found here,详细了解如何构建此搜索参数作为链接作为其中的评论形式。

编辑添加,如果你想通过jquery检查额外的东西,实际上自己修改分页,即

var something = $('#somFIeld').val() 

并通过javascript向当前分页添加内容,然后阅读this answer