hkalbertl / jquery.appendGrid

The dynamic table input JavaScript plugin
https://appendgrid.azurewebsites.net
MIT License
148 stars 77 forks source link

Handle sub data from Json #99

Closed zorglub01 closed 7 years ago

zorglub01 commented 7 years ago

Hi, First of all, your plugin is really good. I'm using it for a personal project and I have JSON model handling complex structure. Example { "name": , "description": , "metric": { "description": , "estimate": { "wlInf": , "wlSup":, "startDate":, "endDate": }, "keyId": "0" }, "status": { "currentState": , "upDate": "2001-01-01" }, "id": "t1" } And obviously, I'm dealing with a subgrid and I have to display not only the first level of the object's attributs but in the same row some of sub attributs only. I've tried to set the column name with soemthing like 'status.currentState' and it doesn't work. So, I take the permission to amend your codebase as follow. In the file jquery.appendGrid-1.6.2.js, line 1422 (in the method function loadData(tbWhole, records, isInit)

instead of for (var c = 0; c < settings.columns.length; c++) { setCtrlValue(settings, c, settings._rowOrder[r], records[r][settings.columns[c].name]); } I've used the eval function like this for (var c = 0; c < settings.columns.length; c++) { var cColName = settings.columns[c].name; var cData = eval('records['+r+']'+'.'+cColName); setCtrlValue(settings, c, settings._rowOrder[r], cData); } So now, we can setup the column's name as below : { name: 'metric.estimate.startDate', display: 'StartDate',type: 'ui-datepicker', uiOption: {dateFormat: 'yy-mm-dd'}, onChange: checkEndDate }, And it works really fine. This is only a proposal, but this kind of enhancement is really usefull for my case. Do you thing this enhancement could be suitable ? Thank you

hkalbertl commented 7 years ago

Hi zorglub01,

Thanks for interesting in appendGrid. I checked your solution on accessing values on multiple level of object and here is my comment:

I know it can solve the problem on loading data into the grid in your situation but I am afraid using eval is not a good approach. As I know that eval may generate security issues and it haven't be used in appendGrid. There are several articles about avoiding eval in javascript code that can be found easily on Google.

It may be a bit inconvenient but I suggest you to rebuild your data array in single level for displaying in grid, or even submit retrieve from grid. For example:

function convertData(myArray) {
  var newArray = [];
  $.each(myArray, function(index, element) {
    newArray.push({
      name: element.name,
      description: element.description,
      ...
      metricStartDate: element.metric.estimate.startDate,
      metricEndDate: element.metric.estimate.endDate,
      ...
    });
  });
  return newArray ;
}

$(function(){
  // Retrieve data in your format
  var gridData = /* Load your data here */;
  var processedGridData = convertData(gridData);
  $('#appendGrid').appendGrid({
    // Your columns / grid configrations
   initData: processedGridData
  });
});

Hope it can help. Thanks for using appendGrid!

zorglub01 commented 7 years ago

Hi Thank you for the feedback, and your remark is accurate. So, I will change my code even if it requests many changes on my side. i.e. I have to write more code base than I would like :). Anyway, you did a really good job. Thank again for your plugin.