怎么实现 extjs 刷新页面表格数据实时刷新

查看:2204|回复:1
小洋(on my way)
引用:本节采用技术:SpringMVC+Jetty+ExtJs4.2+Maven+MySQL5.1以上+SLF4J(前几节学习的大家不知道记住了没,现在来总结复习下,顺便加点新技术)
学习本节前的准备:Eclipse高版本,Jetty插件,Maven插件,JDK1.7休息了好久没开动教程了,确实最近太累了,大家见谅!先来看下效果,本章节是连续篇,今天是续篇的第一讲,前面都是静态讲解,大家是不是觉得不过瘾啊?咱学Java的嘛,当然得和Java的技术结合讲解咯,前面也说到以后会用动态数据讲解的。一、准备工作,创建MySQL数据库shuyangyang
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
& && && && && && && && && && && && && && &&&
& && && && && && && && && && && && && && && &
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', '北京市海淀区', '131239', '普通用户', '用户组', '男');
INSERT INTO t_users VALUES ('2', '李四', '22', '上海市长宁区', '203116', '管理员', '管理组', '女');
INSERT INTO t_users VALUES ('3', '王五', '24', '南京市', '4669', '客服人员', '客服组', '女');
INSERT INTO t_users VALUES ('4', '赵大头', '23', '南通市', '4567', '普通用户', '用户组', '男');
INSERT INTO t_users VALUES ('5', '孙国', '21', '山东省', '4569', '普通用户', '用户组', '男');
INSERT INTO t_users VALUES ('6', '测试', '26', 'test', '123', 'test', 'test', '男');
INSERT INTO t_users VALUES ('7', '张三1', '20', '北京市海淀区', '131239', '普通用户', '用户组', '男');
INSERT INTO t_users VALUES ('8', '李四1', '22', '上海市长宁区', '203116', '管理员', '管理组', '女');
INSERT INTO t_users VALUES ('9', '王五1', '24', '南京市', '4669', '客服人员', '客服组', '女');
INSERT INTO t_users VALUES ('10', '赵大头1', '23', '南通市', '4567', '普通用户', '用户组', '男');
INSERT INTO t_users VALUES ('11', '孙国1', '21', '山东省', '4569', '普通用户', '用户组', '男');
INSERT INTO t_users VALUES ('12', '测试1', '26', 'test', '123', 'test', 'test', '男');
INSERT INTO t_users VALUES ('13', '张三2', '20', '北京市海淀区', '131239', '普通用户', '用户组', '男');
INSERT INTO t_users VALUES ('14', '李四2', '22', '上海市长宁区', '203116', '管理员', '管理组', '女');
INSERT INTO t_users VALUES ('15', '王五2', '24', '南京市', '4669', '客服人员', '客服组', '女');
INSERT INTO t_users VALUES ('16', '赵大头2', '23', '南通市', '4567', '普通用户', '用户组', '男');
INSERT INTO t_users VALUES ('17', '孙国2', '21', '山东省', '4569', '普通用户', '用户组', '男');
INSERT INTO t_users VALUES ('18', '测试2', '26', 'test', '123', 'test', 'test', '男');
二、搭好框架,后面我会提供源代码给大家下载的
三、最终效果,主要是框架中间的数据展示
&&前台界面代码(这里给出的是数据展示层代码,全部代码可以在文章结尾处下载):
// 表格配置开始
var columns = [
& & {header:'编号',dataIndex:'id'},
& & {header:'名称',dataIndex:'name'},
& & {header:'年龄',dataIndex:'age'},
& & {header:'性别',dataIndex:'sex',renderer:function(value){
& && &&&if(value=='男'){
& && && && &return &&span style='color:font-weight:bold';&男&/span&&;
& && &&&} else {
& && && && &return &&span style='color: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}});
// 表格配置结束
这里的url请求地址是/user/showUser,这里请求的是SpringMVC的地址,看下面的Controller代码:
package com.shyy.web.controller.
& && && && && && && &
import java.util.L
& && && && && && && &
import javax.servlet.http.HttpServletR
import javax.servlet.http.HttpServletR
& && && && && && && &
import org.slf4j.L
import org.slf4j.LoggerF
import org.springframework.stereotype.C
import org.springframework.web.bind.annotation.RequestM
import org.springframework.web.bind.annotation.ResponseB
& && && && && && && &
import com.shyy.web.controller.response.EmptyR
import com.shyy.web.controller.response.NormalR
import com.shyy.web.controller.response.R
import com.shyy.web.entity.U
import com.shyy.web.service.UserS
import com.shyy.web.service.impl.UserServiceI
& && && && && && && &
@Controller
@RequestMapping(&/user/&)
public class UserController {
& && && && && && && &
& & Logger logger = LoggerFactory.getLogger(UserController.class);
& && && && && && && && &&&
& & UserService userService = new UserServiceImpl();
& && && && && && && && &&&
& &&&* SpringMVC返回json数据
& & @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();
& && && && && && && && && && &
最后的NormalResponse返回的是我封装的一个返回对象,如下代码所示:
package com.shyy.web.controller.
& && && && && &
& && && && && &
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);
源码下载:【】(里面包含了我前几章讲解的部分源码,运行本节地址为:http://localhost:8090/demo/index.jsp) 注:前面开篇知识不足的同学请自觉充电。
连载中,请大家继续关注!本文出自我的个人网站
论坛汇总贴:
小洋(on my way)
后续我会完整搭出一套框架,结合SpringMVC+Jetty+ExtJs4.2+Maven+SLF4J+Shrio技术完成开发。
51CTOjava板块讨论QQ群:【1000人群】2群:【可加】 & && && &欢迎热爱JAVA的来讨论^_^
我的个人网站--&
Copyright&
本论坛言论纯属发布者个人意见,不代表51CTO网站立场!如有疑义,请与管理员联系:Ext动态加载树的实时刷新问题-ajax-电脑编程网Ext动态加载树的实时刷新问题作者:wangxinyi1986 和相关&&一棵动态加载树 生成了之后,点击它的某一个叶子节点会引起另一个节点的变化 但这时在页面上看不出变化&必须要实现实时刷新……请问 如何实现树的实时刷新,代码应该如何写 放在什么位置?------回答---------------回答(30分)---------JScript code
LoadTreePanel = Ext.extend(Ext.tree.TreePanel, {
constructor: function () {
LoadTreePanel.superclass.constructor.call(this, {
renderTo: Ext.getBody(),
width: 200,
height: 300,
loader: new Ext.tree.TreeLoader({dataUrl:TREE_DATA_URL}),
root: new Ext.tree.AsyncTreeNode({
text: &ExtJS&,
}
});
点击一次加载一次,在后台获取参数node。它是当前点击节点的id
request.getParameter(&node&)根据这个id去查询当前节点下的数据即可
也就是父节点=当前id
------回答(10分)---------//比如树是展示水果,但添加了香蕉成功后加上tree.root.reload();就可以刷新树了------回答---------------回答(30分)---------
JScript code
LoadTreePanel = Ext.extend(Ext.tree.TreePanel, {
constructor: function () {
LoadTreePanel.superclass.constructor.call(this, {
renderTo: Ext.getBody(),
width: 200,
height: 300,
loader: new Ext.tree.TreeLoader({dataUrl:TREE_DATA_URL}),
root: new Ext.tree.AsyncTreeNode({
text: &ExtJS&,
}
});
点击一次加载一次,在后台获取参数node。它是当前点击节点的id
request.getParameter(&node&)根据这个id去查询当前节点下的数据即可
也就是父节点=当前id
------回答(10分)---------//比如树是展示水果,但添加了香蕉成功后加上tree.root.reload();就可以刷新树了相关资料:|||||||Ext动态加载树的实时刷新问题来源网络,如有侵权请告知,即处理!编程Tags:                &                    您的举报已经提交成功,我们将尽快处理,谢谢!
通过vb提供的excel接口,具体的可以参阅相关的资料
dim conn,mdbfile
mdbfile= ppath("数据库名称.mdb")
set conn= eateobject(" nnection")...
看看这个网址上的东西,希望对你有帮助,这个是java的。
打开网页后左上角文件-----脱机工作
这样网页就不会自动刷新了。
C/S程序一般用C++、VB或Delphi(当然也有用其他的,不过这三个最多)。
你说的通过浏览器在客户端操作的属于B/S程序,一般用asp,php或java...
大家还关注

我要回帖

更多关于 extjs treepanel 刷新 的文章

 

随机推荐