从JSON数据设置JqGrid的colName和colModel

问题描述

我正在尝试在服务器上生成列名称和列模型的列表，并将其提供给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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！