0

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

しかし、これは私にとってはうまくいきません..??誰かがこの問題を解決するのを手伝ってくれますか.?

4

3 に答える 3

0

「列」設定には配列が必要だと思いますが、代わりに文字列を渡しています。

于 2012-06-01T07:37:16.887 に答える
0

最初に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
};
于 2016-08-30T06:57:16.573 に答える
0

あなたが試すことができます ..

 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
  });
于 2012-06-25T06:34:22.513 に答える