jqgrid - 从一页移动到另一页时出错答案

【问题标题】：jqgrid - error when moving from 1 page to anotherjqgrid - 从一页移动到另一页时出错
【发布时间】：2011-12-19 17:05:31
【问题描述】：

我有一个以 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});
});

更新

$(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});
});

【问题讨论】：

如果"jqgrid.json" 是文件的 URL 还是服务器动态生成代表请求页面的数据的 URL？
"jqgrid.json" 是本地 JSON 文件的 URL。

标签： json jqgrid

【解决方案1】：

如果你使用datatype: "json"而不使用loadonce: true，那么url: "jqgrid.json"应该*动态+生成请求的页面，服务器负责数据的排序、分页和过滤。

如果您为每个 Ajax 加载 static JSON 数据，例如如果“jqgrid.json”只是一个文件，那么您应该使用 jqGrid 的loadonce: true 选项。在 jqGrid 的情况下，只加载一次数据并将其缓存在内部参数data 和_index 中。然后jqGrid在客户端本地对数据进行分页、排序和过滤。

更新：在第一次加载后loadComplete回调的data参数的格式将被改变并且名称对应于localReader。所以你可以测试loadComplete内部是否typeof data.mypage === "undefined"。如果loadComplete 已经与本地数据一起工作，您会发现网格中的项目将作为数组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：在您发布包含测试数据的完整代码后，一切都会变得清晰。如果您只是添加额外的隐藏列，您如何从the demo 看到

{name:'read',hidden:true}

网格将正确显示数据。

我之前给你写过，loadComplete 的当前代码无效。现在我可以给你建议你能做什么。您可以先添加隐藏的'read' 列（见上文），然后将cellattr 属性添加到定义如下的'linkimg' 列中

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

之后您可以删除您在loadComplete中使用的完整代码。您如何从next demo 看到该方法有效。代码不仅清晰，而且运行速度更快。

最后一句话：我在两个演示中都添加了参数gridview: true，它可以提高性能，而对您的情况没有任何缺点。我建议在所有网格中包含该参数。

【讨论】：

我已经更新了我的 jqgrid 定义。还是不行。
@SK11：我用其他信息更新了我的答案。它应该可以解决您的问题。如果您在解决方案的loadComplete 中遇到性能问题，我建议您查看the answer 和this one，它们描述了如何遍历loadComplete 中的数据的另一种方法。
谢谢。我现在没有收到任何错误消息。但是，当我从一个页面导航到另一个页面时，该行的 css underline 状态丢失了。
@SK11：您能否发布更多您使用的完整代码。您当前的代码没有读取您使用的数据所需的jsonReader。您也发布了loadComplete 并且在网格定义之外。您能否发布可用于重现您的问题的代码？
我当前的代码有jsonReader。但是我已经在标题完整的 JQGrid 定义代码（带有 jsonReader 和 loadComplete） 下为您发布了完整的 jqgrid 定义。