jqgrid - ошибка при переходе с 1 страницы на другую - PullRequest
0 голосов
/ 19 декабря 2011

У меня большой набор данных, возвращаемый в формате JSON, так что я получаю 3 страницы, каждая страница имеет 5 строк.

JSON

{
   "mypage":{
      "outerwrapper":{
         "page":"1",
         "total":"3",
         "records":"15",
         "innerwrapper":{
            "rows":[
               {
                  "id":"1",
                  "read": true,
                  "cells": [
                     {
                         "label":"linkimg",
                         "value": "Link-A",
                         "links": [
                             {
                                 "name":"link1"
                             },
                             {
                                 "name":"link2"
                             },
                             {
                                 "name":"link3"
                             }
                         ]
                     }
                  ]
               },
               {
                  "id":"2",
                  "read": false,
                  "cells": [
                     {
                        "label":"linkimg",
                        "value": "Link-B",
                        "links": [
                           {
                              "name":"link1"
                           },
                           {
                              "name":"link2"
                           }
                        ]
                     }
                  ]
               },
               {
                  "id":"3",
                  "read": false,
                  "cells": [
                     {
                        "label":"linkimg",
                        "value": "Link-C",
                        "links": [
                           {
                              "name":"link1"
                           },
                           {
                              "name":"link2"
                           }
                        ]
                     }
                  ]
               },
               {
                  "id":"4",
                  "read": false,
                  "cells": [
                     {
                        "label":"linkimg",
                        "value": "Link-D",
                        "links": [
                           {
                              "name":"link1"
                           },
                           {
                              "name":"link2"
                           }
                        ]
                     }
                  ]
               },
               {
                  "id":"5",
                  "read": false,
                  "cells": [
                     {
                        "label":"linkimg",
                        "value": "Link-E",
                        "links": [
                           {
                              "name":"link1"
                           },
                           {
                              "name":"link2"
                           }
                        ]
                     }
                  ]
               },
               {
                  "id":"6",
                  "read": false,
                  "cells": [
                     {
                        "label":"linkimg",
                        "value": "Link-F",
                        "links": [
                           {
                              "name":"link1"
                           },
                           {
                              "name":"link2"
                           }
                        ]
                     }
                  ]
               },
               {
                  "id":"7",
                  "read": false,                  
                  "cells": [
                     {
                        "label":"linkimg",
                        "value": "Link-G",
                        "links": [
                           {
                              "name":"link1"
                           },
                           {
                              "name":"link2"
                           }
                        ]
                     }
                  ]
               },
               {
                  "id":"8",
                  "read": false,                  
                  "cells": [
                     {
                        "label":"linkimg",
                        "value": "Link-H",
                        "links": [
                           {
                              "name":"link1"
                           },
                           {
                              "name":"link2"
                           }
                        ]
                     }
                  ]
               },
               {
                  "id":"9",
                  "read": false,
                  "cells": [
                     {
                        "label":"linkimg",
                        "value": "Link-I",
                        "links": [
                           {
                              "name":"link1"
                           },
                           {
                              "name":"link2"
                           }
                        ]
                     }
                  ]
               },
               {
                  "id":"10",
                  "read": false,
                  "cells": [
                     {
                        "label":"linkimg",
                        "value": "Link-J",
                        "links": [
                           {
                              "name":"link1"
                           },
                           {
                              "name":"link2"
                           }
                        ]
                     }
                  ]
               },
               {
                  "id":"11",
                  "read": false,
                  "cells": [
                     {
                        "label":"linkimg",
                        "value": "Link-K",
                        "links": [
                           {
                              "name":"link1"
                           },
                           {
                              "name":"link2"
                           }
                        ]
                     }
                  ]
               },
               {
                  "id":"12",
                  "read": false,
                  "cells": [
                     {
                        "label":"linkimg",
                        "value": "Link-L",
                        "links": [
                           {
                              "name":"link1"
                           },
                           {
                              "name":"link2"
                           }
                        ]
                     }
                  ]
               },
               {
                  "id":"13",
                  "read": false,
                  "cells": [
                     {
                        "label":"linkimg",
                        "value": "Link-M",
                        "links": [
                           {
                              "name":"link1"
                           },
                           {
                              "name":"link2"
                           }
                        ]
                     }
                  ]
               },
               {
                  "id":"14",
                  "read": false,
                  "cells": [
                     {
                        "label":"linkimg",
                        "value": "Link-N",
                        "links": [
                           {
                              "name":"link1"
                           },
                           {
                              "name":"link2"
                           }
                        ]
                     }
                  ]
               },
               {
                  "id":"15",
                  "read": true,
                  "cells": [
                     {
                        "label":"linkimg",
                        "value": "Link-O",
                        "links": [
                           {
                              "name":"link1"
                           },
                           {
                              "name":"link2"
                           }
                        ]
                     }
                  ]
               }
            ]
         }
      }
   }
}

Определение JQGrid

$("#myjqgrid").jqGrid({
   url: "jqgrid.json",
   datatype: "json",
   contentType: "application/x-javascript; charset=utf-8",
   colNames:['linkimg'],
   colModel:[
      {name:'linkimg',index:'linkimg', width:100, align:"center", resizable:false}
   ],
   jsonReader: {
       root: "mypage.outerwrapper.innerwrapper.rows",
       repeatitems: false
   },
   rowNum:5,
   rowList:[5,10,15],
   pager: '#Pager',
   sortname: 'id',
   recordpos: 'left',
   multiboxonly:true,
   viewrecords: true,
   sortorder: "desc",
   multiselect: true,
   width: "1406",       
   height: "100%",      
   scrolloffset: 0, 
   loadonce: true,      
   sortable: true,      
   sorttype: "text"
})

Что я пытаюсь сделать

Я перебираю каждую строку в JSON и проверяю свойство "read". Если это true, то для этой строки должно быть установлено значение css text-decoration равное underline.

loadComplete: function(data){
    var x, rowItem;         
    for (x = 0; x < data.mypage.outerwrapper.innerwrapper.rows.length; x++) {
        rowItem = data.mypage.outerwrapper.innerwrapper.rows[x];
        var rowItemRead = rowItem.read;
        if(rowItemRead === true){                   
            $("#" + rowItem.id + " > td").css({"text-decoration":"underline"});
        }
    }
}

Приведенный выше код работает, НО проблема

При переходе со страницы 1 на страницу 2 ИЛИ со страницы 2 на страницу 3 появляется сообщение об ошибке

mypage.outerwrapper

является нулем или не является объектом.

Полный код определения JQGrid (с jsonReader и loadComplete)

$(function (){
    var getValueByName = function (cells, cellItem) {
        var i, count = cells.length, item;
        for (i = 0; i < count; i += 1) {
            item = cells[i];
            if (item.label === cellItem) {
                return item.value;
            }
        }
        return '';
    };
    $("#myjqgrid").jqGrid({
        url: "jqgrid.json",
        datatype: "json",
        contentType: "application/x-javascript; charset=utf-8",
        colNames:['linkimg'],
        colModel:[
            {name:'linkimg',index:'linkimg',jsonmap:function(obj){return getValueByName(obj.cells, "linkimg");}, width:50, align:"center", resizable:false},
        ],
        jsonReader: {
            root: "mypage.outerwrapper.innerwrapper.rows",
            page: "mypage.outerwrapper.page",
            total: "mypage.outerwrapper.total",
            records: "mypage.outerwrapper.records",
            repeatitems: false
        },
        rowNum:5,
        rowList:[5,10,15],
        pager: '#Pager',
        recordpos: 'left',
        multiboxonly:true,
        viewrecords: true,
        sortorder: "desc",
        multiselect: true,
        width: "1406",      
        height: "100%",     
        scrolloffset: 0,    
        loadonce: true,     
        sortable: true,     
        sorttype: "text",
        cache: true,
        loadComplete: function(data){
            var x, items, idName, rowItem;  
            if (typeof data.mypage === "undefined") {
                items = data.rows;
                idName = '_id_';
            }else{
                items = data.mypage.outerwrapper.innerwrapper.rows;
                idName = 'id';
            }
            for (x = 0; x < items.length; x++) {
                rowItem = items[x];
                var rowItemRead = rowItem.read;
                if(rowItemRead === true){

                    $("#" + rowItem[idName] + " > td").css({"text-decoration":"underline"});
                }
            }           
        }
    });
    $("#myjqgrid").jqGrid('navGrid','#Pager',{add:false,del:false,edit:false,position:'right',minWidth:800,maxWidth:1405,minHeight:350,maxHeight:680});
});

UPDATE

$(function (){
    var getValueByName = function (cells, cellItem) {
        var i, count = cells.length, item;
        for (i = 0; i < count; i += 1) {
            item = cells[i];
            if (item.label === cellItem) {
                return item.value;
            }
        }
        return '';
    };
    var setCSS = function (rowId, val, rawObject){
        return rawObject.read? ' style="text-decoration: underline;"' : '';
    }
    $("#myjqgrid").jqGrid({
        url: "jqgrid.json",
        datatype: "json",
        contentType: "application/x-javascript; charset=utf-8",
        colNames:['linkimg','read'],
        colModel:[
            {name:'linkimg',index:'linkimg',jsonmap:function(obj){return getValueByName(obj.cells, "linkimg");}, width:50, align:"center", resizable:false, cellattr:function(obj){return setCSS(rowId, val, rawObject);}},
            {name:'read', hidden:true}
        ],
        jsonReader: {
            root: "mypage.outerwrapper.innerwrapper.rows",
            page: "mypage.outerwrapper.page",
            total: "mypage.outerwrapper.total",
            records: "mypage.outerwrapper.records",
            repeatitems: false
        },
        rowNum:5,
        rowList:[5,10,15],
        pager: '#Pager',
        recordpos: 'left',
        multiboxonly:true,
        viewrecords: true,
        sortorder: "desc",
        multiselect: true,
        width: "1406",      
        height: "100%",     
        scrolloffset: 0,    
        loadonce: true,     
        sortable: true,     
        sorttype: "text",
        cache: true
    });
    $("#myjqgrid").jqGrid('navGrid','#Pager',{add:false,del:false,edit:false});
});

1 Ответ

1 голос
/ 19 декабря 2011

Если вы используете datatype: "json" без loadonce: true, то url: "jqgrid.json" должен * динамически + генерировать запрошенную страницу, а сервер отвечает за сортировку, разбиение на страницы и фильтрацию данных.

Если вы загружаете статические данные JSON для Ajax, например, если "jqgrid.json" - это просто файл, то вам следует использовать опцию loadonce: true jqGrid. В случае jqGrid загрузите данные только один раз и локально кешируйте их во внутренних параметрах data и _index. Затем подкачка, сортировка и фильтрация данных будут выполняться jqGrid локально на стороне клиента.

ОБНОВЛЕНО : После первой загрузки формат параметра data loadComplete обратного вызова будет изменен и будет иметь имена, соответствующие localReader . Так что вы можете просто проверить внутри loadComplete, является ли typeof data.mypage === "undefined". В случае, если loadComplete уже работает с данными local , и вы найдете элементы сетки, которые будут отображаться на текущей странице в качестве элементов массива data.rows. Таким образом, код может быть примерно следующим:

loadComplete: function(data){
    var x, rowItem, items, idName, l;         
    if (typeof data.mypage === "undefined") {
        // load from the local data
        items = data.rows;
        idName = '_id_';
    } else {
        items = data.mypage.outerwrapper.innerwrapper.rows;
        idName = 'id';
    }
    for (x = 0, l = items.length; x < l; x++) {
        rowItem = items[x];
        if(rowItem.read === true){                   
            $("#" + rowItem[idName] + " > td").css({"text-decoration":"underline"});
        }
    }
}

ОБНОВЛЕНО 2 : После того, как вы отправите полный код с данными теста, все будет ясно. Как вы можете увидеть из демо , если вы просто добавите дополнительный скрытый столбец

{name:'read',hidden:true}

сетка будет правильно отображать данные.

Я уже писал вам, что текущий код из loadComplete не эффективен. Теперь я могу дать вам предложение, что вы можете сделать. Сначала вы можете добавить скрытый столбец 'read' (см. Выше) и дополнительно добавить свойство cellattr в столбец 'linkimg', определенный следующим образом

cellattr: function (rowId, val, rawObject) {
    return rawObject.read? ' style="text-decoration: underline;"' : '';
}

После этого вы можете удалить полный код, который вы используете в loadComplete. Как вы можете видеть из следующего демо подход работает. Код будет не только понятен, но и будет работать намного быстрее.

Последнее замечание: я добавил в обе демонстрации параметр gridview: true, который улучшает производительность без каких-либо недостатков в вашем случае. Я рекомендую включить параметр во все ваши сетки.

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