ExtJS4.2学习(20)动态数据表格之前几章总结篇1



(前几节学习的大家不知道记住了没,现在来总结复习下,顺便加点新技术)wnV思考者日记网-束洋洋个人博客

学习本节前的准备:Eclipse高版本,Jetty插件,Maven插件,JDK1.7wnV思考者日记网-束洋洋个人博客

本节采用技术:SpringMVC+Jetty+ExtJs4.2+Maven+MySQL5.1以上+SLF4JwnV思考者日记网-束洋洋个人博客

休息了好久没开动教程了,确实最近太累了,大家见谅!wnV思考者日记网-束洋洋个人博客

先来看下效果,本章节是连续篇,今天是续篇的第一讲,前面都是静态讲解,大家是不是觉得不过瘾啊?咱学Java的嘛,当然得和Java的技术结合讲解咯,前面也说到以后会用动态数据讲解的。wnV思考者日记网-束洋洋个人博客

一、准备工作,创建MySQL数据库shuyangyangwnV思考者日记网-束洋洋个人博客

/* 
Navicat MySQL Data Transfer 
 
Source Server         : localhost 
Source Server Version : 50133 
Source Host           : localhost:3306 
Source Database       : shuyangyang 
 
Target Server Type    : MYSQL 
Target Server Version : 50133 
File Encoding         : 65001 
 
Date: 2014-02-18 23:04:49 
*/  
  
SET FOREIGN_KEY_CHECKS=0;  
-- ----------------------------  
-- Table structure for `t_users`  
-- ----------------------------  
DROP TABLE IF EXISTS `t_users`;  
CREATE TABLE `t_users` (  
  `ID` int(255) NOT NULL AUTO_INCREMENT,  
  `Name` varchar(255) DEFAULT NULL,  
  `age` smallint(6) DEFAULT NULL,  
  `Address` varchar(255) DEFAULT NULL,  
  `CardID` varchar(255) DEFAULT NULL,  
  `Role` varchar(255) DEFAULT NULL,  
  `DepartMent` varchar(255) DEFAULT NULL,  
  `Sex` varchar(255) DEFAULT NULL,  
  PRIMARY KEY (`ID`)  
) ENGINE=MyISAM AUTO_INCREMENT=19 DEFAULT CHARSET=utf8;  
  
-- ----------------------------  
-- Records of t_users  
-- ----------------------------  
INSERT INTO t_users VALUES ('1', '张三', '20', '北京市海淀区', '342425199002131239', '普通用户', '用户组', '男');  
INSERT INTO t_users VALUES ('2', '李四', '22', '上海市长宁区', '342425199107203116', '管理员', '管理组', '女');  
INSERT INTO t_users VALUES ('3', '王五', '24', '南京市', '3426198920314669', '客服人员', '客服组', '女');  
INSERT INTO t_users VALUES ('4', '赵大头', '23', '南通市', '3424198805134567', '普通用户', '用户组', '男');  
INSERT INTO t_users VALUES ('5', '孙国', '21', '山东省', '3526199001234569', '普通用户', '用户组', '男');  
INSERT INTO t_users VALUES ('6', '测试', '26', 'test', '456489731312123', 'test', 'test', '男');  
INSERT INTO t_users VALUES ('7', '张三1', '20', '北京市海淀区', '342425199002131239', '普通用户', '用户组', '男');  
INSERT INTO t_users VALUES ('8', '李四1', '22', '上海市长宁区', '342425199107203116', '管理员', '管理组', '女');  
INSERT INTO t_users VALUES ('9', '王五1', '24', '南京市', '3426198920314669', '客服人员', '客服组', '女');  
INSERT INTO t_users VALUES ('10', '赵大头1', '23', '南通市', '3424198805134567', '普通用户', '用户组', '男');  
INSERT INTO t_users VALUES ('11', '孙国1', '21', '山东省', '3526199001234569', '普通用户', '用户组', '男');  
INSERT INTO t_users VALUES ('12', '测试1', '26', 'test', '456489731312123', 'test', 'test', '男');  
INSERT INTO t_users VALUES ('13', '张三2', '20', '北京市海淀区', '342425199002131239', '普通用户', '用户组', '男');  
INSERT INTO t_users VALUES ('14', '李四2', '22', '上海市长宁区', '342425199107203116', '管理员', '管理组', '女');  
INSERT INTO t_users VALUES ('15', '王五2', '24', '南京市', '3426198920314669', '客服人员', '客服组', '女');  
INSERT INTO t_users VALUES ('16', '赵大头2', '23', '南通市', '3424198805134567', '普通用户', '用户组', '男');  
INSERT INTO t_users VALUES ('17', '孙国2', '21', '山东省', '3526199001234569', '普通用户', '用户组', '男');  
INSERT INTO t_users VALUES ('18', '测试2', '26', 'test', '456489731312123', 'test', 'test', '男');  

 wnV思考者日记网-束洋洋个人博客

 wnV思考者日记网-束洋洋个人博客

二、搭好框架,后面我会提供源代码给大家下载的wnV思考者日记网-束洋洋个人博客

QQ截图20140218230857.jpgwnV思考者日记网-束洋洋个人博客

三、最终效果,主要是框架中间的数据展示wnV思考者日记网-束洋洋个人博客

QQ截图20140218230857.jpgwnV思考者日记网-束洋洋个人博客

前台界面代码(这里给出的是数据展示层代码,全部代码可以在文章结尾处下载):wnV思考者日记网-束洋洋个人博客

// 表格配置开始  
var columns = [  
    {header:'编号',dataIndex:'id'},  
    {header:'名称',dataIndex:'name'},  
    {header:'年龄',dataIndex:'age'},  
    {header:'性别',dataIndex:'sex',renderer:function(value){    
        if(value=='男'){    
            return "<span style='color:green;font-weight:bold';>男</span>";    
        } else {    
            return "<span style='color:red;font-weight:bold';>女</span>";    
        }  
,  
    {header:'地址',dataIndex:'address'},  
    {header:'身份证号码',dataIndex:'cardId',width:150},  
    {header:'角色',dataIndex:'role'},  
    {header:'部门',dataIndex:'departMent'}  
];  
  
//转换原始数据为EXT可以显示的数据    
var store = new Ext.data.Store({    
    pageSize:13, //每页显示几条数据    
    proxy:{    
        type:'ajax',    
        url:'/user/showUser',    
        reader:{    
            type:'json',    
            totalProperty:'total',    
            root:'data',    
            idProperty:'id'    
        }    
    },    
    fields:[    
       {name:'id'}, //mapping:0 这样的可以指定列显示的位置,0代表第1列,可以随意设置列显示的位置    
       {name:'name'},    
       {name:'age'},    
       {name:'sex'},  
       {name:'address'},  
       {name:'cardId'},  
       {name:'role'},  
       {name:'departMent'}  
    ]    
});    
  
var grid = new Ext.grid.GridPanel({  
    store: store,  
    columns: columns,  
    title: '数据',  
    region: 'center', //框架中显示位置,单独运行可去掉此段  
    loadMask:true, //显示遮罩和提示功能,即加载Loading……    
    //forceFit:true //自动填满表格    
    bbar:new Ext.PagingToolbar({    
        store:store,     
        displayInfo:true, //是否显示数据信息    
        displayMsg:'显示第 {0} 条到 {1} 条记录,一共  {2} 条', //只要当displayInfo为true时才有效,用来显示有数据时的提示信息,{0},{1},{2}会自动被替换成对应的数据    
        emptyMsg: "没有记录" //没有数据时显示信息    
    })  
});  
/加载数据    
store.load({params:{start:0,limit:13}});   
// 表格配置结束  

 wnV思考者日记网-束洋洋个人博客

这里的url请求地址是/user/showUser,这里请求的是SpringMVC的地址,看下面的Controller代码:wnV思考者日记网-束洋洋个人博客

package com.shyy.web.controller.anntation;  
  
import java.util.List;  
  
import javax.servlet.http.HttpServletRequest;  
import javax.servlet.http.HttpServletResponse;  
  
import org.slf4j.Logger;  
import org.slf4j.LoggerFactory;  
import org.springframework.stereotype.Controller;  
import org.springframework.web.bind.annotation.RequestMapping;  
import org.springframework.web.bind.annotation.ResponseBody;  
  
import com.shyy.web.controller.response.EmptyResponse;  
import com.shyy.web.controller.response.NormalResponse;  
import com.shyy.web.controller.response.Response;  
import com.shyy.web.entity.User;  
import com.shyy.web.service.UserService;  
import com.shyy.web.service.impl.UserServiceImpl;  
  
@Controller  
@RequestMapping("/user/")  
public class UserController {  
  
    Logger logger = LoggerFactory.getLogger(UserController.class);    
      
    UserService userService = new UserServiceImpl();  
      
    /** 
     * SpringMVC返回json数据 
     * @return 
     */  
    @RequestMapping("showUser")  
    @ResponseBody  
    public Response resp(HttpServletRequest req, HttpServletResponse resp){  
        String start = req.getParameter("start");//起始页  
        String limit = req.getParameter("limit");//每页数量  
        int index = Integer.parseInt(start);    
        int pageSize = Integer.parseInt(limit);  
        List<User> list = userService.query(index,pageSize); //获取所有用户数据  
        long total = list.size();  
        if(total>0){  
            logger.debug("now {}" , "返回用户数据。。。");  
            return new NormalResponse(list,userService.total());  
        }else{  
            logger.debug("now {}" , "用户数据为空!");  
            return new EmptyResponse();  
        }  
          
    }  
} 

 wnV思考者日记网-束洋洋个人博客

最后的NormalResponse返回的是我封装的一个返回对象,如下代码所示:wnV思考者日记网-束洋洋个人博客

package com.shyy.web.controller.response;  
  
  
public class NormalResponse extends Response {  
  
    public NormalResponse(Object data) {  
        this.setCode(ResponseCode.OK);  
        this.setMessage("");  
        this.setData(data);  
        this.setSuccess(true);  
    }  
      
    public NormalResponse(Object data, Long total) {  
        this.setCode(ResponseCode.OK);  
        this.setMessage("");  
        this.setData(data);  
        this.setSuccess(true);  
        this.setTotal(total);  
    }  
  
    public NormalResponse() {  
        this.setCode(ResponseCode.OK);  
        this.setMessage("");  
        this.setData(null);  
        this.setSuccess(true);  
    }  
}  

 wnV思考者日记网-束洋洋个人博客

源码下载:【点我下载】(里面包含了我前几章讲解的部分源码,运行本节地址为:http://localhost:8090/demo/index.jspwnV思考者日记网-束洋洋个人博客

 wnV思考者日记网-束洋洋个人博客

注:前面开篇知识不足的同学请自觉充电。wnV思考者日记网-束洋洋个人博客

 wnV思考者日记网-束洋洋个人博客

 wnV思考者日记网-束洋洋个人博客

ExtJS4.2全部章节汇总目录


 wnV思考者日记网-束洋洋个人博客

ExtJS4.2学习(一)Ext自定义类wnV思考者日记网-束洋洋个人博客

ExtJS4.2学习(二)Ext统一组件模型wnV思考者日记网-束洋洋个人博客

ExtJS4.2学习(三)Grid表格wnV思考者日记网-束洋洋个人博客

ExtJS4.2学习(四)Grid表格中文排序问题wnV思考者日记网-束洋洋个人博客

ExtJS4.2学习(五)表格渲染与复选框wnV思考者日记网-束洋洋个人博客

ExtJS4.2学习(六)表格分页与通过后台脚本获得分页数据wnV思考者日记网-束洋洋个人博客

ExtJS4.2学习(七)EditorGrid可编辑表格wnV思考者日记网-束洋洋个人博客

ExtJS4.2学习(八)表格限制输入数据的类型wnV思考者日记网-束洋洋个人博客

ExtJS4.2学习(九)属性表格控件PropertyGridwnV思考者日记网-束洋洋个人博客

ExtJS4.2学习(10)分组表格控件--GroupingGridwnV思考者日记网-束洋洋个人博客

ExtJS4.2学习(11)可拖放的表格wnV思考者日记网-束洋洋个人博客

ExtJS4.2学习(12)基于表格的右键菜单wnV思考者日记网-束洋洋个人博客

ExtJS4.2学习(13)基于表格的扩展插件---rowEditingwnV思考者日记网-束洋洋个人博客

ExtJS4.2学习(14)基于表格的扩展插件(2)wnV思考者日记网-束洋洋个人博客

ExtJS4.2学习(15)树形表格wnV思考者日记网-束洋洋个人博客

 ExtJS4.2学习(16)制作表单wnV思考者日记网-束洋洋个人博客

ExtJS4.2学习(17)表单基本输入控件Ext.form.FieldwnV思考者日记网-束洋洋个人博客

 ExtJS4.2学习(18)时间控件wnV思考者日记网-束洋洋个人博客

 ExtJS4.2学习(19)在线编辑器Ext.form.HtmlEditorwnV思考者日记网-束洋洋个人博客

ExtJS4.2学习(20)动态数据表格之前几章总结篇1 wnV思考者日记网-束洋洋个人博客

 ExtJS4.2学习(21)动态菜单与表格数据展示操作总结篇2wnV思考者日记网-束洋洋个人博客

ExtJS4.2学习(22)登录界面wnV思考者日记网-束洋洋个人博客

ExtJS4.2学习(23)textFiled后追加按钮wnV思考者日记网-束洋洋个人博客

ExtJS4.2学习(24)TreeStore使用详解wnV思考者日记网-束洋洋个人博客

ExtJS4.2学习(25)终结篇,实战项目wnV思考者日记网-束洋洋个人博客

 

(转载本站文章请注明作者和出处 思考者日记网|束洋洋个人博客 ,请勿用于任何商业用途)

『访问 思考者日记网404页面 寻找遗失儿童』

告知
  •     本站90%以上文章均属原创,部分转载已加上原作者出处。 如需转载本站文章请您务必保留本站出处!
  •     打广告评论者请自重,请为广大网友提供一个健康干净的网络空间。
  • 感谢主机屋提供网站空间;
  • 感谢万网阿里云提供域名解析;
  • 感谢EmpireCMS提供CMS系统;
  • 感谢bootstrap展示本站前端页面;
  • 感谢Glyphicons Halflings提供字体;
  • 感谢大家一直以来对本站的喜爱,感谢大家!
近期文章 建议与反馈