使用动态列和模型在 AJAX 成功上加载 JQGRID答案

【问题标题】：Load JQGRID on AJAX success with dynamic columns and model使用动态列和模型在 AJAX 成功上加载 JQGRID
【发布时间】：2016-09-01 03:13:52
【问题描述】：

我在这方面做了足够多的研究，但仍然是个谜。我从服务器中提取表模式以创建工作正常的列（result.colNames）和模型（result.colModel）。

在相同的结果上，我正在提取表数据（result.colD）以在成功时填充到 JQgrid 中。

成功后网格创建良好，但数据未加载到其中。

这里是代码和截图。

我在这方面花了很多时间，然后在这里发布..希望可以在这里解决。

$.ajax({
                   type: "GET",
                   url: "webapi/do/pullSchema/"+display,
                   data: "",
                   dataType: "json",
                   success: function(result)
                   {

                        colD = JSON.stringify(result.colData); 
                        colN = result.colNames;
                        colM = result.colModel;

                        jQuery("#list").jqGrid({ 
                            data:JSON.parse(colD),datatype: "local",
                            colNames:colN,  colModel :colM,
                            pager: jQuery('#pager'),
                            rowNum: 5,
                            rowList: [5, 10, 20, 50],
                            viewrecords: true,
                            caption: 'DAta from table',
                            loadtext:'Loading, please wait'});


                   },
                   error: function(x, e)
                   {
                        alert(x.readyState + " "+ x.status +" "+ e.msg);   
                   }
                });

以下是样本数据集：

[dbname=null, tables=null, ColNames=[Plan_code, LOB], 
colModel=[{name:'Plan_code',index:'Plan_code',width:255}, {name:'LOB',index:'LOB',width:255}], colData=[{LOB=N, Plan_code=C82ACC}, {LOB=P, Plan_code=C82ACC}, {LOB=B, Plan_code=C82ACC}, {LOB=I, Plan_code=C82ACC}, {LOB=I, Plan_code=C82IRA}, {LOB=R, Plan_code=C82IRA}]

【问题讨论】：

标签： json dynamic jqgrid load

【解决方案1】：

问题在于 colData 不是 jqgrid 期望的 json 格式（这是许多 jqgrid 开发人员常犯的错误）

详情请参阅Here 中的问题。

因此，在您的情况下，解决方法是操纵 colData 并创建正确的 json。

colRows=[{LOB=N, Plan_code=C82ACC}, {LOB=P, Plan_code=C82ACC}, {LOB=B, Plan_code=C82ACC}, {LOB=I, Plan_code=C82ACC}, {LOB=I, Plan_code=C82IRA}, {LOB=R, Plan_code=C82IRA}]

colData = {
"total": 1,
"page": 1,
"records": colRows.count,
rows:[{LOB=N, Plan_code=C82ACC}, {LOB=P, Plan_code=C82ACC}, {LOB=B, Plan_code=C82ACC}, {LOB=I, Plan_code=C82ACC}, {LOB=I, Plan_code=C82IRA}, {LOB=R, Plan_code=C82IRA}]
}



 Send this to jqgrid and then it will know how to display it.

【讨论】：

列长度 MODEL => {name:"Plan_code",index:"Plan_code",width:255},{name:"LOB",index:"LOB",width:255 } JSONStringify => ["{name:\"Plan_code\",index:\"Plan_code\",width:255}","{name:\"LOB\",index:\"LOB\",width:255 }"] parseJSON =>{name:"Plan_code",index:"Plan_code",width:255},{name:"LOB",index:"LOB",width:255} 列名列 => Plan_code,LOB JSON Stringify => ["Plan_code","LOB"] parseJSON =>Plan_code,LOB 下面硬编码，工作正常 //colNames:["Plan_code", "LOB"], //colModel:[{name:"Plan_code",index :"Plan_code",width:255}, {name:"LOB",index:"LOB",width:255}],
对不起，我不知道如何发布我的下一个大解释，所以这样的类型..

【解决方案2】：

问题已解决：

使用下面的函数来创建动态列标题和列模型。函数getColNames（数据）{ 变量键 = []; for(var key in data) { if (data.hasOwnProperty(key)) { 键.push（键）； } }

    return keys;
}

function  getColModels(data) {
    var colNames= getColNames(data);
    var colModelsArray = [];
    for (var i = 0; i < colNames.length; i++) {
        var str;
        if (i === 0) {
            str = {
                name: colNames[i],
                index:colNames[i],
                key:true,
                editable:true
            };
        } else {
            str = {
                name: colNames[i],
                index:colNames[i],
                editable:true
            };
        }
        colModelsArray.push(str);
    }

    return colModelsArray;
}

【讨论】：