【ExtJs】與後台資料庫互動的帶分頁表格組件grid的查詢，extjsgrid
ExtJs的表格組件Grid是可以分頁的，並且這個組件是隨時隨地地與後台資料庫進行這互動。正如VC的MFC中的List表格控制項一樣。
基本上，這個表格控制項作為OA系統的主角，配合《【ExtJs】利用樹狀結構、Border布局與標籤頁刻劃OA介面》（點擊開啟連結）就真的是一個完整的OA系統了。
然而網上對於此組件的敘述非常糟糕，各類雜七雜八的資料，層出不同的後端語言，讓人根本看不明白。下面舉一個例子來說明Grid組件怎麼查詢資料庫的資料，並且分頁現實出來。
一、基本目標
比如Mysql資料庫有一張使用者資訊表，如所示：
然後，我要把它放到Grid.html並且每頁2個結果地顯示出來，如：
二、基本思想
這個項目的目錄結構如：
必要的Ext資源不在上面的目錄結構中。其中Grid.html就是前台顯示頁面，formSubmit.php解釋Grid.html中傳遞過來的分頁資訊，到model.php把Mysql資料庫中的user表查詢出來，再用Ajax打回到Grid.html顯示。
formSubmit.php關鍵是列印出諸如以下的Json字串，Grid.html直接在等待接受如下的資訊，如果接受不到，會一直處於讀取的狀態：
{'success':true,'total':3,'data':[{'id':1,'username':'a','password':'b'},{'id':2,'username':'c','password':'b'},{'id':3,'username':'s','password':'b'}]}
其中total是data中一共有多少項，data是每一項的資料。
三、製作過程
1、Grid.html
首先在HTML僅僅是引入ExtJs的資源：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>ExtGrid</title> <script type="text/javascript" src="../js/ext-all.js"></script> <script type="text/javascript" src="../js/bootstrap.js"></script> <script type="text/javascript" src="../js/ext-lang-zh_CN.js"></script> <link href="../ext-theme-classic/ext-theme-classic-all.css" rel="stylesheet" type="text/css"></head><body></body></html>之後，先構造一個User實體、對象、模型、Object什麼的，反正就是那個意思！ExtJs是這樣要求的，我也不像寫這麼複雜！
Ext.define('user',{extend:'Ext.data.Model',fields:[{name:'id',type:'int'},{name:'username',type:'string'},{name:'password',type:'string'}]});這個對象中的fields中的Json數組，基本上與資料庫中的表格對應，也與下面Grid表格控制項所要顯示的列對應。
其次，定義一個所謂的ExtJs資料中心store。制定這個資料中心的模型是user，還有各項屬性與各類雜七雜八的固定配置。
var userStore=Ext.create('Ext.data.Store',{model:'user',pageSize:2,//每頁顯示數目proxy:{type:'ajax',url:'formSubmit.php',//提供Json字串的頁面reader:{type:'json',root:'data',totalProperty:'total'//總項數}},autoLoad:true});最後還是那個Grid表格控制項，這個ExtJs的表格控制項相當複雜的，要資料中心提供資料支援才能正常運行。
Ext.create('Ext.grid.Panel',{title:'使用者資訊表',renderTo: Ext.getBody(),store:userStore,//此表格控制項的資料由userStore資料中心提供支援columns:[{text:'ID',dataIndex:'id',flex:1},{text:'使用者名稱',dataIndex:'username',flex:1},{text:'密碼',dataIndex:'password',flex:1}],bbar:{xtype:'pagingtoolbar',//底部工具列是分頁工具列store:userStore,//按照userStore的資料進行分頁displayInfo:true//顯示共XX頁，每頁顯示XX條的資訊}});
此控制項的列定義中，text為呈現給使用者的列頭，dataIndex是指明此列到底與資料中心中的model的哪一項對應。比如我在user實體中定義了username這列，那麼這裡“使用者名稱”的資料就是username這列的資料，且為string類型。flex:1代表自動列寬。
因此，整個頁面的代碼如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>ExtGrid</title> <script type="text/javascript" src="../js/ext-all.js"></script> <script type="text/javascript" src="../js/bootstrap.js"></script> <script type="text/javascript" src="../js/ext-lang-zh_CN.js"></script> <link href="../ext-theme-classic/ext-theme-classic-all.css" rel="stylesheet" type="text/css"></head><body></body></html><script> Ext.onReady(function(){ Ext.define('user',{extend:'Ext.data.Model',fields:[{name:'id',type:'int'},{name:'username',type:'string'},{name:'password',type:'string'}]});var userStore=Ext.create('Ext.data.Store',{model:'user',pageSize:2,//每頁顯示數目proxy:{type:'ajax',url:'formSubmit.php',//提供Json字串的頁面reader:{type:'json',root:'data',totalProperty:'total'//總項數}},autoLoad:true}); Ext.create('Ext.grid.Panel',{title:'使用者資訊表',renderTo: Ext.getBody(),store:userStore,//此表格控制項的資料由userStore資料中心提供支援columns:[{text:'ID',dataIndex:'id',flex:1},{text:'使用者名稱',dataIndex:'username',flex:1},{text:'密碼',dataIndex:'password',flex:1}],bbar:{xtype:'pagingtoolbar',//底部工具列是分頁工具列store:userStore,//按照userStore的資料進行分頁displayInfo:true//顯示共XX頁，每頁顯示XX條的資訊}}); });</script>
2、formSubmit.php
這頁，如果使用者在Grid.html定義每一頁顯示2個，那麼無論它翻到哪一頁，你都會收到limit=2這個變數，如果使用者翻到第1頁，那麼你會收到start=0這個變數，如果第2頁，則start=1，換句話說，你會收到兩個變數，你的任務就是利用這兩個變數，構造出諸如如下的Json字串，直接在這頁列印出來！
{'success':true,'total':3,//資料庫一共有多少項，這個值應該是固定的。'data':[{'id':1,'username':'a','password':'b'},{'id':2,'username':'c','password':'b'}]//在本頁中，你要grid.html顯示的東西}
因此便有了如下的語句。其中$total的值，$data字串的構造，直接利用model.php中的方法求出。搞完一大輪，把結果列印。列印$data的時候，如果這個json項，不是最後一項，則添上逗號，搞json數組，最後一項千萬不要有逗號，否則會出現《【JavaScript】數組定義末尾請不要留下逗號》（點擊開啟連結）的問題。
<?php$start=$_REQUEST["start"];$limit=$_REQUEST["limit"];include_once("model.php");$db=new db();$user=$db->getUserInfoByPaging($start,$limit);$total=$db->getUserTotalNum();$data="";for($i=0;$i<count($user);$i++){ $data.="{'id':".$user[$i]['id'].",'username':'".$user[$i]['username']."','password':'".$user[$i]['password']."'}";if(($i+1)!=count($user)){$data.=",";}}echo "{'success':true,'total':{$total},'data':[{$data}]}";?>
Jsp的使用者我建議你直接用Servlet或者SSH直接在一個Java中列印這些東西到頁面了。用諸如如下的語句即可，其中SSH則還需要用HttpServletResponse response=ServletActionContext.getResponse();取出Respond對象。
PrintStream out = new PrintStream(response.getOutputStream()); response.setContentType("text/html;charSet=utf-8"); out.print("列印內容"); Aspx可以利用respond.write來搞。
3、model.php
這個真的沒什麼好說的，直接在《【php】利用原生態的JavaScript Ajax為php進行MVC分層設計，相容IE6》（點擊開啟連結）已經說過了。都是一些很簡單的php操作資料庫代碼而已。反正資料庫的查詢結果通通用一個二維數組儲存起來。就是SSH中的XXList的移植版。
分頁的查詢，查詢通過把資料庫的所有結果查詢出來，再進行分頁，把分頁的結果再放到另一個數組裡面再打回formSubmit.php，這樣必定能夠準確分頁。不要根據什麼id查詢第X個項。如果這張表的id是斷層，某個使用者通過在操作資料庫之類的問題，將有可能出現不準確的分頁。
同時，按正常來說，這裡面只是操作一張表的，因此這個類命名成db沒有所謂，按正常來說，應該命名成user。這樣就真的嚴格按照那些什麼垃圾架構、團隊開發標準了。
<?php function createCon(){ //資料庫的地址是localhost:3306，資料庫使用者名稱（第二項）是root，資料庫密碼（第三項）是root $con=mysql_connect("localhost","root","root"); if(!$con){ die("串連失敗！"); } //要操作test資料庫 mysql_select_db("test",$con); //防止亂碼 mysql_query("set names utf8;"); return $con; } class db{public function getUserTotalNum(){ $con=createCon(); $result=mysql_query("select * from user;"); $userList=array(); for($i=0;$row=mysql_fetch_array($result);$i++){ $userList[$i]['id']=$row['id']; $userList[$i]['username']=$row['username']; $userList[$i]['password']=$row['password']; } mysql_close($con); return count($userList);} public function getUserInfoByPaging($start,$limit){ $con=createCon(); $result=mysql_query("select * from user;"); $userList=array(); for($i=0;$row=mysql_fetch_array($result);$i++){ $userList[$i]['id']=$row['id']; $userList[$i]['username']=$row['username']; $userList[$i]['password']=$row['password']; }$user=array();for($i=0,$j=$start;$j<($start+$limit);$i++,$j++){if(empty($userList[$j])){break;}$user[$i]=$userList[$j];} mysql_close($con); return $user; } } ?>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
