jqxgrid 从 json 字符串中分配列值答案

【问题标题】：jqxgrid assign columns value from a json stringjqxgrid 从 json 字符串中分配列值
【发布时间】：2012-05-31 13:42:11
【问题描述】：

我正在使用 jqxgrid 在 html 页面的网格中显示数据。

对于从本地 json 数据加载数据，jqxgrid 说下面的代码可以工作。

var source ={
               datatype: "json",
               datafields: [{ name: 'name' },{ name: 'type' },
                           { name: 'calories', type: 'int' },
                           { name: 'totalfat' },{ name: 'protein' },],
                    localdata: jsonData
                };
                var dataAdapter = new $.jqx.dataAdapter(source);
                    $("#jqxgrid").jqxGrid(
                    {
                        width: 670,
                        source: dataAdapter,
                        theme: theme,
                        columnsresize: true,
                        columns: [
                              { text: 'Name', datafield: 'name', width: 250 },
                              { text: 'Beverage Type', datafield: 'type', width: 250 },
                              { text: 'Calories', datafield: 'calories', width: 180 },
                              { text: 'Total Fat', datafield: 'totalfat', width: 120 },
                              { text: 'Protein', datafield: 'protein', minwidth: 120 }
                             ]
                    });
                });

这将起作用。但我的问题是假设我需要动态生成这个数据字段和列值。我为这两个生成 json 字符串并将其存储在 2 个变量中，例如

jsonStr = '[{ name: 'name' },{ name: 'type' },{ name: 'calories', type: 'int' },
             { name: 'totalfat' },{ name: 'protein' },]'

和

 jsonColsStr='[{ text: 'Name', datafield: 'name', width: 250 },
                  { text: 'Beverage Type', datafield: 'type', width: 250 },
                  { text: 'Calories', datafield: 'calories', width: 180 },
                  { text: 'Total Fat', datafield: 'totalfat', width: 120 },
                  { text: 'Protein', datafield: 'protein', minwidth: 120 }
                 ]'

jqxgrid 加载代码将如下所示。

var source ={datatype: "json",
             datafields: jsonStr,
             localdata: jsonData
             };
                var dataAdapter = new $.jqx.dataAdapter(source);
                    $("#jqxgrid").jqxGrid(
                    {
                        width: 670,
                        source: dataAdapter,
                        theme: theme,
                        columnsresize: true,
                        columns: jsonColsStr
                    });
                });

但这对我不起作用..??谁能帮我解决这个问题。？

【问题讨论】：

标签： html jqxgrid

【解决方案1】：

我认为“列”设置需要一个数组，但您传递的是一个字符串。

【讨论】：

【解决方案2】：

你可以试试..

 jsonColsStr = "[" +
               "  { text: \"Name\", datafield: \"name\", width: 250 }," +
               "  { text: \"Beverage Type\", datafield: \"type\", width: 250 }"
               "]"
 var myColsObject = eval(jsonColsStr);  // change to json object

和....

 $("#jqxgrid").jqxGrid(
 {
     width: 670,
     source: dataAdapter,
     theme: theme,
     columnsresize: true,
     columns: myColsObject  // use the object
  });

【讨论】：

我得到了解决这个问题的方法。我可以为此创建一个 json 数组，并通过迭代我正在拥有的集合将每个项目推送到该数组。无论如何感谢您的回复
嗨，我有同样的问题，我想从数据库中加载列定义。你具体是怎么解决的？当我遍历数据库中的 json 并将项目移动到另一个数组时，它没有帮助。

【解决方案3】：

需要先转换成JSON对象，然后传递

var jsonStr = '[{ "name" : "name" }, { "name": "type" }, { "name" : "calories", "type" : "int" }, { "name" : "totalfat" }, { "name" : "protein" }]';
var objectJson = JSON.parse(jsonStr);
console.log(objectJson);
var source = {
    datatype: "json",
    datafields: objectJson,
    localdata: jsonData
};

【讨论】：