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, 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>

我的解決方案需要更多的代碼。但是它讓你在開發網站的時候控制所有的事情。