为什么我不能将数组分配给 jqgrid 列？答案

【问题标题】：why i cannot assign an array to jqgrid columns?为什么我不能将数组分配给 jqgrid 列？
【发布时间】：2016-09-18 14:53:21
【问题描述】：

我已经编写了以下代码来从数组生成列和列模型，有趣的是，当我在 jqgrid 中对生成的数组进行硬编码时，如下所示，它会生成列，但是当将数组放入变量然后将其分配给colModel 它不会生成列。为什么会这样，我该如何解决？

完整的代码在底部

我使用 JQGrid http://www.trirand.com/blog/jqgrid/jqgrid.html

“https://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/js/jquery.jqGrid.min.js”

这里是硬编码：

//hard coding the array
    $('#myGrid').jqGrid({
        datatype: "local",
        height: 250,
        //colNames:modelArr,
        colModel:[{name:' 9/10/2014'}, {name:' 1/1/2014'}, {name:' 2/10/2014'}],
        viewrecords: true,
        multiselect: true,
        caption: "Manipulating Array Data"
    });

这是完整的代码：

    var colsArray =[];
    var modelArr = [];

    $.ajax({
        url:'http://localhost:53721/Home/GetPurchases',
        dataType:'json',
        success:function(data){
            colsArray=data;

            var str='';

            if(data.length > 0 ){
                str = data[0].PurchaseDates;
                console.log(str);
               colsArray = str.split(',');
            }


            for(var i=0; i < colsArray.length;i++){
                var tmp = {name:colsArray[i]};
                modelArr[i]=tmp;
            }

            //console.log(JSON.stringify(modelArr));

        },
        error:function(){}

    });

    var d1 = JSON.stringify(modelArr);
    console.log(d1);

    $('#myGrid').jqGrid({
        datatype: "local",
        height: 250,
        //colNames:modelArr,
        colModel:[modelArr],         //[{name:' 9/10/2014'}, {name:' 1/1/2014'}, {name:' 2/10/2014'}],
        viewrecords: true,
        multiselect: true,
        caption: "Manipulating Array Data"
    });

【问题讨论】：

标签： jquery jqgrid

【解决方案1】：

硬编码时它起作用的原因：colModel 需要一个数组，但是当你尝试动态创建它时，它以字符串的形式出现。

//use below methods:
// call below functions at grid
----
----
colNames:getColNames(result.colNames), //["Plan_code", "LOB"],
colModel:getColModels(result.colNames),
----
----

//define these function
function getColNames(columndata) {
    var keys = [];
    for(var key in columndata) {
        if (columndata.hasOwnProperty(key)) {
            keys.push(columndata[key]);
        }
    }
    return keys;
}

function  getColModels(modelData) {
    var colNames= getColNames(modelData);
    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;
}

【讨论】：

【解决方案2】：

将 colModel 分配给数组时删除方括号，因为保留它会产生数组数组。

var myGrid = $("#myGrid").jqGrid({
    datatype: "local",
    height: 250,
    colModel:modelArr,
    viewrecords: true,
    multiselect: true,
    caption: "Manipulating Array Data"
});

这是使用您提供的代码的有效sample。
我还在示例末尾添加了两条线，以显示两种分配形状之间的差异，如下图所示

【讨论】：