Jquery JQGrid模型和数据的动态布居_Jquery_Jqgrid

Jquery JQGrid模型和数据的动态布居

jquery jqgrid

Jquery JQGrid模型和数据的动态布居,jquery,jqgrid,Jquery,Jqgrid,我正在尝试动态创建网格。我的目标是创建一种动态前端来显示一些数据库表。因此，我需要动态添加/删除列。我需要动态更改列的数据类型我使用了中提供的脚本作为答案我构建了我的网格，它显示了我的列。但没有数据加载到网格中。Firebug显示请求被触发。返回正确的json数据。事实上，grid还触发gridComplete事件。但没有数据显示：-( 有人遇到过这个问题吗？我花了一整天的时间调整jsonReader和colModel，但都没有用我的示例html文件： <!doctype html&

我正在尝试动态创建网格。我的目标是创建一种动态前端来显示一些数据库表。因此，我需要动态添加/删除列。我需要动态更改列的数据类型

我使用了中提供的脚本作为答案

我构建了我的网格，它显示了我的列。但没有数据加载到网格中。Firebug显示请求被触发。返回正确的json数据。事实上，grid还触发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>

在我看来，您似乎忘记了将{}作为

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”

的使用似乎也不是我真正需要的。

非常感谢Oleg

在按照您的建议修改了json的结构，然后进行了一些调试以修复一些属性（如root）之后，我能够让它正常工作。下面是最终的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":"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
    }
}

JSON:

$.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":"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
    }
}

您非常接近..需要进一步更改..就像记录数组必须有一个正确的json名称一样。因此{“dataset”：[…]，…}。我缺少的另一项是将repeatitem设置为false并提供右根属性。只需发送一个值数组并指定repeatitems:true，就可以进一步优化数据集（在jsonReader中）