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，這些參數在您的情況下可以提高性能而不會有任何缺點。我建議在所有網格中包含參數。