2011-12-19 8 views
0

大量のデータセットがJSON形式で戻って来るように、3ページ、各ページに5行あります。jqgrid - 1ページから別のページに移動するときにエラーが発生する

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定義私はJSONの各行をループしてチェックしてい

をやろうとしている何

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

の場合プロパティ。 trueの場合は、に設定されたtext-decorationの行が必要です。

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"}); 
     } 
    } 
} 

コードの上記部分が作動しているが、問題は

Iは、ページ1からページ2 OR 2ページから3ページに移動すると、私はエラーメッセージ

を得ることです
mypage.outerwrapper 

はnullまたはオブジェクトではありません。 (jsonReaderとloadComplete付き)

全JQGrid定義コード

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

'' "jqgrid.json" 'がファイルへのURLの場合、または要求されたページを表すデータをサーバーが動的に生成するURLの場合は、 – Oleg

+0

'' jqgrid.json "'はローカルJSONファイルのURLです。 – techlead

答えて

関連する問題