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
});
});
しかし、これは私にとってはうまくいきません..??誰かがこの問題を解決するのを手伝ってくれますか.?