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

长平狐 发布于 2012/08/28 16:36
阅读 1K+
收藏 0

这里我解释一下我的术语--将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>
我的解决方案需要更多的代码。但是它让你在开发网站的时候控制所有的事情。





原文链接:http://blog.csdn.net/sheismylife/article/details/7906955
加载中
返回顶部
顶部