我正在使用 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
});
});
但这对我不起作用..??谁能帮我解决这个问题。?