webismymind / editablegrid

EditableGrid is an open source Javascript library aimed at turning HTML tables into advanced editable components. It focuses on simplicity: only a few lines of code are required to get your first table up and running.
http://www.editablegrid.net
Other
795 stars 272 forks source link

getJSON() #44

Closed yanosz closed 9 years ago

yanosz commented 10 years ago

Hello,

it seems like there is no way of extracting all data - is there some "opposite" of loadJSON(.)? Eg editorGrid.getJSON() -> Returns current values as JSON?

Thanks, yanosz

jybeaujean commented 10 years ago

You can get the data with editorGrid.data or editorGrid.dataUnfiltered If you want to pass all data in an Ajax Query : data: this.dataUnfiltered == null ? this.data : this.dataUnfiltered

SunnyMittal commented 10 years ago

Hello, thanks a lot for this blog, it helped me as well. Another question related to the above suggestion.

Is it possible to obtain similar JSON as we specify while providing input to the editable grid ? As that will simplify the task of saving the values back.

In my case dataunfiltered is null, may be because I am not using filter. I do get the data from editableGrid.data but that is organised in a different manner as compared to the input json.

e.g. input json is below { "metadata":[ {"name":"damname","label":"DAM NAME","datatype":"string","bar":true,"editable":false,"values":null,"decimal_point":'.',"thousands_separator":','}, {"name":"12-06am","label":"12 July 06:00 a.m.","datatype":"double(,2, dot, comma, 0, n/a)","bar":false,"editable":true,"values":null,"sortable":false}, {"name":"12-12pm","label":"12 July 12:00 p.m.","datatype":"double(,2, dot, comma, 0, n/a)","bar":false,"editable":true,"values":null} ],

"data":[
{"id":"1","values":{"damname":"abc","12-06am":0.0,"12-12pm":"0.0"}},
{"id":"2","values":{"damname":"abc1","12-06am":"0,0","12-12pm":"0.0"}},
{"id":"3","values":{"damname":"abc2","12-06am":0.5,"12-12pm":"0.0",}}
]

}

but when I obtain the edited json using editableGrid.data object then that is in different format.

webismymind commented 10 years ago

It is true that the inverse method of loadJSON should be available, returning data in the same format. The data format used internally (data and dataUnfiltered) is as it is for historical reasons (when the only supported input format was XML) and is not intended to be used directly.

TODO: getJSON()

SunnyMittal commented 10 years ago

Hi Guys, I have written below js function which suits my purpose, but may be it could be modified easily to generalized way of getting json from editable grid. In my case column headers are also dynamic, so I have added that logic to get the header label by parsing date time.

Transformed data will hold the output of the method at the end.

function yesBtnClick() { var transformedData = {}; transformedData.metadata = []; transformedData.data = [];

// base on the first row we can see how many columns there are  so just user it
var firstRow = editableGrid.data[0];
var firstRowValues = firstRow.values;

// sample values is an object so we have to user
for (var key in firstRowValues) {
    var value = firstRowValues[key];
    if (key === "damname") {
        transformedData.metadata.push({ "name": "damname", "label": "DAM NAME", "datatype": "string", "bar": true, "editable": false, "values": null, "decimal_point": '.', "thousands_separator": ',', "enablesort": false });
    }
    else {
        var dateParts = key.split('-');
        var date = new Date(dateParts[2], dateParts[1] - 1, dateParts[0], dateParts[3], dateParts[4], 0, 0);
        var datetimeString = getDateTimeString(date);

        transformedData.metadata.push({ "name": key, "label": datetimeString, "datatype": "double(,2, dot, comma, 0, n/a)", "bar": false, "editable": true, "values": null, "enablesort": false });
    }
}

for (var rowIndex = 0; rowIndex < editableGrid.data.length; rowIndex++) {
    var values = editableGrid.data[rowIndex].values;
    var updatedValues = JSON.parse(JSON.stringify(values));

    // Read values from the columns object.
    var index = 0;
    for (var prop in updatedValues) {
        if (index > 0) {
            updatedValues[prop] = editableGrid.data[rowIndex].columns[index];
        }

        index++;
    }

    transformedData.data.push({ "id": editableGrid.data[rowIndex].id, "values": updatedValues });
}

}