学步园

这里我解释一下我的术语--将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, sortable: true, align: 'left'},
   {display: 'description', name: 'description', width: 110, sortable: true, 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", "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);
}

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

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

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