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和数据的动态人口

回答

相关问题