如何在JqGrid中动态绑定行和列？

Question

我想用下面的JSON组成一个JqGrid，下面的JSON可能会经常变化。

{
  "rowvalue": [
    {
        "company": "test",
        "price": 98,
        "Change": 8,
        "perchange": 8,
        "LastUpdated": "2",
        "companyid": 2
    },
    {
        "company": "test123",
        "price": 1,
        "Change": 1,
        "perchange": 1,
        "LastUpdated": "1",
        "companyid": 3
    },
    {
        "company": "abc",
        "price": 1234,
        "Change": 123,
        "perchange": 1,
        "LastUpdated": "1",
        "companyid": 1
    }
  ]
}

这是我的代码：

$("#table_div" + chartId).empty().jqGrid({
  datatype: 'json',
  data: data,
  jsonReader: {
    repeatitems: false,
  },
  colNames: getColNames(data),
  colModel: getColModels(data),
  rowNum: 50,
  rowList: [50, 100, 150, 200],
  autowidth: true,
  height: '100%',
  shrinkToFit: false,
  gridview: true,
  autoencode: true,
  sortorder: "asc",
  viewrecords: true,
  ignoreCase: true,
  hoverrows: true,
  caption: title
});

function getColNames(data) {
  var keys = [];

  for (var i = 0; i < data.rowValue.length; i++) {
    for (var key in data.rowValue[i]) {
      if (data.rowValue[i].hasOwnProperty(key)) {
        keys.push(key);
      }
    }

    break;
  }
  
  return keys;
}

function getColModels(data) {
  var colNames = getColNames(data);
  var colModelsArray = [];

  for (var i = 0; i < data.rowValue.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);
  }

  console.log(colModelsArray)

  return colModelsArray;
}

无论如何我都成功地获得了专栏。但是我在获取 colmodels 时遇到了问题。

我是 JavaScript 的新手。任何帮助将不胜感激。

注意：rowValue会动态变化

提前致谢！

Answer 1

---- 列名 ----- var colName = Object.keys(数据["rowvalue"][0]);

---- ColModel ----
var colModel = [];
for(var i=0; i<colName.length; i++) {
    var tempColModel = {};
    tempColModel["name"] = colName[i];
    tempColModel["id"] = colName[i];
    tempColModel["width"] = 90;
    colModel.push(tempColModel);
}

请根据您的情况在 ColModel 中添加其余属性。

如何在JqGrid中动态绑定行和列？

How to dynamically bind and rows and column in JqGrid?

javascript

jquery

json

jqgrid