- 浏览: 134988 次
- 性别:
- 来自: 杭州
最新评论
-
谭吉泽:
你这个测试了么
Extjs formPanel 显示图片 + 上传 -
dream_1086:
谢谢分享!
JTabel实现行的拖动 -
kevin_zhm:
为什么我的不可以呢。我用的是。ext4.1的
??大侠给点意思 ...
Extjs.GridPanel 显示多行工具栏 (tbar) -
java-lxm:
...
OracleOraDB10g_home1TNSListener 无法启动 错误1067 -
温柔企鹅:
我拷了一下代码,我的程序里面,都不会显示出来的,不过,我可以从 ...
GridPanel 分页
在表格的工具栏上面有一个查询按钮,我是通过点击查询按钮的时候,发送Ajax请求,从后台获得数据
显示在表格里面,现在是对表格数据进行分页,分页不了,表格里面的数据没有更新。只有分页栏工具可以进行上下翻页,但是表格里面的数据没有同步
请大家大家帮帮忙看看,到底哪里不对,该怎么实现这个分页? 很困扰,谢谢了。。
我是通过点击事件之后才发生请求去读取数据的。。
显示在表格里面,现在是对表格数据进行分页,分页不了,表格里面的数据没有更新。只有分页栏工具可以进行上下翻页,但是表格里面的数据没有同步
//一开始数据源里面是没有数据的 var proStore = new Ext.data.JsonStore({ }); var checkColumn = new Ext.grid.CheckboxSelectionModel(); // 定义复选框 var rowNum = new Ext.grid.RowNumberer(); var projectColumn = new Ext.grid.ColumnModel([rowNum, checkColumn, { header : "销售单号", width : 160, dataIndex : "saleNo", id : "saleNo", sortable : true }, { header : "会员", width : 160, dataIndex : "saleVIP", id : "saleVIP" }, { header : "下单时间", width : 100, dataIndex : "orderTime", id : "orderTime", sortable : true, renderer : function(value) { if (value == null || value == 0) { return 'null' } else { // 时间转好,将时间戳转换成Ext显示的日期格式 return Ext.util.Format.date( new Date(parseInt(value)), 'Y-m-d') } } }, { header : "客服", width : 100, dataIndex : "salePerson", id : "salePerson" }, { header : "数量", width : 80, dataIndex : "saleNumber", id : "saleNumber", sortable : true }, { header : "金额", width : 80, dataIndex : "salePrice", id : "salePrice", sortable : true }, { header : "回访记录", width : 100, dataIndex : "returnRecord", id : "returnRecord", sortable : true }, { header : "状态", width : 80, dataIndex : "status", id : "status", sortable : true }, { header : "快递号", width : 100, dataIndex : "expressID", id : "expressID", sortable : true }]); var tbar2 = new Ext.Toolbar({ renderTo : Ext.grid.GridPanel.tbar, items : [{ text : "打印销售单", iconCls : 'print', handler : function() { Ext.MessageBox.prompt("打印快递单", "请输入起始快递单号:", function(btn, text) { }) } }, { xtype : "tbseparator" }, { text : '打印快递单', iconCls : 'print' }] }); var contentGrid = new Ext.grid.GridPanel({ renderTo : "saleQuery", id : "saleQueryGird", title : "销售查询", autoWidth : true, autoHeight : true, cm : projectColumn, sm : checkColumn, // 添加复选框 store : proStore, autoScroll : true, // 内容溢出时产生滚动条 tbar : [{ xtype : "combo", store : saleStatusStore, id : "saleStatus", name : "saleFettle", hiddenName : "saleFettle", displayField : "fettlename", valueField : "fettleid", mode : "local", triggerAction : "all", emptyText : "请选择销售单状态" }, ' ', ' ', { xtype : "textfield", id : "saleCode", emptyText : "填写销售单" }, ' ', ' ', { xtype : "label", text : "选择时间:" }, ' ', { xtype : "datefield", id : "chooseStartTime", name : "chooseStartTime", vtype : "daterange", endDateField : "chooseEndTime" }, ' ', { xtype : "label", text : "至" }, ' ', { vtype : "daterange", xtype : "datefield", id : "chooseEndTime", name : "chooseEndTime", startDateField : "chooseStartTime", value : new Date() }, ' ', { xtype : "label", text : "快递公司:" }, ' ', { xtype : "combo", store : ["圆通", "申通"], emptyText : "请选择快递公司" },' ', { text : "查詢", //通过点击查询,才查询数据显示到表格, iconCls : "addBtn", handler : saleSelect }], listeners : { 'render' : function() { tbar2.render(this.tbar); } }, bbar : new Ext.PagingToolbar({ id : "pagingToolbar", pageSize : 5, store : proStore, displayInfo : true, displayMsg : '显示第 {0} 条到 {1} 条记录,总共 {2} 条', emptyMsg : "没有记录" }) }); contentGrid.render(); }); //查询方法 function saleSelect() { var saleStatus = Ext.getCmp("saleStatus").getValue(); var saleCode = Ext.getCmp("saleCode").getValue(); var startDate = Ext.getCmp("chooseStartTime").getValue(); var endDate = Ext.getCmp("chooseEndTime").getValue(); if (startDate == null || startDate == "") { Ext.MessageBox.alert("提示", "日期不能为空") return; } Ext.Ajax.request({ url : "query_querySaleData.action", params : { saleStatus : saleStatus, saleCode : saleCode, startDate : startDate, endDate : endDate }, success : function(response, action) { // alert(response.responseText); var data = Ext.util.JSON.decode(response.responseText); if (data == null || data == "") { Ext.MessageBox.alert("提示", "没有找到记录!"); } else { updateGrid(data); // 更新表格数据 } }, failure : function(response, action) { Ext.MessageBox.alert("提示", "连接服务器失败!") } }); } function updateGrid(data) { alert(Ext.util.JSON.encode(data)); var proCreate = new Ext.data.Record.create([{ name : "saleNo", mapping : "saleCodeNo", type : "string" }, { name : "saleVIP", mapping : "saleVipNo", type : "string" }, { name : "orderTime", mapping : "saleTime", type : "string" }, { name : "salePerson", mapping : "saleName", type : "string" }, { name : "saleNumber", mapping : "saleNum", type : "string" }, { name : "salePrice", mapping : "salePrice" }]); var jsonStore = new Ext.data.Store({ // data : data, proxy : new Ext.data.PagingMemoryProxy(data), reader : new Ext.data.JsonReader({ totalProperty : "totalProperty", // 总记录数 root : "root" // 所有的数据(json对象数组) }, proCreate) }); jsonStore.load({ params : { start : 0, limit : 5 //这里也没有将值传到后台,那要怎么传? }, callback : function(record, options, success) { if (success == false) { Ext.Msg.buttonText.ok = "确定"; Ext.Msg.alert("错误", "服务器查询失败,请再次尝试!"); } else { Ext.MessageBox.alert("提示", "success") } } }); alert("totalCount = " + jsonStore.getTotalCount()); alert("count = " + jsonStore.getCount()); var saleQueryGrid = Ext.getCmp("saleQueryGird"); saleQueryGrid.getStore().removeAll(); saleQueryGrid.getStore().add(jsonStore.getRange()); // 表格重新绑定数据源 // 分页工具重新绑定数据源 Ext.getCmp("pagingToolbar").bind(jsonStore); }
请大家大家帮帮忙看看,到底哪里不对,该怎么实现这个分页? 很困扰,谢谢了。。
我是通过点击事件之后才发生请求去读取数据的。。
评论
4 楼
温柔企鹅
2011-11-07
我拷了一下代码,我的程序里面,都不会显示出来的,不过,我可以从后台传数据!我感觉你可能没有配置struts.xml文件里面的json
3 楼
ningwuyu
2011-09-06
Ext.onReady(function(){
Ext.MessageBox.alert('aaaaa');
})
Ext.MessageBox.alert('aaaaa');
})
2 楼
ningwuyu
2011-09-06
aaaaaaaaaaaaaaaaa
1 楼
qishi001
2010-08-12
<pre name="code" class="java"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>查询功能的GridPanel</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../ext-all.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
Ext.QuickTips.init();
var store = new Ext.data.Store({
url:'',
reader: new Ext.data.JsonReader({
totalProperty:'total',
root:'results'
},
[
'id','name','sex','age'
]
),
remoteSort : true,
baseParams : {}
});
var ColMod = new Ext.grid.ColumnModel([
{
header: "编号",
sortable: true,
align :'center',
dataIndex: 'id'
},{
header: "姓名",
sortable: true,
align :'center',
dataIndex: 'name'
},{
header: "性别",
sortable: true,
align :'center',
dataIndex: 'sex'
},{
header: "年龄",
sortable: true,
align :'center',
dataIndex: 'age'
}
]);
/**将查询条件封装到封到Ext.Toolbar**/
var TopSerachBar = new Ext.Toolbar({
id : 'TopSerachBar',
border : false,
frame: false,
anchor : '100%',
style: {
border : 'none'
},
items : ['编号:',{
xtype: 'textfield',
id : 'ID',
name : 'ID'
},'-','姓名:',{
xtype: 'textfield',
id : 'NAME',
name : 'NAME'
},'-','年龄:',{
xtype: 'textfield',
id : 'AGE',
name : 'AGE'
},'-',{
text : '查 询',
handler : function (btn,e){
var params = SearchPanel.getForm().getValues();
params['start'] = 0;
params['limit'] = 30;
store.load({params:params});
}
}]
});
/**将Toolbar封装到Ext.form.FormPanel**/
var SearchPanel = new Ext.form.FormPanel({
defaultType: 'textfield',
id : 'SearchPanel',
name : 'SearchPanel',
border : false,
frame : false,
items :[TopSerachBar]
});
var grid = new Ext.grid.GridPanel({
frame: false,
id : 'grid',
ds: store,
trackMouseOver : true,
loadMask:({msg :'数据正在加载中……'}),
height:320,
title:'',
cm: ColMod,
sm : new Ext.grid.RowSelectionModel({singleSelect:true}),
tbar : [SearchPanel],
viewConfig: {
forceFit: true
},
renderTo :'container',
bbar: new Ext.PagingToolbar({
pageSize : 30,
store : store,
displayInfo : true,
beforePageText : '第',
afterPageText : '页&nbsp;共 {0} 页',
refreshText : '刷新',
displayMsg : '显示第 {0} 条到 {1} 条记录,一共 {2} 条记录',
emptyMsg : '没有记录',
doLoad: function(v){
/**点击分页时会把查询参数传递过去**/
var params = SearchPanel.getForm().getValues();
//alert(params.ID);
params['start'] = v;
params['limit'] = this.pageSize;
if (this.fireEvent("beforechange", this, params) !== false) {
this.store.load({
params: params
});
}
}
})
});
});
</script>
</head>
<body>
<div id="container"></div>
</body>
</html></pre>
<p> </p>
<p> 希望对你有帮助。</p>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>查询功能的GridPanel</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../ext-all.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
Ext.QuickTips.init();
var store = new Ext.data.Store({
url:'',
reader: new Ext.data.JsonReader({
totalProperty:'total',
root:'results'
},
[
'id','name','sex','age'
]
),
remoteSort : true,
baseParams : {}
});
var ColMod = new Ext.grid.ColumnModel([
{
header: "编号",
sortable: true,
align :'center',
dataIndex: 'id'
},{
header: "姓名",
sortable: true,
align :'center',
dataIndex: 'name'
},{
header: "性别",
sortable: true,
align :'center',
dataIndex: 'sex'
},{
header: "年龄",
sortable: true,
align :'center',
dataIndex: 'age'
}
]);
/**将查询条件封装到封到Ext.Toolbar**/
var TopSerachBar = new Ext.Toolbar({
id : 'TopSerachBar',
border : false,
frame: false,
anchor : '100%',
style: {
border : 'none'
},
items : ['编号:',{
xtype: 'textfield',
id : 'ID',
name : 'ID'
},'-','姓名:',{
xtype: 'textfield',
id : 'NAME',
name : 'NAME'
},'-','年龄:',{
xtype: 'textfield',
id : 'AGE',
name : 'AGE'
},'-',{
text : '查 询',
handler : function (btn,e){
var params = SearchPanel.getForm().getValues();
params['start'] = 0;
params['limit'] = 30;
store.load({params:params});
}
}]
});
/**将Toolbar封装到Ext.form.FormPanel**/
var SearchPanel = new Ext.form.FormPanel({
defaultType: 'textfield',
id : 'SearchPanel',
name : 'SearchPanel',
border : false,
frame : false,
items :[TopSerachBar]
});
var grid = new Ext.grid.GridPanel({
frame: false,
id : 'grid',
ds: store,
trackMouseOver : true,
loadMask:({msg :'数据正在加载中……'}),
height:320,
title:'',
cm: ColMod,
sm : new Ext.grid.RowSelectionModel({singleSelect:true}),
tbar : [SearchPanel],
viewConfig: {
forceFit: true
},
renderTo :'container',
bbar: new Ext.PagingToolbar({
pageSize : 30,
store : store,
displayInfo : true,
beforePageText : '第',
afterPageText : '页&nbsp;共 {0} 页',
refreshText : '刷新',
displayMsg : '显示第 {0} 条到 {1} 条记录,一共 {2} 条记录',
emptyMsg : '没有记录',
doLoad: function(v){
/**点击分页时会把查询参数传递过去**/
var params = SearchPanel.getForm().getValues();
//alert(params.ID);
params['start'] = v;
params['limit'] = this.pageSize;
if (this.fireEvent("beforechange", this, params) !== false) {
this.store.load({
params: params
});
}
}
})
});
});
</script>
</head>
<body>
<div id="container"></div>
</body>
</html></pre>
<p> </p>
<p> 希望对你有帮助。</p>
发表评论
-
s:iterator 遍历Map
2015-05-24 13:27 745前端js标签 遍历Map的集中方式。 <!-- m ... -
DWZ 局部刷新datagrid
2015-05-24 13:14 2073DWZ是一个前端的富客户端框架,网上找的资料和API ... -
关于工作。
2013-05-23 00:36 0一直都在做着技术民工的活, 也一直都以外包者的身份在打 ... -
异常:java.lang.UnsupportedClassVersionError: Bad version number in .class file
2011-06-14 11:51 1378运行工程的时候突然报这个错。 java.l ... -
Struts2 验证框架不起作用的几种可能<转---记录>
2010-10-21 20:15 12291. 命名是否符合约定: <actionClass&g ... -
ComboBox 默认选中第一个
2010-08-28 15:33 3506listeners : { render : ... -
ComboBox注意的几个小问题-- 值跑位,值显示,获取输入值
2010-08-11 12:54 20371。ComboBox加载数据之后,ComboBox里面的值跑位 ... -
获取GridPanel表格的行号
2010-07-30 15:07 1657var rowNum; var r = updateGr ... -
Extjs formPanel 显示图片 + 上传
2010-06-30 09:04 16883弄了一天的图片上传(也就是在表单里面显示图片,预览图片),显示 ... -
Extjs.form.ComboBox 动态加载数据
2010-06-29 15:57 5797//小记录 // 从后台加载籍贯信息,动态加载 显 ... -
Extjs.GridPanel 显示多行工具栏 (tbar)
2010-06-23 14:15 19988js文件。。 Ext.onReady(functi ... -
计算机中的原码、反码和补码
2010-01-13 22:58 1200这几天因为原码、反码、补码的内容,弄的云里雾里的,向人 ... -
16进制转10进制 & 位移小记
2009-12-23 13:58 319116进制数字表示(0 --- F( 0 到15)) 0 1 2 ... -
JNI加载dll两种方式
2009-12-02 15:34 2278今天在用java调用dll文件的时候调用方法写错了,以至于 ... -
字符集编码
2009-10-14 16:41 8171. 概述 本文主要包括 ... -
JTabel实现行的拖动
2009-10-12 11:10 2200现在一直都在弄Java Swing的开发,因本来就不怎么深入的 ...
相关推荐
NULL 博文链接:https://redboy5711.iteye.com/blog/259913
在使用表格的分页功能时,我们把该控件的start与limits参数与Hibernate的分页功能影射,从页实现了动态的分页效果;而TreePanel的更新也是一个比较常见的问题,当我们点击测试按钮时,TreePanel会请求远程服务器的...
详细介绍了EXTJS中gridpanel分页技术的解析
使用ext3.0 实现 GridPanel 分页显示,调用后台数据 ,格式为json,数据使用 xml 无数据库下载就可以运行,与dwr结合
第二十一章:GridPanel分页 148 一、跑跑题——JSON-LIB 148 二、分页工具栏 154 三、分页 154 四、小结 157 第二十二章:GridPanel扩展 158 一、学会自学吧,朋友 158 二、带摘要的GridPanel 158 三、RowExpander ...
ext 树 gridpanel 分页 ,文件上传, tabpanel ... 的一些例子 刚学的时候做的..只要加上Ext2.0的包就可以直接运行
扩展的GridPanel,让其分页后保持选择状态
ExtJS4.1+ASP.NET MVC3+Spring.NET1.3+EF5+SQLite 整合源码,本人整合多日,也算来之不易,需要的可以下载。...ExtJS部分实现单表CRUD,GridPanel分页和查询,TreePanel管理,GridPanel与TreePanel的复杂联合操作。
源代码js文件 博文链接:https://javaExtjs.iteye.com/blog/200923
实现了从后台读取数据,并进行分页显示,从后台读取treepanel数据,显示,并实现了点击节点复选框的时候,出现父节点和子节点的联动,运行环境是vs2008
非传统分页工具. 简单说明下: 显示第一页与最后一页. 显示当前页对称的前后几页(可以自定义显示多少页). 其它的页码省略. 点击省略号, 省略号隐藏, 显示一个与省略号相同宽度的页面跳转转入框. 整个设置还比较智能....
所以自己学了一段时间,在专案才发现extjs的强大,无论对于开发者还是使用者他都是一场视觉盛宴,这里有我从学习开始做的一些笔记和例子也有自己收集的学习资料,里面包括分页,grid,tree,显示树信息的TreePanel、...
treepanel和gridpanel之间转换(这里只用了一种方式,后面会还会更多的方法来实现,请关注),基本内容的CRUD,注意这里是使用的是泛型接口,只要继承这个基类,就有了分页和基本的CRUD,目前只实现用户管理(包括登录),...
1、演示常用控件使用如:TabPanl,GridPanel,TreePanel,Menu,FormPanel,Window,ux等等。 2、演示控件封装如:表格控件,文本框控件,布局控件,列表控件,图表控件,分页控件等等。 3、演示插件使用和封装插件、...
找了半天,结果在extjs的老家找到一个前辈写的代码,可以在grid上面加上合计, <br>但是却只能合计grid里面的数据,但是我们平常一般是只显示20行或者30行,这样的合计就没有什么意义,我们的合计数据是单独从...
10.4 分页设置PageSizePlugin 282 10.5 行数据扩展RowExpander 284 10.6 本章小结 290 第五部分 调试 第11章 调试 292 11.1 测试Ext.Element的功能 292 11.1.1 获取Ext.Element实例 292 11.1.2 测试CSS样式操作 294 ...