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

Я думаю, что установка «columns» ожидает Array, но вместо этого вы передаете String.

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

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