Flexigrid例子一: 添加数据但不绑定server-side请求

这里我解释一下我的术语--将flexigrid绑定到server-side请求

你们会从互联网上发现有很多例子，它们都使用了url属性，就像这样：

$("#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,{display: 'description',name: 'description',width: 110,align: 'left'}
  ]
 }
);

上面的url表明flexigrid将对当前web server的load_all_displays路径发出POST请求。服务端应该返回数据，且是flexgrid期望的格式。
这是一个很容易理解且很好的例子。但是我有好的理由避免使用这种方法。

理由1:

我开发了一个web service.它会将数据发送到客户端（浏览器或者不是浏览器）。Web server负责产生数据，客户端负责将数据转换成期望的格式用来渲染。或许一个开发者使用flexigrid表达数据，另一个更喜欢用HTML5的table.

理由2:

我需要一个方法对flexigrid进行添加/修改/删除操作，但是不要调用服务端的API. 所有这些操作应该仅发生在客户端。当所有操作完成后，客户端调用服务端API，一次更新数据。

按照我的方法，JavaScript代码将从web server获取数据，翻译成正确的格式，并把数据添加到flexigrid. 让我们来看一下我下面的例子：

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

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

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

config函数会在页面加载完成的时候被调用。你会看到testData变量里面有简单的flexigrid数据格式。如果JavaScript调用fillData方法，testData会被加到flexigrid中。当然我们也需要在web页面上定义一个table.

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

我的解决方案需要更多的代码。但是它让你在开发网站的时候控制所有的事情。