jqGrid 生成行但不显示任何数据

Posted 2023-02-15

【中文标题】jqGrid 生成行但不显示任何数据

【英文标题】：jqGrid generating rows but not displaying any data

【发布时间】：2016-11-13 21:53:08

【问题描述】：

我正在尝试在 jqGrid 上显示 ajax 数据，虽然它会生成空行，但不会显示任何数据。对此的任何帮助将不胜感激。 Click to view copy of my jqGrid - 这是我的代码：

html：

<table id="list47"></table>
<div id="plist47"></div>

JQuery 代码：

var mydata=[ "id": "83123a", Name: "Name 1", "PackageCode": "83123a" ,
                 "id": "83432a", Name: "Name 3", "PackageCode": "83432a" ,
                 "id": "83566a", Name: "Name 2", "PackageCode": "83566a" ]

var headerData=["id","Name","PackageCode"];

//As header data is taken from another API I would need it in a separate array like the above.

    jQuery("#list47").jqGrid(
        data: mydata,
        datatype: "local",
        height: 150,
        rowNum: 10,
        colNames: headerData,
        colModel: headerData,
        rowList: [10,20,30],
        pager: "#plist47",
        viewrecords: true,
        caption: "json Data grid"
    );

我什至尝试了以下方法，但在这方面也没有任何进展：

var md=[ "id": "83123a", Name: "Name 1", "PackageCode": "83123a" ,
                 "id": "83432a", Name: "Name 3", "PackageCode": "83432a" ,
                 "id": "83566a", Name: "Name 2", "PackageCode": "83566a" ]

var he=["id","Name","PackageCode"];

jQuery("#list47").jqGrid(
    //data: md,
    datatype: "local",
    height: 150,
    rowNum: 10,
    colNames: he,
    colModel: he,
    rowList: [10,20,30],
    pager: "#plist47",
    viewrecords: true,
     caption: "json data grid"
);
for(var i=0;i<md.length;i++)
 jQuery("#list47").addRowData(i+1,md[i]);
 

【参考方案1】：

问题是你的 colModel 没有像 jqGrid 所期望的那样定义。

Col Model Options

为了解决您的问题，我添加了一个 colmodel 变量来保存正确的 colmodel 定义并将 colModel 网格选项设置为该变量。

这是解决方案的JsFiddle 链接。

var md=[ "id": "83123a", Name: "Name 1", "PackageCode": "83123a" ,
                 "id": "83432a", Name: "Name 3", "PackageCode": "83432a" ,
                 "id": "83566a", Name: "Name 2", "PackageCode": "83566a" ]

var he=["id","Name","PackageCode"];

var colmodel= [name:'id', index:'id', width:55,
              name:'Name', index:'Name' ,
                name:'PackageCode', index:'PackageCode']


jQuery("#list47").jqGrid(
    //data: md,
    datatype: "local",
    height: 150,
    rowNum: 10,
    colNames: he,
    colModel: colmodel,
    rowList: [10,20,30],
    pager: "#plist47",
    viewrecords: true,
     caption: "json data grid"
);
for(var i=0;i<md.length;i++)
 jQuery("#list47").addRowData(i+1,md[i]);
 

你也可以做而没有 addRowData for 循环。

jQuery("#list47").jqGrid(
    data: md,
    datatype: "local",
    height: 150,
    rowNum: 10,
    colNames: he,
    colModel: colmodel,
    rowList: [10,20,30],
    pager: "#plist47",
    viewrecords: true,
     caption: "json data grid"
);

【讨论】：

+1 用于正确指出问题的原因 - colModel 的值。我仍然建议 *永远不要通过调用 addRowData 来填充循环中的网格。这是填充网格的最糟糕的方式。而不是那个应该只使用data: md 并添加gridview: true 选项。见jsfiddle.net/adgptkvj/265

@Oleg 谢谢这就是为什么我在回答的最后指出了这一点。

【参考方案2】：

谢谢！这个想法对我有用。我只需要像这样将我的数据相应地解析到 colModel 中：

var md=[ "id": "83123a", Name: "Name 1", "PackageCode": "83123a" ,
                 "id": "83432a", Name: "Name 3", "PackageCode": "83432a" ,
                 "id": "83566a", Name: "Name 2", "PackageCode": "83566a" ]

var he=["id","Name","PackageCode"];
var c=[];

for(var i=0;i<he.length;i++)

  c.push('"name":"'+he[i]+'","index":"'+he[i]+'"');

var colmodel="["+c+"]"

//var colmodel= [name:'id', index:'id', width:55,
         //     name:'Name', index:'Name' ,
          //      name:'PackageCode', index:'PackageCode']

  // c.push('"name":"'+he[i]+'","index":"'+he[i]+'"'+'"formatter":'+formatTitle+'');                  
jQuery("#list47").jqGrid(
    //data: md,
    datatype: "local",
    height: 150,
    rowNum: 10,
    colNames: he,
    colModel: jQuery.parseJSON(colmodel),
    rowList: [10,20,30],
    pager: "#plist47",
    viewrecords: true,
     caption: "json data grid"
);
for(var i=0;i<md.length;i++)
 jQuery("#list47").addRowData(i+1,md[i]);
 

【讨论】：

你如何解析 colModel 不是问题中的问题，因此你不应该接受你的答案。