學習EXT第五日--Grid組件的簡易分頁

關於grid的分頁方式我個人理解有兩種，我只針對對數據庫表或視圖的操作思路做一些講解。

第一種是通過json類的調用，使查詢出來的數據格式化，然後傳回grid所在頁面。在這種方法下，需要.net framework 2.0以上框架和一個json類的支持，當然此方法操作數據表最方便。

第二種則是通過拼接字符串，就可以達到效果。這種方法只需要.net framework1.1框架以上支持就可以了。

下面針對這兩種方法做一個講解。

方法一：此方法還是轉載網上流傳的PHP的操作。

Gird數據

Grid的分頁必須依靠服務端（Server Side）來劃分好每一頁的數據纔可以完成。

本例中的服務端語言是PHP,數據庫是MySQL，用來導出一些隨機的數據。下列腳本的作用是，獲取我們想要的數據，同時這些數據是已分好頁的數據。分頁的參數是由Page Toolbar傳入的變量limit和start所決定的。

$link = mysql_pconnect("test-db.vinylfox.com", "test", "testuser") 
 or die("Could not connect");
mysql_select_db("test") or die("Could not select database");

$sql_count = "SELECT id, name, title, hire_date, active FROM random_employee_data";
$sql = $sql_count . " LIMIT ".$_GET['start'].", ".$_GET['limit'];

$rs_count = mysql_query($sql_count);

$rows = mysql_num_rows($rs_count);

$rs = mysql_query($sql);

while($obj = mysql_fetch_object($rs))
{
 $arr[] = $obj;
}

Echo $_GET['callback'].'({"total":"'.$rows.'","results":'.json_encode($arr).'})'; 

由於每個後臺開發的環境都不盡相同，所以這裏的服務端代碼就不細究了。

怎麼做一個分頁的Grid

本例採用的是ScriptTagProxy，原因是 範例代碼 和 服務端代碼 不是在同一個服務器上（譯註：即“跨域”），而大多數的情況是，在同一個服務器上得到數據，直接用HttpProxy就可以了。

使用DataStore與平時唯一不同的地方，便是需要設置totalProerty屬性。本例中，我們從服務端的腳本計算出“total”這個值，告訴DataStore總共有多少個記錄，這裏指的是所有的記錄數。

var ds = new Ext.data.Store({
   
          proxy: new Ext.data.ScriptTagProxy({
              url: 'http://www.vinylfox.com/yui-ext/examples/grid-paging/grid-paging-data.php'
          }),
   
          reader: new Ext.data.JsonReader({
              root: 'results',
              totalProperty: 'total',
              id: 'id'
          }, [
              {name: 'employee_name', mapping: 'name'},
              {name: 'job_title', mapping: 'title'},
              {name: 'hire_date', mapping: 'hire_date', type: 'date', dateFormat: 'm-d-Y'},
              {name: 'is_active', mapping: 'active'}
          ])
   
      });

分頁欄Toolbar

這裏加入一個分頁欄到Grid的面板中，--差不多完成嘍。

var gridFoot = grid.getView().getFooterPanel(true);

      var paging = new Ext.PagingToolbar(gridFoot, ds, {
          pageSize: 25,
          displayInfo: true,
          displayMsg: 'Displaying results {0} - {1} of {2}',
          emptyMsg: "No results to display"
      });

最後傳入start和limit參數以初始化數據。

ds.load({params:{start:0, limit:25}});

花時間較多的地方是，在後臺如何生成數據，以配合Grid的運作，一旦這些工作OK後，分頁Grid再不是一件難事了。

如果是用asp.net+sql server 2000 大家則需要通過存儲過程來進行對數據表分頁的操作。

方法二：

首先來看一下在頁面初始化grid的操作：

前臺JS：

Ext.onReady(function() ...{
            var myData = [
            ['Apple',29.89,0.24,0.81,'9/1 12:00am'],
            ['Ext',83.81,0.28,0.34,'9/12 12:00am'],
            ['Google',71.72,0.02,0.03,'10/1 12:00am'],
            ['Microsoft',52.55,0.01,0.02,'7/4 12:00am'],
            ['Yahoo!',29.01,0.42,1.47,'5/22 12:00am']
            ];

            var ds = new Ext.data.Store(...{
                proxy: new Ext.data.MemoryProxy(myData),
                reader: new Ext.data.ArrayReader(...{}, [
                    ...{name: 'company'},
                    ...{name: 'price', type: 'float'},
                    ...{name: 'change', type: 'float'},
                    ...{name: 'pctChange', type: 'float'},
                    ...{name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
                ])
            });
            ds.load();

            var colModel = new Ext.grid.ColumnModel([
            ...{id: "company", header: "Company", width: 120, sortable: true, dataIndex: 'company'},
            ...{header: "Price", width: 90, sortable: true, dataIndex: 'price'},
            ...{header: "Change", width: 90, sortable: true, dataIndex: 'change'},
            ...{header: "% Change", width: 90, sortable: true, dataIndex: 'pctChange'},
            ...{header: "Last Updated", width: 120, sortable: true, 
            renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
            ]);

            var grid = new Ext.grid.GridPanel(...{
                el:'grid-example',
                ds: ds, 
                cm: colModel,
                autoExpandColumn: 'company',
                height:350,
                width:600,
                title:'Array Grid'
            });
            grid.render();
            grid.getSelectionModel().selectFirstRow();
            });

前臺HTML：

<div id="grid-example"></div>

大家可以看到，在js裏面，

var myData = [
            ['Apple',29.89,0.24,0.81,'9/1 12:00am'],
            ['Ext',83.81,0.28,0.34,'9/12 12:00am'],
            ['Google',71.72,0.02,0.03,'10/1 12:00am'],
            ['Microsoft',52.55,0.01,0.02,'7/4 12:00am'],
            ['Yahoo!',29.01,0.42,1.47,'5/22 12:00am']
            ];

這裏的代碼則是對數據的加載。所以可以定義一個全局的變量，在這裏我們使用Literal

在前臺中加入代碼

<script language="javascript">    
            <asp:Literal Runat="server" ID="LiteralScript"></asp:Literal>        
        </script>

同時在後臺加入

protected System.Web.UI.WebControls.Literal LiteralScript;

此時在後臺，就可以把查詢出來的數據，通過

StringBuilder InitScript = new StringBuilder();    
InitScript.Append("從數據表查詢出來並格式化後的字符串");
.......
LiteralScript.Text += InitScript.ToString();

這種方式來對myData重新賦值。

具體方式是替換myData中的

['Apple',29.89,0.24,0.81,'9/1 12:00am'],
 ['Ext',83.81,0.28,0.34,'9/12 12:00am'],
['Google',71.72,0.02,0.03,'10/1 12:00am'],
['Microsoft',52.55,0.01,0.02,'7/4 12:00am'],
['Yahoo!',29.01,0.42,1.47,'5/22 12:00am']

通過參數start和limit來進行分頁的操作了。

在前臺加入代碼：ds.load({params:{start:0,limit:10}});