Flexigrid example one: load data without binding server-side request

Let me explain my term here-- bind flexigrid to server-side request
You will find there are a lot examples on Internet, they all use url property like so:

$("#displays").flexigrid(
{
url: 'load_all_displays',
method:'POST',
dataType: 'json',
width: 400,
height: 420,
colModel:[
{display: 'check', name: 'check', width: 30, sortable: true, align: 'left'},
{display: 'ID', name: 'id', width: 90, sortable: true, align: 'left'},
{display: 'description', name: 'description', width: 110, sortable: true, align: 'left'}
]
}
);

The above red words means flexigrid will send a POST request to the load_all_displays path of current web server. Server side should return the data to flexigrid as expected format.

This is easy to understand and good example. But I have good reasons to avoid this way.
Reason 1:
I develop a web service, it will send data to client( browser or not browser). Web server is responsible for generating data, and the client should convert it into expected format for rendering. Maybe one developer use flexigrid to present its data, another guy prefers to use HTML5 table.

Reason 2:
I need a way to add/delete/modify the flexigrid's row without calling server-side API. All these operations should only occur in client-side. After all these are done, client calls server-side API to update data one time.

In my way, JavaScript codes will get all data from web server, translate it into correct format, add the value into flexigrid. Let's see my example below:


var testData = {
"page": 1,
"total": 20,
"rows":
[
{"cell" : ["A", "a group", "0", "d"]},
{"cell" : ["B", "b group", "0", "d"]},
{"cell" : ["C", "c group", "0", "d"]},
{"cell" : ["D", "d group", "0", "d"]}
]
}

function config(groupName, description, deviceNumber, del) {
$("#groups").flexigrid (
{
dataType: 'json',
width: 580,
height: 300,
colModel : [
{display: groupName, name: 'groupName', width: 160, sortable: true, align: 'left'},
{display: description, name: 'description', width: 200, sortable: true, align: 'left'},
{display: deviceNumber, name: 'deviceNumber', width: 100, sortable: true, align: 'left'},
{display: del, name: 'del', width: 40, sortable: true, align: 'left'}
]
}
);
}

function fillData() {
$("#groups").flexAddData(testData);
}


The config function will be called after page loading is done. You will see the simple format for flexigrid in testData variable.
If JavaScript calls fillData function, the testData will be added into flexigrid. Also we need to define a table in web page as following:

<table id="groups" style="display:none" bgcolor="#c4c4c4"></table>

My solution needs more codes, but it also let you control all things when developing your own web site.