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