从JSON数据设置JqGrid的colName和colModel [英] Setting JqGrid's colName and colModel from JSON data

问题描述

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

I am trying to generate the list of column names and the column model on the server and feed it to JqGrid. I have successfully generated the JSON and passed it to the client over XHR, no complaints there. But, the grid itself doesn't show up. I see one column of the grid with the grid's fold/unfold button at the top.

这是JavaScript调用:

Here is the javascript call:

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进行硬编码，则会显示网格. 顺便说一句，在响应头中，content-type设置为"application/json".

The grid gets displayed if I hard-code the colModel. BTW, in the response headers, content-type is set to "application/json".

TIA

推荐答案

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

In your posted code, you are initializing the jqGrid before the AJAX call completes:

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.

You need to either relocate the jqGrid code in the success function, or set the async option to false in your call to $.ajax.

在AJAX呼叫处于待处理状态时，您可以在页面上显示微调框等，以使用户保持忙碌状态.

While the AJAX call is pending, you can display a spinner or such on the page to keep the user occupied.

这篇关于从JSON数据设置JqGrid的colName和colModel的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！