Пейджер не работает должным образом в jqGrid с JSON - PullRequest
Новая
       16

Пейджер не работает должным образом в jqGrid с JSON

1 голос
/ 12 января 2012

У меня вопрос по поводу jqGrid и Json.

Это код моего jsp файла с кодом Jquery: 

    <body >

    <script type="text/javascript">
        jq(function() {
            jq("#grid").jqGrid({
                url:'/test-security-client/crud',
                datatype: 'json',
                mtype: 'GET',
                colNames:['Id', 'Log Message'],
                colModel:[
                    {name:'id',index:'id', width:55,editoptions:{readonly:true,size:10},hidden:true},
                    {name:'logMsg',index:'logMsg', width:300,editable:true, editrules:{required:true}, editoptions:{size:10}}
                ],
                rowNum:20,
                rowList:[20,40,60],
                height: 450,
                autowidth: true,
                rownumbers: true,
                pager: '#pager',
                sortname: 'id',
                viewrecords: true,
                sortorder: "asc",
                caption:"Error Logs",
                emptyrecords: "Empty records",
                loadonce: false,
                loadComplete: function() {
                },
                jsonReader : {
                    root: "rows",
                    page: "page",
                    total: "total",
                    records: "records",
                    repeatitems: false,
                    cell: "cell",
                    id: "id"
                }
            });

            jq("#grid").jqGrid('navGrid','#pager',
                    {edit:false,add:false,del:false,search:false},
                    { },
                    { },
                    { }, 
                    { 
                        sopt:['eq', 'ne', 'lt', 'gt', 'cn', 'bw', 'ew'],
                        closeOnEscape: true, 
                            multipleSearch: true, 
                            closeAfterSearch: true }
            );

            jq("#grid").navButtonAdd('#pager',
                {   caption:"Delete", 
                    buttonicon:"ui-icon-trash", 
                    onClickButton: deleteRow,
                    position: "last", 
                    title:"", 
                    cursor: "pointer"
                } 
            );

            jq("#btnFilter").click(function(){
                jq("#grid").jqGrid('searchGrid',
                        {multipleSearch: false, 
                            sopt:['eq']}
                );
            });

        });
    </script>
   ...

И это JSON, который я посылаю: 

{"total":"2","page":"1","records":"28","rows":[{"id":1,"logMsg":"ID of log:1-Requesting authentication. (SMA/SmaAdmin/password)"},{"id":2,"logMsg":"ID of log:2-Authentication received."},{"id":3,"logMsg":"ID of log:3-Test"},{"id":4,"logMsg":"ID of log:4-Test 2"},{"id":5,"logMsg":"ID of log:5-Test 3"},{"id":6,"logMsg":"ID of log:6-Test 4"},{"id":7,"logMsg":"ID of log:7-Test 5"},{"id":8,"logMsg":"ID of log:8-Test 6"},{"id":9,"logMsg":"ID of log:9-Test 7"},{"id":10,"logMsg":"ID of log:10-Test 8"},{"id":11,"logMsg":"ID of log:11-Test 9"},{"id":12,"logMsg":"ID of log:12-Test 10"},{"id":13,"logMsg":"ID of log:13-Test 11"},{"id":14,"logMsg":"ID of log:14-Test 12"},{"id":15,"logMsg":"ID of log:15-Test 13"},{"id":16,"logMsg":"ID of log:16-Test 14"},{"id":17,"logMsg":"ID of log:17-Test 15"},{"id":18,"logMsg":"ID of log:18-Test 16"},{"id":19,"logMsg":"ID of log:19-Test 17"},{"id":20,"logMsg":"ID of log:20-Test 18"},{"id":21,"logMsg":"ID of log:21-Test 19"},{"id":22,"logMsg":"ID of log:22-Test 20"},{"id":23,"logMsg":"ID of log:23-Test 21"},{"id":24,"logMsg":"ID of log:24-Test 22"},{"id":25,"logMsg":"ID of log:25-Test 23"},{"id":26,"logMsg":"ID of log:26-Test 24"},{"id":27,"logMsg":"ID of log:27-Test 25"},{"id":28,"logMsg":"ID of log:28-Test 26"}]}

ЗДЕСЬ МОЙ ВОПРОС: Этот код работает, jqgrid хорошо отображается, вся информация поступает хорошо. НО пейджер не работает хорошо. Потому что я не могу перемещаться между страницами. (У меня есть 2 страницы, и я запускаю jqGrid на странице № 1 ... но я не могу перейти к номеру 2).

Если я изменю свойство loadonce на true .. тогда Работает. Но я не хочу использовать это свойство, и все записи находятся в неправильных позициях.

Поскольку я понимаю, что JSON верен, а код верен, я не знаю, что я делаю неправильно. (Я новичок в jqGrid и JQuery). Я думаю, что у меня есть одна проблема с пейджером.

Есть идеи, что я делаю не так? Нужно ли отправлять Json с информацией о каждой странице?

1 Ответ

2 голосов
/ 12 января 2012

Ваш JSON верен как JSON, но он не соответствует данным, запрашиваемым jqGrid. Давайте я объясню это.

У вас есть rowNum: 20, sortname: 'id', sortorder: "asc". В начале (при первом заполнении сетки) jqGrid отправляет на ваш сервер по URL '/test-security-client/crud' запрос, имеющий page=1&rows=20&sidx=id&sord=asc в конце URL: /test-security-client/crud?page=1&rows=20&sidx=id&sord=asc. Это означает, что в ответ от сервера вы должны включить только первые 20 элементов из набора результатов, отсортированных по id. Таким образом, вы должны отсортировать набор результатов по id (см. sidx=id и sord=asc - ORDER BY id), а затем получить первую страницу (page=1), где размер страницы равен 20 (rows=20 - SELECT (TOP 20)).

Ваш текущий ответ от сервера включает в себя все 28 из набора результатов. Для первой страницы это не критично, но я полагаю, что ответ на запрос второй страницы содержит те же 28 элементов, а не только последние 8 элементов (сортировка очень важна для получения правильных 8 элементов).

Если вы решите проблему в коде своего сервера, в сетке будут отображаться правильные данные при изменении страницы.

...