ExtJS4.2學習(20)動态資料表格之前幾章總結篇1

本節采用技術：SpringMVC+Jetty+ExtJs4.2+Maven+MySQL5.1以上+SLF4J（前幾節學習的大家不知道記住了沒，現在來總結複習下，順便加點新技術）學習本節前的準備：Eclipse高版本，Jetty插件，Maven插件，JDK1.7

休息了好久沒開動教程了，确實最近太累了，大家見諒！先來看下效果，本章節是連續篇，今天是續篇的第一講，前面都是靜态講解，大家是不是覺得不過瘾啊？咱學Java的嘛，當然得和Java的技術結合講解咯，前面也說到以後會用動态資料講解的。一、準備工作，建立MySQL資料庫shuyangyang

<code>Navicat MySQL Data Transfer</code>

<code>Source Server : localhost</code>

<code>Source Server Version : 50133</code>

<code>Source Host : localhost:3306</code>

<code>Source </code><code>Database</code> <code>: shuyangyang</code>

<code>Target Server Type : MYSQL</code>

<code>Target Server Version : 50133</code>

<code>File Encoding : 65001</code>

<code>SET</code> <code>FOREIGN_KEY_CHECKS=0;</code>

<code>-- Table structure for `t_users`</code>

<code>DROP</code> <code>TABLE</code> <code>IF EXISTS `t_users`;</code>

<code>CREATE</code> <code>TABLE</code> <code>`t_users` (</code>

<code> </code><code>`ID` </code><code>int</code><code>(255) </code><code>NOT</code> <code>NULL</code> <code>AUTO_INCREMENT,</code>

<code> </code><code>`</code><code>Name</code><code>` </code><code>varchar</code><code>(255) </code><code>DEFAULT</code> <code>NULL</code><code>,</code>

<code> </code><code>`age` </code><code>smallint</code><code>(6) </code><code>DEFAULT</code> <code>NULL</code><code>,</code>

<code> </code><code>`Address` </code><code>varchar</code><code>(255) </code><code>DEFAULT</code> <code>NULL</code><code>,</code>

<code> </code><code>`CardID` </code><code>varchar</code><code>(255) </code><code>DEFAULT</code> <code>NULL</code><code>,</code>

<code> </code><code>`Role` </code><code>varchar</code><code>(255) </code><code>DEFAULT</code> <code>NULL</code><code>,</code>

<code> </code><code>`DepartMent` </code><code>varchar</code><code>(255) </code><code>DEFAULT</code> <code>NULL</code><code>,</code>

<code> </code><code>`Sex` </code><code>varchar</code><code>(255) </code><code>DEFAULT</code> <code>NULL</code><code>,</code>

<code> </code><code>PRIMARY</code> <code>KEY</code> <code>(`ID`)</code>

<code>) ENGINE=MyISAM AUTO_INCREMENT=19 </code><code>DEFAULT</code> <code>CHARSET=utf8;</code>

<code>-- Records of t_users</code>

<code>INSERT</code> <code>INTO</code> <code>t_users </code><code>VALUES</code> <code>(</code><code>'1'</code><code>, </code><code>'張三'</code><code>, </code><code>'20'</code><code>, </code><code>'北京市海澱區'</code><code>, </code><code>'342425199002131239'</code><code>, </code><code>'普通使用者'</code><code>, </code><code>'使用者組'</code><code>, </code><code>'男'</code><code>);</code>

<code>INSERT</code> <code>INTO</code> <code>t_users </code><code>VALUES</code> <code>(</code><code>'2'</code><code>, </code><code>'李四'</code><code>, </code><code>'22'</code><code>, </code><code>'上海市長甯區'</code><code>, </code><code>'342425199107203116'</code><code>, </code><code>'管理者'</code><code>, </code><code>'管理組'</code><code>, </code><code>'女'</code><code>);</code>

<code>INSERT</code> <code>INTO</code> <code>t_users </code><code>VALUES</code> <code>(</code><code>'3'</code><code>, </code><code>'王五'</code><code>, </code><code>'24'</code><code>, </code><code>'南京市'</code><code>, </code><code>'3426198920314669'</code><code>, </code><code>'客服人員'</code><code>, </code><code>'客服組'</code><code>, </code><code>'女'</code><code>);</code>

<code>INSERT</code> <code>INTO</code> <code>t_users </code><code>VALUES</code> <code>(</code><code>'4'</code><code>, </code><code>'趙大頭'</code><code>, </code><code>'23'</code><code>, </code><code>'南通市'</code><code>, </code><code>'3424198805134567'</code><code>, </code><code>'普通使用者'</code><code>, </code><code>'使用者組'</code><code>, </code><code>'男'</code><code>);</code>

<code>INSERT</code> <code>INTO</code> <code>t_users </code><code>VALUES</code> <code>(</code><code>'5'</code><code>, </code><code>'孫國'</code><code>, </code><code>'21'</code><code>, </code><code>'山東省'</code><code>, </code><code>'3526199001234569'</code><code>, </code><code>'普通使用者'</code><code>, </code><code>'使用者組'</code><code>, </code><code>'男'</code><code>);</code>

<code>INSERT</code> <code>INTO</code> <code>t_users </code><code>VALUES</code> <code>(</code><code>'6'</code><code>, </code><code>'測試'</code><code>, </code><code>'26'</code><code>, </code><code>'test'</code><code>, </code><code>'456489731312123'</code><code>, </code><code>'test'</code><code>, </code><code>'test'</code><code>, </code><code>'男'</code><code>);</code>

<code>INSERT</code> <code>INTO</code> <code>t_users </code><code>VALUES</code> <code>(</code><code>'7'</code><code>, </code><code>'張三1'</code><code>, </code><code>'20'</code><code>, </code><code>'北京市海澱區'</code><code>, </code><code>'342425199002131239'</code><code>, </code><code>'普通使用者'</code><code>, </code><code>'使用者組'</code><code>, </code><code>'男'</code><code>);</code>

<code>INSERT</code> <code>INTO</code> <code>t_users </code><code>VALUES</code> <code>(</code><code>'8'</code><code>, </code><code>'李四1'</code><code>, </code><code>'22'</code><code>, </code><code>'上海市長甯區'</code><code>, </code><code>'342425199107203116'</code><code>, </code><code>'管理者'</code><code>, </code><code>'管理組'</code><code>, </code><code>'女'</code><code>);</code>

<code>INSERT</code> <code>INTO</code> <code>t_users </code><code>VALUES</code> <code>(</code><code>'9'</code><code>, </code><code>'王五1'</code><code>, </code><code>'24'</code><code>, </code><code>'南京市'</code><code>, </code><code>'3426198920314669'</code><code>, </code><code>'客服人員'</code><code>, </code><code>'客服組'</code><code>, </code><code>'女'</code><code>);</code>

<code>INSERT</code> <code>INTO</code> <code>t_users </code><code>VALUES</code> <code>(</code><code>'10'</code><code>, </code><code>'趙大頭1'</code><code>, </code><code>'23'</code><code>, </code><code>'南通市'</code><code>, </code><code>'3424198805134567'</code><code>, </code><code>'普通使用者'</code><code>, </code><code>'使用者組'</code><code>, </code><code>'男'</code><code>);</code>

<code>INSERT</code> <code>INTO</code> <code>t_users </code><code>VALUES</code> <code>(</code><code>'11'</code><code>, </code><code>'孫國1'</code><code>, </code><code>'21'</code><code>, </code><code>'山東省'</code><code>, </code><code>'3526199001234569'</code><code>, </code><code>'普通使用者'</code><code>, </code><code>'使用者組'</code><code>, </code><code>'男'</code><code>);</code>

<code>INSERT</code> <code>INTO</code> <code>t_users </code><code>VALUES</code> <code>(</code><code>'12'</code><code>, </code><code>'測試1'</code><code>, </code><code>'26'</code><code>, </code><code>'test'</code><code>, </code><code>'456489731312123'</code><code>, </code><code>'test'</code><code>, </code><code>'test'</code><code>, </code><code>'男'</code><code>);</code>

<code>INSERT</code> <code>INTO</code> <code>t_users </code><code>VALUES</code> <code>(</code><code>'13'</code><code>, </code><code>'張三2'</code><code>, </code><code>'20'</code><code>, </code><code>'北京市海澱區'</code><code>, </code><code>'342425199002131239'</code><code>, </code><code>'普通使用者'</code><code>, </code><code>'使用者組'</code><code>, </code><code>'男'</code><code>);</code>

<code>INSERT</code> <code>INTO</code> <code>t_users </code><code>VALUES</code> <code>(</code><code>'14'</code><code>, </code><code>'李四2'</code><code>, </code><code>'22'</code><code>, </code><code>'上海市長甯區'</code><code>, </code><code>'342425199107203116'</code><code>, </code><code>'管理者'</code><code>, </code><code>'管理組'</code><code>, </code><code>'女'</code><code>);</code>

<code>INSERT</code> <code>INTO</code> <code>t_users </code><code>VALUES</code> <code>(</code><code>'15'</code><code>, </code><code>'王五2'</code><code>, </code><code>'24'</code><code>, </code><code>'南京市'</code><code>, </code><code>'3426198920314669'</code><code>, </code><code>'客服人員'</code><code>, </code><code>'客服組'</code><code>, </code><code>'女'</code><code>);</code>

<code>INSERT</code> <code>INTO</code> <code>t_users </code><code>VALUES</code> <code>(</code><code>'16'</code><code>, </code><code>'趙大頭2'</code><code>, </code><code>'23'</code><code>, </code><code>'南通市'</code><code>, </code><code>'3424198805134567'</code><code>, </code><code>'普通使用者'</code><code>, </code><code>'使用者組'</code><code>, </code><code>'男'</code><code>);</code>

<code>INSERT</code> <code>INTO</code> <code>t_users </code><code>VALUES</code> <code>(</code><code>'17'</code><code>, </code><code>'孫國2'</code><code>, </code><code>'21'</code><code>, </code><code>'山東省'</code><code>, </code><code>'3526199001234569'</code><code>, </code><code>'普通使用者'</code><code>, </code><code>'使用者組'</code><code>, </code><code>'男'</code><code>);</code>

<code>INSERT</code> <code>INTO</code> <code>t_users </code><code>VALUES</code> <code>(</code><code>'18'</code><code>, </code><code>'測試2'</code><code>, </code><code>'26'</code><code>, </code><code>'test'</code><code>, </code><code>'456489731312123'</code><code>, </code><code>'test'</code><code>, </code><code>'test'</code><code>, </code><code>'男'</code><code>);</code>

二、搭好架構，後面我會提供源代碼給大家下載下傳的

三、最終效果，主要是架構中間的資料展示

前台界面代碼（這裡給出的是資料展示層代碼，全部代碼可以在文章結尾處下載下傳）：

<code>// 表格配置開始</code>

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

<code> </code><code>{header:</code><code>'編号'</code><code>,dataIndex:</code><code>'id'</code><code>},</code>

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

<code> </code><code>{header:</code><code>'年齡'</code><code>,dataIndex:</code><code>'age'</code><code>},</code>

<code> </code><code>{header:</code><code>'性别'</code><code>,dataIndex:</code><code>'sex'</code><code>,renderer:</code><code>function</code><code>(value){ </code>

<code> </code><code>if</code><code>(value==</code><code>'男'</code><code>){ </code>

<code> </code><code>return</code> <code>"<span style='color:green;font-weight:bold';>男</span>"</code><code>; </code>

<code> </code><code>return</code> <code>"<span style='color:red;font-weight:bold';>女</span>"</code><code>; </code>

<code> </code><code>{header:</code><code>'位址'</code><code>,dataIndex:</code><code>'address'</code><code>},</code>

<code> </code><code>{header:</code><code>'身份證号碼'</code><code>,dataIndex:</code><code>'cardId'</code><code>,width:150},</code>

<code> </code><code>{header:</code><code>'角色'</code><code>,dataIndex:</code><code>'role'</code><code>},</code>

<code> </code><code>{header:</code><code>'部門'</code><code>,dataIndex:</code><code>'departMent'</code><code>}</code>

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

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

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

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

<code> </code><code>url:</code><code>'/user/showUser'</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>'address'</code><code>},</code>

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

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

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

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

<code> </code><code>columns: columns,</code>

<code> </code><code>title: </code><code>'資料'</code><code>,</code>

<code> </code><code>region: </code><code>'center'</code><code>, </code><code>//架構中顯示位置，單獨運作可去掉此段</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>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>

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

<code>// 表格配置結束</code>

這裡的url請求位址是/user/showUser，這裡請求的是SpringMVC的位址，看下面的Controller代碼：

<code>package</code> <code>com.shyy.web.controller.anntation;</code>

<code>import</code> <code>java.util.List;</code>

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

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

<code>import</code> <code>org.slf4j.Logger;</code>

<code>import</code> <code>org.slf4j.LoggerFactory;</code>

<code>import</code> <code>org.springframework.stereotype.Controller;</code>

<code>import</code> <code>org.springframework.web.bind.annotation.RequestMapping;</code>

<code>import</code> <code>org.springframework.web.bind.annotation.ResponseBody;</code>

<code>import</code> <code>com.shyy.web.controller.response.EmptyResponse;</code>

<code>import</code> <code>com.shyy.web.controller.response.NormalResponse;</code>

<code>import</code> <code>com.shyy.web.controller.response.Response;</code>

<code>import</code> <code>com.shyy.web.entity.User;</code>

<code>import</code> <code>com.shyy.web.service.UserService;</code>

<code>import</code> <code>com.shyy.web.service.impl.UserServiceImpl;</code>

<code>@Controller</code>

<code>@RequestMapping</code><code>(</code><code>"/user/"</code><code>)</code>

<code>public</code> <code>class</code> <code>UserController {</code>

<code> </code><code>Logger logger = LoggerFactory.getLogger(UserController.</code><code>class</code><code>); </code>

<code> </code><code>UserService userService = </code><code>new</code> <code>UserServiceImpl();</code>

<code> </code><code>* SpringMVC傳回json資料</code>

<code> </code><code>* @return</code>

<code> </code><code>@RequestMapping</code><code>(</code><code>"showUser"</code><code>)</code>

<code> </code><code>@ResponseBody</code>

<code> </code><code>public</code> <code>Response resp(HttpServletRequest req, HttpServletResponse resp){</code>

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

<code> </code><code>String limit = req.getParameter(</code><code>"limit"</code><code>);</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>List<User> list = userService.query(index,pageSize); </code><code>//擷取所有使用者資料</code>

<code> </code><code>long</code> <code>total = list.size();</code>

<code> </code><code>if</code><code>(total></code><code>0</code><code>){</code>

<code> </code><code>logger.debug(</code><code>"now {}"</code> <code>, </code><code>"傳回使用者資料。。。"</code><code>);</code>

<code> </code><code>return</code> <code>new</code> <code>NormalResponse(list,userService.total());</code>

<code> </code><code>logger.debug(</code><code>"now {}"</code> <code>, </code><code>"使用者資料為空！"</code><code>);</code>

<code> </code><code>return</code> <code>new</code> <code>EmptyResponse();</code>

最後的NormalResponse傳回的是我封裝的一個傳回對象，如下代碼所示：

<code>package</code> <code>com.shyy.web.controller.response;</code>

<code>public</code> <code>class</code> <code>NormalResponse </code><code>extends</code> <code>Response {</code>

<code> </code><code>public</code> <code>NormalResponse(Object data) {</code>

<code> </code><code>this</code><code>.setCode(ResponseCode.OK);</code>

<code> </code><code>this</code><code>.setMessage(</code><code>""</code><code>);</code>

<code> </code><code>this</code><code>.setData(data);</code>

<code> </code><code>this</code><code>.setSuccess(</code><code>true</code><code>);</code>

<code> </code><code>public</code> <code>NormalResponse(Object data, Long total) {</code>

<code> </code><code>this</code><code>.setTotal(total);</code>

<code> </code><code>public</code> <code>NormalResponse() {</code>

<code> </code><code>this</code><code>.setData(</code><code>null</code><code>);</code>

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

ExtJS4.2學習(20)動态資料表格之前幾章總結篇1

繼續閱讀

Java小案例——随機數猜測随機數猜測

nginx location中斜線的位置的重要性

27 Best Free Eclipse Plug-ins for Java Developer to be ProductiveCode Quality PluginsText Editor PluginsDependency ManagementVersion Control Integration PluginsFramework Development Continuous Integration Related PluginsOther Utility Plugins

Java String.format方法的簡單使用

neo4j之cypher使用文檔

GitHub連夜封殺！這份阿裡 10W 字内部 Java 字面試手冊到底有多強？

spark/scala關于【資源檔案】加載方法概述外部檔案加載方案測試資源檔案打包入jar包中小結

mybatis_入門程式Mybatis入門

mysql使用source指令導入.sql檔案

AOP程式設計_Android優雅權限架構(1)概念基礎，2021金三銀四前言正文大綱正文

Effective Java 8:通用程式設計

OOM三種類型

工廠模式-三種類型

【遞歸】高效率求2的n次幂

win10本地scala和spark安裝安裝scala安裝spark

scala (3) Function 和 Method