html - jqxgrid 从 json 字符串中分配列值

Question

我正在使用 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
                    });
                });

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

Answer 1

你可以试试 ..

 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
  });

Answer 2

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

Answer 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
};