Grid with JSON using Knockout

[davidfungfParticipant]

Hi,

Based on the example of “gridwithjson.htm”, I modified the code to call the external php program in order to get the data from mysql. No data is displayed even I saw a JSON data response from my php program. Without using the knockout technique, I can display the data in grid layout. Thanks!

Here is my code:

$(document).ready(function () {

var url= “test.php”;

var GridModel = function () {
this.items = ko.observableArray();
var me = this;
$.ajax({
datatype: ‘json’,
url: “test.php”
}).done(function (data) {
var jsonData = $.parseJSON(data);
me.items(jsonData);
});
};

var model = new GridModel();

// prepare the data
var source ={
datatype: “obserablearray”,
datafields: [{ name: ‘tag_id’ },{ name: ‘guard_id’ },{ name: ‘age’ },{ name: ‘gender’ },{ name: ‘guard_name’ },{ name: ‘action_status’ },{ name: ‘created_at’ },{ name: ‘updated_at’ }],
localdata: model.items
};

var dataAdapter = new $.jqx.dataAdapter(source);

$(“#jqxgrid”).jqxGrid({
width: 900,
source: dataAdapter,
rowsheight: 60,
columns: [
{ text: ‘Tag ID’, datafield: ‘tag_id’, width: 80 },
{ text: ‘Guard ID’, datafield: ‘guard_id’, width: 80 },
{ text: ‘Age’, datafield: ‘age’, width: 80},
{ text: ‘Gender’, datafield: ‘gender’, width: 80 },
{ text: ‘Guard Name’, datafield: ‘guard_name’, width: 120},
{ text: ‘Status’, datafield: ‘action_status’, width: 80 },
{ text: ‘Created at’, datafield: ‘created_at’, width: 200 },
{ text: ‘Updated at’, datafield: ‘updated_at’, width: 200 } ]
});

ko.applyBindings(model);
});

[Author]

Posts