JQGrid colModel和數據的動態人口

我正在嘗試動態創建網格。我的目標是創建一種動態前端來顯示一些數據庫表。所以我需要動態添加/刪除列。我需要動態更改列的數據類型。JQGrid colModel和數據的動態人口

我用a similar question提供的腳本作爲答案。

我得到我的網格構造它顯示我的列。但沒有數據被加載到網格中。 Firebug顯示請求被解僱。正確的json數據返回。事實上，網格也會觸發gridComplete事件。但是，沒有數據顯示:-(

有沒有人遇到這個問題，我花了整整一天的調整和jsonReader colModel無濟於事

我的樣本HTML文件：？

<!doctype html> 
<html> 
<link href="../styles/layout.css" rel="stylesheet" type="text/css" /> 
<script type="text/javascript" 
src="/struts2-jquery-grid-showcase/struts/js/base/jquery-1.4.2.js"></script> 
<script type="text/javascript" 
src="/struts2-jquery-grid-showcase/struts/js/base/jquery-ui.js"></script> 
<script type="text/javascript" 
src="/struts2-jquery-grid-showcase/struts/js/plugins/jquery.form.js"></script> 
<script type="text/javascript" 
src="/struts2-jquery-grid-showcase/struts/js/plugins/jquery.subscribe.js"></script> 
<link rel="stylesheet" href="../themes/showcase/jquery-ui.css" 
type="text/css" /> 
<script type="text/javascript" 
src="/struts2-jquery-grid-showcase/struts/js/plugins/jquery.jqGrid.js"></script> 
<script type="text/javascript" 
src="/struts2-jquery-grid-showcase/struts/js/struts2/jquery.struts2.js"></script> 
<script type="text/javascript" src="../js/refData.js"></script> 
<script type="text/javascript"> 
jQuery(document).ready(function() { 
jQuery.struts2_jquery.debug = true; 
jQuery.struts2_jquery.loadAtOnce = true; 
    jQuery.scriptPath = "/struts2-jquery-grid-showcase/struts/"; 
jQuery.struts2_jquery.minSuffix = ""; 
jQuery.ajaxSettings.traditional = true; 

jQuery.ajaxSetup ({ 
    cache: false 
}); 
$.ajax(
     { 
     type: "POST", 
     url: "/struts2-jquery-grid-showcase/refData-table.action", 
     data: "", 
     dataType: "json", 
     success: function(result) 
     { 
       colD = result.gridModel; 
       colN = result.colNames; 
       colM = result.colModel; 

       jQuery("#refData").jqGrid({ 
        jsonReader : { 
         cell: "", 
         id: "0" 
        }, 
        url: 'SomeUrl/Getdata', 
        datatype: 'jsonstring', 
        mtype: 'POST', 
        datastr : colD, 
        colNames:colN, 
        colModel :colM, 
        pager: jQuery('#pager'), 
        rowNum: 5, 
        rowList: [5, 10, 20, 50], 
        viewrecords: true, 
        loadComplete: function(data){alert('loaded');}, 
        loadError: function(xhr,status,error){alert('error');} 
       }) 
     }, 
     error: function(x, e) 
     { 
       alert(x.readyState + " "+ x.status +" "+ e.msg); 
     } 
     }); 
    setTimeout(function() {$("#refData").jqGrid('setGridParam',{datatype:'json'}); },500); 
}); 
</script> 
<h2>Maintain Reference Data</h2> 
<table id="refData"> 
<tr> 
    <td /> 
</tr> 
</table> 
<div id="pager"></div> 
</html>

我的JSON數據：

{"JSON":"success","colModel":[{"editable":true,"edittype":"integer","index":"userInfoId","jsonmap":"userInfoId","key":false,"name":"userInfoId","resizable":true,"search":false,"sortable":true,"width":300},{"editable":true,"edittype":"text","index":"UserID","jsonmap":"userID","key":true,"name":"userID","resizable":true,"search":false,"sortable":true,"width":300}],"colNames":["UserInfo ID","User ID"],"gridModel":[{"userID":"SMI","userInfoId":5},{"userID":"ABC","userInfoId":7},{"userID":"PQR","userInfoId":8},{"userID":"FUR","userInfoId":10},{"userID":"COO","userInfoId":13}],"page":1,"records":56,"rows":15,"sidx":null,"sord":"asc","total":0}

來源

2010-10-05 VJ.

在我看來，你忘了，包括{}作爲包含的gridModel。目前數據的模樣

{ 
    "JSON": "success", 
    "colModel": [ 
     ... 
    ], 
"colNames": [ "UserInfo ID", "User ID" ], 
"gridModel": [ 
     {"userID": "SMI","userInfoId": 5}, 
     {"userID": "ABC","userInfoId": 7}, 
     {"userID": "PQR","userInfoId": 8}, 
     {"userID": "FUR","userInfoId": 10}, 
     {"userID": "COO","userInfoId": 13} 
    ], 
    "page": 1, 
    "records": 56, 
    "rows": 15, 
    "sidx": null, 
    "sord": "asc", 
    "total": 0 
}

代替

{ 
    "JSON": "success", 
    "colModel": [ 
     ... 
    ], 
"colNames": [ "UserInfo ID", "User ID" ], 
"gridModel": { [ 
     {"userID": "SMI","userInfoId": 5}, 
     {"userID": "ABC","userInfoId": 7}, 
     {"userID": "PQR","userInfoId": 8}, 
     {"userID": "FUR","userInfoId": 10}, 
     {"userID": "COO","userInfoId": 13} 
    ], 
    "page": 1, 
    "records": 56, 
    "rows": 15, 
    "total": 0 
    } 
}

的"jsonmap"的使用似乎還我不是真的需要。

來源

2010-10-05 23:32:04 Oleg

你都相當接近。進一步變化要求..喜歡記錄陣列不得不爲適當的json命名。所以{「數據集」：[..]，...}。我錯過的其他項目是將repeatitem設置爲false並給出正確的根attrib。 – 2010-10-06 15:04:08

非常感謝Oleg。

按照您的建議修改我的json的結構，然後調試一些修復某些屬性（比如根），我能夠得到它的工作。這裏是最後的JSON和HTML：

HTML：

$.ajax(
    { 
     type: "POST", 
     url: "refData-table.json", 
     data: "", 
     dataType: "json", 
     success: function(result) 
     { 
      colD = result.gridModel; 
      colN = result.colNames; 
      colM = result.colModel; 

      jQuery("#refData").jqGrid({ 
       jsonReader : { 
        repeatitems: false, 
        root:"dataset", 
        cell: "", 
        id: "0" 
       }, 
       url: 'SomeUrl/Getdata', 
       datatype: 'jsonstring', 
       mtype: 'POST', 
       datastr : colD, 
       colNames:colN, 
       colModel :colM, 
       pager: jQuery('#pager2'), 
       rowNum: 5, 
       rowList: [5, 10, 20, 50], 
       viewrecords: true, 
       loadComplete: function(data){alert('loaded');}, 
       loadError: function(xhr,status,error){alert('error');} 
      }) 
     }, 
     error: function(x, e) 
     { 
      alert(x.readyState + " "+ x.status +" "+ e.msg); 
     } 
    }); 
    setTimeout(function() {$("#refData").jqGrid('setGridParam',{datatype:'json'}); },500);

JSON：

{ 
"JSON":"success", 
"colModel":[ 
    {"editable":true,"edittype":"integer","index":"userInfoId","jsonmap":"userInfoId","key":false,"name":"userInfoId","resizable":true,"search":false,"sortable":true,"width":300}, 
    {"editable":true,"edittype":"text","index":"UserID","jsonmap":"userID","key":true,"name":"userID","resizable":true,"search":false,"sortable":true,"width":300} 
    ], 
"colNames":["UserInfo ID","User ID"], 
"gridModel":{ 
    "dataset":[ 
     {"userID":"SMI","userInfoId":5}, 
     {"userID":"ABC","userInfoId":7}, 
     {"userID":"PQR","userInfoId":8}, 
     {"userID":"FUR","userInfoId":10}, 
     {"userID":"COO","userInfoId":13} 
     ], 
    "page":1, 
    "records":56, 
    "rows":15, 
    "sidx":null, 
    "sord":"asc", 
    "total":0 
    } 
}

來源

2010-10-06 15:10:06

只需發送一組值並指定重複項即可進一步優化您的數據集：true（在jsonReader中） – msanjay 2013-02-06 07:57:54

JQGrid colModel和數據的動態人口

回答

相關問題