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



我想使用以下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;
}

无论如何,我都成功地获得了专栏。但是我在获得同事方面遇到了问题。

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

注意:rowValue将动态更改

提前感谢!

---- ColName -----var colName = Object.keys(data["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 中添加其余属性。

最新更新