Extjs-表格 Ext.grid.GridPanel 分页------------------------------------------------
来源:互联网 发布:成都java培训哪家好 编辑:程序博客网 时间:2024/06/04 18:17
1.表格添加分页条
分页store不能使用Ext.data.SimpleStore,因为分页需要调用load(),load()与Proxy有关,SimpleStore不但没有设置Proxy,而且也没有重写load()所有会出现错误
2.通过后台脚本获取分页数据
JSON里面除了name就是value,如果是数字不用加引号,如果加引号就是字符串,如果用[]包裹就是数组,如果出现{}就是嵌套的JSON
list.jsp
<%@ page language="java" pageEncoding="UTF-8"%><%String start = request.getParameter("start");String limit = request.getParameter("limit");int index = 0;//Integer.parseInt(start);int pageSize = 4;//Integer.parseInt(limit);String name = "李文超";String descn = "李文超的描述";String sex = "17";String json = "{totalProperty : 10,root:[";for(int i =index;i<pageSize+index;i++){json+="{id:'"+i+"',name:'"+name+"',descn:'"+descn+"',sex:'"+sex+"'}";if(i!=pageSize+index-1){json+=",";}}json+="]}";System.out.println(json);response.getWriter().write(json);%>index.jsp
<%@ page language="java" pageEncoding="UTF-8"%><%String rootpath = request.getContextPath();%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head><link rel="stylesheet" type="text/css" href="<%=rootpath%>/ext/resources/css/ext-all.css"/><script type="text/javascript" src="<%=rootpath%>/ext/adapter/ext/ext-base.js"></script><script type="text/javascript" src="<%=rootpath%>/ext/ext-all.js"></script><script type="text/javascript" src="<%=rootpath%>/ext/ext-all-debug.js"></script><script type="text/javascript" src="<%=rootpath%>/ext/ext-lang-zh_CN.js"></script><!-- 带进度条的分页需要加下面这个文件 --> <script type="text/javascript" src="<%=rootpath%>/ext/examples/ux/ProgressBarPager.js"></script><script type="text/javascript" defer>Ext.onReady(function(){Ext.BLANK_IMAGE_URL = '<%=rootpath%>/ext/resources/images/default/s.gif';var start = 0;var limit = 3;var params = {start:start,limit:limit};var record = Ext.data.Record.create([ {name : 'id'},{name : 'name'},{name : 'descn'},{name : 'sex'}]);var store = new Ext.data.Store({proxy : new Ext.data.HttpProxy({url : 'list.jsp'}),reader : new Ext.data.JsonReader({totalProperty : 'totalProperty',root : 'root',fields: record})});var sm = new Ext.grid.CheckboxSelectionModel({singleSelect : true //true表示只可以选择单行});var cm = new Ext.grid.ColumnModel([new Ext.grid.RowNumberer(),sm,{header:'编号',dataIndex:'id'},{header:'名称',dataIndex:'name'},{header:'描述',dataIndex:'descn'},{header:'性别',dataIndex:'sex'}]);var grid = new Ext.grid.GridPanel({store : store,height : 20,cm : cm,sm : sm,bbar : new Ext.PagingToolbar({pageSize : limit,//每页显示几条数据store : store,displayInfo : true,//是否显示数据信息displayMsg : '显示第{0}条到{1}条记录,一种{2}条',//displayInfo:true时才有效,{0},{1}会自动被替换成数据emptyMsg : '没有数据',//没有数据时显示//带进度条的分页工具条 plugins : new Ext.ux.ProgressBarPager()}),listeners : {'beforerender' : function(){store.load({params:params});}}});new Ext.Viewport({layout:'fit',items: [grid]});});</script> </head> <body> </body></html>
3.本地数组读取数据,并且实现内存分页
<%@ page language="java" pageEncoding="UTF-8"%><%String rootpath = request.getContextPath();%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head><link rel="stylesheet" type="text/css" href="<%=rootpath%>/ext/resources/css/ext-all.css"/><script type="text/javascript" src="<%=rootpath%>/ext/adapter/ext/ext-base.js"></script><script type="text/javascript" src="<%=rootpath%>/ext/ext-all.js"></script><script type="text/javascript" src="<%=rootpath%>/ext/ext-all-debug.js"></script><script type="text/javascript" src="<%=rootpath%>/ext/ext-lang-zh_CN.js"></script><script type="text/javascript" src="<%=rootpath%>/ext/PagingMemoryProxy.js"></script><!-- 带进度条的分页需要加下面这个文件 --> <script type="text/javascript" src="<%=rootpath%>/ext/examples/ux/ProgressBarPager.js"></script><script type="text/javascript" defer>Ext.onReady(function(){Ext.BLANK_IMAGE_URL = '<%=rootpath%>/ext/resources/images/default/s.gif';var limit = 2;var start = 0;var data = [['1','李文超','李文超的描述','male'],['2','范勇','范勇的描述','female'],['3','马新军','马新军的描述','male'],['4','常高军','常高军的描述','female'],['5','何卫国','何卫国的描述','male']];var store = new Ext.data.Store({proxy : new Ext.data.PagingMemoryProxy(data),reader : new Ext.data.ArrayReader({},[{name : 'id',mapping:0},{name : 'name',mapping:1},{name : 'descn',mapping:2},{name : 'sex',mapping:3},])});store.load({params:{start:start,limit:limit}});var sm = new Ext.grid.CheckboxSelectionModel();var cm = new Ext.grid.ColumnModel([new Ext.grid.RowNumberer(),sm,{header:'编号',dataIndex:'id'},{header:'名称',dataIndex:'name'},{header:'描述',dataIndex:'descn'},{header:'性别',dataIndex:'sex'}]);var grid = new Ext.grid.GridPanel({store : store,height : 20,cm : cm,sm : sm,bbar : new Ext.PagingToolbar({pageSize : limit,//每页显示几条数据store : store,displayInfo : true,//是否显示数据信息//displayInfo:true时才有效,{0},{1}会自动被替换成数据displayMsg : '显示第{0}条到{1}条记录,一种{2}条',emptyMsg : '没有数据',//没有数据时显示//带进度条的分页工具条 plugins : new Ext.ux.ProgressBarPager()})});new Ext.Viewport({layout:'fit',items: [grid]});});</script> </head> <body> </body></html>
- Extjs-表格 Ext.grid.GridPanel 分页------------------------------------------------
- Extjs-表格 Ext.grid.GridPanel
- Extjs-表格 Ext.grid.GridPanel
- ExtJS 普通表格:Ext.grid.GridPanel属性祥解
- ExtJS 普通表格:Ext.grid.GridPanel属性祥解
- ExtJS 普通表格:Ext.grid.GridPanel属性祥解
- ExtJS 普通表格:Ext.grid.GridPanel属性祥解
- Extjs学习 Ext.grid.GridPanel
- EXT Grid表格分页
- Extjs 学习 --Ext.grid.GridPanel()(一)
- ExtJs的Ext.grid.GridPanel不能选择复制表格中的内容解决方案
- ExtJs的Ext.grid.GridPanel不能选择复制表格中的内容解决方案
- Ext.grid.GridPanel —— 表格组件
- extjs中如何创建一个带分页功能的Ext.grid.GridPanel
- Ext.grid.GridPanel + asp.net 数据分页
- EXTJS中Ext.grid.GridPanel配置项autoExpandColumn的使用方法
- Ext.grid.GridPanel
- Ext.grid.GridPanel
- 雷锋读图:导致用户离开网站的8大负面因素
- java学习笔记(一)
- MFC程序使用CComboBox控件详解
- 版本控制系统Git
- Array.prototype.slice.call(arguments,1)原理
- Extjs-表格 Ext.grid.GridPanel 分页------------------------------------------------
- 电商价格战的冰与火:当局者清,旁观者迷
- 设计中不可忽略的产品状态
- C#如何给自定义控件添加说明(解释)
- 0.ring3-APC注入
- repeater插入,多选删除,条件查询实例(存储过程实现)
- Android的Window类
- asp.net里面用appscan扫描部分漏洞与解决方法(一)
- 雷锋科普:从HDMI到MHL,手机也走进高清输出的时代