从 JSON 数据设置 JqGrid colUmn 和 co 模型答案

【问题标题】：Setting JqGrid's colName and colModel from JSON data从 JSON 数据设置 JqGrid colUmn 和 co 模型
【发布时间】：2010-07-22 12:34:31
【问题描述】：

我正在尝试在服务器上生成列名列表和列模型并将其提供给 JqGrid。我已成功生成 JSON 并通过 XHR 将其传递给客户端，没有任何抱怨。但是，网格本身并没有出现。我看到一列网格的顶部带有网格的折叠/展开按钮。

这里是 javascript 调用：

var col_names = [];
var col_model = [];
...
...

jQuery(document).ready(function() {
  //XHR to get col_names and col_model
  $.ajax({url: 'http://localhost:8080/metadata',
          success: function(data) {
            col_names = data.names;
            col_model = data.model;
          }
  });
jQuery("#list").jqGrid({
    url:'http://localhost:8080:/data?level=0',
    datatype: 'json',
    mtype: 'GET',
    colNames: col_names,
    colModel: col_model,
    ...
    ...

这是 JSON：

{
    "model": [{"index": "pid", "name": "pid"},
              {"index": "p1", "name": "p1"},
              {"index": "p2", "name": "p2"}],
    "names": ["PID", "P1", "P2"]
}

如果我对 colModel 进行硬编码，则会显示网格。顺便说一句，在响应标头中，内容类型设置为“application/json”。

TIA

【问题讨论】：

您能分享一下您是如何从服务器获取 ColModel 的吗？我拿了 Colnames

标签： json jqgrid

【解决方案1】：

在您发布的代码中，您在 AJAX 调用完成之前初始化 jqGrid：

jQuery(document).ready(function() {
  //XHR to get col_names and col_model
  $.ajax({url: 'http://localhost:8080/metadata',
          success: function(data) {
            col_names = data.names;
            col_model = data.model;
         }
 });
jQuery("#list").jqGrid({
...

您需要重新定位 success 函数中的 jqGrid 代码，或者在调用 $.ajax 时将 async 选项设置为 false。

当 AJAX 调用处于挂起状态时，您可以在页面上显示一个微调器等以保持用户的忙碌。

【讨论】：