ExtJS4.2學習(六)表格分頁與通過背景腳本獲得分頁資料

大家想想，上節中我們做的表格，如果有成千上萬條的資料顯示在表格裡，然後滾動條檢視資料，顯然不是什麼好辦法，而且效率上也不允許。實際上，表格控件對性能的要求較高。在一個頁面上放3個表格，就可以感覺到響應變慢。在表格裡顯示成千上萬條資料，效率就可想而知了。

是以說分頁是必不可少的，接下來我們就來看EXT提供的分頁工具條。

<code> </code><code>var</code> <code>grid = </code><code>new</code> <code>Ext.grid.GridPanel({</code>

<code> </code><code>renderTo:</code><code>'grid'</code><code>, </code><code>//渲染位置</code>

<code> </code><code>autoHeight:</code><code>true</code><code>,</code>

<code> </code><code>store:store,</code>

<code> </code><code>columns:columns, </code><code>//顯示列</code>

<code> </code><code>stripeRows:</code><code>true</code><code>, </code><code>//斑馬線效果</code>

<code> </code><code>//enableColumnMove: false, //禁止拖放列</code>

<code> </code><code>//enableColumnResize: false, //禁止改變列寬度</code>

<code> </code><code>loadMask:</code><code>true</code><code>, </code><code>//顯示遮罩和提示功能,即加載Loading……</code>

<code> </code><code>//forceFit:true //自動填滿表格</code>

<code> </code><code>bbar:</code><code>new</code> <code>Ext.PagingToolbar({</code>

<code> </code><code>pageSize:10, </code><code>//每頁顯示幾條資料</code>

<code> </code><code>store:store, </code>

<code> </code><code>displayInfo:</code><code>true</code><code>, </code><code>//是否顯示資料資訊</code>

<code> </code><code>displayMsg:</code><code>'顯示第 {0} 條到 {1} 條記錄，一共 {2} 條'</code><code>, </code><code>//隻要當displayInfo為true時才有效，用來顯示有資料時的提示資訊，{0},{1},{2}會自動被替換成對應的資料</code>

<code> </code><code>emptyMsg: </code><code>"沒有記錄"</code> <code>//沒有資料時顯示資訊</code>

得到以下的效果，本次我把界面又換了種黑色風格，如下：

上面的資料隻是我簡單的在頁面靜态定義的，但是咱們怎麼通過Java背景傳遞這些資料呢？

我這裡用了servlet技術簡單處理下：

UserServices.java

<code>package</code> <code>cn.com.shuyangyang.services;</code>

<code>import</code> <code>java.io.IOException;</code>

<code>import</code> <code>javax.servlet.ServletException;</code>

<code>import</code> <code>javax.servlet.http.HttpServlet;</code>

<code>import</code> <code>javax.servlet.http.HttpServletRequest;</code>

<code>import</code> <code>javax.servlet.http.HttpServletResponse;</code>

<code> </code><code>* 使用者Servlet</code>

<code> </code><code>* <a href="http://home.51cto.com/index.php?s=/space/1269642" target="_blank">@author</a> shuYangYang</code>

<code> </code><code>* @email:[email protected]</code>

<code> </code><code>* @website:[url]www.shuyangyang.com.cn[/url]</code>

<code>@SuppressWarnings</code><code>(</code><code>"serial"</code><code>)</code>

<code>public</code> <code>class</code> <code>UserServices </code><code>extends</code> <code>HttpServlet {</code>

<code> </code><code><a href=</code><code>"http://home.51cto.com/index.php?s=/space/5017954"</code> <code>target=</code><code>"_blank"</code><code>></code><code>@Override</code><code></a></code>

<code> </code><code>protected</code> <code>void</code> <code>doGet(HttpServletRequest req, HttpServletResponse resp)</code>

<code> </code><code>throws</code> <code>ServletException, IOException {</code>

<code> </code><code>doPost(req,resp);</code>

<code> </code><code>protected</code> <code>void</code> <code>doPost(HttpServletRequest req, HttpServletResponse resp)</code>

<code> </code><code>String start = req.getParameter(</code><code>"start"</code><code>);</code>

<code> </code><code>String limit = req.getParameter(</code><code>"limit"</code><code>);</code>

<code> </code><code>int</code> <code>index = Integer.parseInt(start);</code>

<code> </code><code>int</code> <code>pageSize = Integer.parseInt(limit);</code>

<code> </code><code>System.out.println(index);</code>

<code> </code><code>System.out.println(pageSize);</code>

<code> </code><code>String json = </code><code>"{total:100,root:["</code><code>;</code>

<code> </code><code>for</code><code>(</code><code>int</code> <code>i = index;i<pageSize+index;i++){</code>

<code> </code><code>json +=</code><code>"{id:"</code><code>+i+</code><code>",name:'name"</code><code>+i+</code><code>"',descn:'desc"</code><code>+i+</code><code>"'}"</code><code>;</code>

<code> </code><code>if</code><code>(i!=pageSize + index - </code><code>1</code><code>){</code>

<code> </code><code>resp.getWriter().write(json);</code>

<code> </code><code>}</code><code>catch</code><code>(Exception e){</code>

<code> </code><code>e.printStackTrace();</code>

今晚正在裝MySQL資料庫，這裡就不在資料庫讀取了，怕浪費時間，我在背景模拟對100條資料進行分頁，在獲得了start和limit之後生成JSON格式的資料。

獲得的資料通過測試程式列印出來，如下：

{totalProperty:100,root:[

{id:0,'name:'name0',descn:'desc0'},{id:1,'name:'name1',descn:'desc1'},{id:2,'name:'name2',descn:'desc2'},{id:3,'name:'name3',descn:'desc3'},

{id:4,'name:'name4',descn:'desc4'},{id:5,'name:'name5',descn:'desc5'},{id:6,'name:'name6',descn:'desc6'},{id:7,'name:'name7',descn:'desc7'},

{id:8,'name:'name8',descn:'desc8'},{id:9,'name:'name9',descn:'desc9'}

]}

請記住這個格式，不管你的背景是神馬，是PHP還是C#等，隻要滿足了這樣的格式要求，Ext就可以接受并處理，然後顯示到表格中。簡單看下JSON資料，totalProperty:100這裡表示一共有100條資料。然後就是root:[]，root對應着一個數組，資料裡有10個對象，每個對象都有id,name和descn。這10條資料最後就應該顯示到表格裡。

我的servlet配置如下：

<code><</code><code>servlet</code><code>></code>

<code> </code><code><</code><code>servlet-name</code><code>>userService</</code><code>servlet-name</code><code>></code>

<code> </code><code><</code><code>servlet-class</code><code>>cn.com.shuyangyang.services.UserServices</</code><code>servlet-class</code><code>></code>

<code></</code><code>servlet</code><code>></code>

<code><</code><code>servlet-mapping</code><code>></code>

<code> </code><code><</code><code>url-pattern</code><code>>/userServlet</</code><code>url-pattern</code><code>></code>

<code></</code><code>servlet-mapping</code><code>></code>

接下來對表格的屬性做下調整：

<code>var</code> <code>columns = [</code>

<code> </code><code>{header:</code><code>'編号'</code><code>,dataIndex:</code><code>'id'</code><code>,width:50}, </code><code>//sortable:true 可設定是否為該列進行排序</code>

<code> </code><code>{header:</code><code>'名稱'</code><code>,dataIndex:</code><code>'name'</code><code>,width:80},</code>

<code> </code><code>{header:</code><code>'描述'</code><code>,dataIndex:</code><code>'descn'</code><code>,width:112}</code>

<code>//轉換原始資料為EXT可以顯示的資料</code>

<code>var</code> <code>store = </code><code>new</code> <code>Ext.data.Store({</code>

<code> </code><code>proxy:{</code>

<code> </code><code>url:</code><code>'/ExtJs4.2Pro/userServlet'</code><code>,</code>

<code> </code><code>reader:{</code>

<code> </code><code>totalProperty:</code><code>'total'</code><code>,</code>

<code> </code><code>idProperty:</code><code>'id'</code>

<code> </code><code>fields:[</code>

<code> </code><code>{name:</code><code>'id'</code><code>}, </code><code>//mapping:0 這樣的可以指定列顯示的位置，0代表第1列，可以随意設定列顯示的位置</code>

<code> </code><code>{name:</code><code>'descn'</code><code>},</code>

<code> </code><code>{name:</code><code>'status'</code><code>}</code>

<code>var</code> <code>grid = </code><code>new</code> <code>Ext.grid.GridPanel({</code>

<code> </code><code>renderTo:</code><code>'grid'</code><code>, </code><code>//渲染位置</code>

<code> </code><code>autoHeight:</code><code>true</code><code>,</code>

<code> </code><code>store:store,</code>

<code> </code><code>width:550,</code>

<code> </code><code>columns:columns, </code><code>//顯示列</code>

<code> </code><code>bbar:</code><code>new</code> <code>Ext.PagingToolbar({</code>

<code> </code><code>pageSize:25, </code><code>//每頁顯示幾條資料</code>

<code> </code><code>store:store, </code>

<code> </code><code>displayInfo:</code><code>true</code><code>, </code><code>//是否顯示資料資訊</code>

<code> </code><code>emptyMsg: </code><code>"沒有記錄"</code> <code>//沒有資料時顯示資訊</code>

<code>store.load({params:{start:0,limit:25}});</code>

OK，大功告成，看下效果：

在這裡我發現了個問題，盡管我在前台設定了pageSize為10或者其他數值，但是最終的結果總是第一頁顯示你設定的條數，第二頁就有問題了，暫時還不知道什麼原因。知道的麻煩告訴我下。

本文轉自shyy8712872 51CTO部落格，原文連結：http://blog.51cto.com/shuyangyang/1332885，如需轉載請自行聯系原作者

ExtJS4.2學習(六)表格分頁與通過背景腳本獲得分頁資料

繼續閱讀

json擷取資料的三種方式

JSON的三種解析方式JSON的三種解析方式一、什麼是JSON？二、JSON解析之傳統的JSON解析三、JSON解析之GSON三、JSON解析之FastJSON總結：

Json 的三種解析方式Json簡介Json的三種解析方式

JSON三種建立方式

SpringMVC 傳回json的兩種方式

json傳輸資料解決中文亂碼問題

關于 underscore 中模闆引擎的應用示範樣例

underscore 模闆标簽修改。

Ajax——模闆引擎

使用underscore的template自定義模闆

underscore模闆功能的使用和學習

[HTML5]自定義屬性 data-* 和 jQuery.data 詳解

七牛雲-C#SDK-上傳-前期準備

vue-cli簡介（中文翻譯）

Ajax發送和擷取json資料到Spring mvc 1.spring mvc後端2.web前段

JSONObject包導入異常 java.lang.NoClassDefFoundErrorweb項目的導入包的問題