2012-01-11 116 views
0

這是我第一次嘗試使用JQgrid,我從文檔中弄明白如果我需要在我的colmodel中使用jsonmap屬性。截至目前我得到的所有數據,但是從螢火我看到所有我得到的每一個關口是:jqgrid沒有填充Grid的數據

<td aria-describedby="list_MEMBERID" title="" style="" role="gridcell">&nbsp;</td>

有人能解釋我在做什麼錯什麼呢?

的JSON:

{ 
"ROWS": [ 
    { 
     "ID": 508, 
     "CELLS": { 
      "PHONE": "847-382-8872", 
      "STATE": "IL", 
      "ZIP": 60010, 
      "NAME": "Norton's U.S.A.", 
      "DESC": "We sell only products made in the United States!We offer an eclectic mix of common household items from toys to tools, glassware to garden supplies, fashions to food and so much more. When you shop at Norton's U.S.A, you help keep America working! ", 
      "CITY": "Riverwoods", 
      "ADDR": "400 Lageschulte Street" 
     } 
    } 
], 
"PAGE": 1, 
"RECORDS": 1, 
"TOTAL": 1 
} 

的JavaScript:

$(function(){ 
    $("#list").jqGrid({ 
    url:'cfc/buildData.cfc?method=getDining', 
    datatype: 'json', 
    mtype: 'GET', 
    colNames:['Member ID','Member Name', 'Address','City','Zip Code','State', 'Phone', 'Description'], 
    colModel :[ 
     {name:'MEMBERID', index:'MEMBERID', jsonmap:'MEMBERID', width:60}, 
     {name:'NAME', index:'NAME', jsonmap:'NAME', width:90}, 
     {name:'ADDR', index:'ADDR', jsonmap:'ADDR', width:80, align:'right'}, 
     {name:'CITY', index:'CITY', jsonmap:'CITY', width:80, align:'right'}, 
     {name:'ZIP', index:'ZIP', jsonmap:'ZIP', width:80, align:'right'}, 
     {name:'STATE', index:'STATE', jsonmap:'STATE', width:80, align:'right'}, 
     {name:'PHONE', index:'PHONE', jsonmap:'PHONE', width:80, align:'right'}, 
     {name:'DESC', index:'DESC', jsonmap:'DESC', width:200, sortable:false} 
    ], 
    pager: '#pager', 
    rowNum: 10, 
    rowList:[10,20,30], 
    sortname: 'MEMBERID', 
    sortorder: 'desc', 
    viewrecords: true, 
    gridview: true, 
    caption: 'Lake County Members', 

    jsonReader : { 
     root: "ROWS", 
     page: "PAGE", 
     total: "TOTAL", 
     records: "RECORDS", 
     repeatitems: true, 
     cell: "CELLS", 
     id: "MEMBERID", 
     subgrid: {root:"ROWS", 
      repeatitems: true, 
      cell:"CELLS" 
     } 
    } 

    }); 
}); 

回答

2

The documentationjsonReaderjsonmap是第一個閱讀真的很難。

jsonReader最重要的財產是repeatitems。默認值是repeatitems: true。這意味着,在JSON數據行的格式應該是

{"id" :"1", "cell": ["cell11", "cell12", "cell13"]} 

重要的是要提的是,cell屬性應該有字符串數組的價值是很重要的。 colModeljsonmap屬性將被忽略

如果您只使用jsonReader: {repeatitems: true},則只會覆蓋默認jsonReader的一個屬性。因此,這代表在JSON輸入該行的數據的格式應該是

{"id": "abc", "col1": false, "col3": 123, "col2": "cell12"} 

在這種情況下沒有屬性cell在輸入中使用。該列的數據將通過名稱標識爲,而不是按照cell陣列中的位置標識。如果已定義,則屬性名稱col1,col2,col3可以來自name財產colModel或從jsonmap

在輸入的更復雜的格式的情況下,像

{"id": "abc", "col1": false, "coordinates": {"x": 123, "y": "cell12"}} 

可以定義爲xjsonmap: coordinates.x和用於yjsonmap: coordinates.y

在您的例子的情況下,我會建議你改變JSON數據格式

{ 
    "ROWS": [ 
     { 
      "ID": 508, 
      "PHONE": "847-382-8872", 
      "STATE": "IL", 
      "ZIP": 60010, 
      "NAME": "Norton's U.S.A.", 
      "DESC": "We sell only products made in the United States!We offer an eclectic mix of common household items from toys to tools, glassware to garden supplies, fashions to food and so much more. When you shop at Norton's U.S.A, you help keep America working! ", 
      "CITY": "Riverwoods", 
      "ADDR": "400 Lageschulte Street" 
     } 
    ], 
    "PAGE": 1, 
    "RECORDS": 1, 
    "TOTAL": 1 
} 
  • ,因爲你不包括在JSON輸入任何數據從列模型中移除'MEMBERID'
  • 刪除sortname: 'MEMBERID'或將其更改爲某些現有列。
  • 除去所有jsonmap屬性

jsonReader應該用作

jsonReader : { 
    root: "ROWS", 
    page: "PAGE", 
    total: "TOTAL", 
    records: "RECORDS", 
    repeatitems: false, 
    id: "ID", 
} 

網格(對於表中的<tr>元素的id)的行的ID的值將是從得到JSON輸入的'ID'屬性。您應該注意標識符的值:在整個頁面上必須有唯一的

經過上述改變,網格會顯示數據:見the demo。我只添加了height: 'auto'參數以減少網格中不需要的空間的大小。