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

Question

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

Answer 1

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

如果加载每阿贾克斯静态 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，这些参数在您的情况下可以提高性能而不会有任何缺点。我建议在所有网格中包含参数。