Flexigrid Example 1: add data without binding server-side requests

Here I will explain my terminology-binding flexigrid to server-side requests

You will find many examples on the Internet, all of which use URL attributes, like this:

 
$ ("# 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 URL indicates that flexigrid will send a POST request to the load_all_displays path of the current web server. The server should return data in the expected format of FlexGrid.
This is an easy-to-understand and good example. But I have a good reason to avoid using this method.

Reason 1:

I developed a Web service that sends data to the client (a browser or not a browser ). The Web server is responsible for generating data, and the client is responsible for converting the data into the expected format for rendering. Maybe one developer uses flexigrid to express data, and the other prefers HTML5 tables.

Reason 2:

I need a method to add, modify, or delete flexigrid, but do not call the API of the server. All these operations should only happen on the client. After all the operations are completed, the client calls the Server API to update the data at a time.

Follow my methods, JavaScriptCodeTranslate the data obtained from the Web server into the correct format and add the data to flexigrid. Let's take a look at 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 is called when the page is loaded. You will see the simple flexigrid data format in the testdata variable. If JavaScript calls the filldata method, testdata is added to flexigrid. Of course, we also need to define a table on the web page.

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

My solution requires more code. But it allows you to control everything when developing a website.