`

ext分页

    博客分类:
  • Ext
阅读更多

开始的时候只是听说过ext,也不知道他是个怎样的东东.
现在用了,发现在这玩意确实很强大.在项目中用他做了个分页,挺好用.
帖出来代码共享一下.
1.页面要用到ext框架,必须先导入两个js文件和它自带的样式文件:

<link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css" />   
<script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>   
<script type="text/javascript" src="ext/ext-all.js"></script>  
有了这三个以后就可以直接用了.
我用的是sqlserver数据库,分页可能和别的数据库的分页有差别.
先说说页面部分的.
2. Ext.onReady(function(){}这样就相当于在页面上写了个段javascript然后在<body>中onload调用的一样.
首先要得到一个JsonStore对象: 
var store=new Ext.data.JsonStore({   
                url:"managerSystemUser.do",   
                root:"data",   
                fields:["userId","userName","userPhone","userMail","mobilePhone","userAddress"],   
                totalProperty:"totalProperty"  
            });  
 这里的参数url设置的就是你查询数据的action,root是和totalProperty这两个参数都是和action里的参数对应的,action里写的是什么这里就必须是.还有一个参数就是fields了,这个地方的参数都是和action里输出的那些参数对应的.
3.然后就是在页面上设置列了,得要一个ColumnModel对象. 
var cm=new Ext.grid.ColumnModel([check,{
       			header:"用户ID",
       			dataIndex:"userId",
       			sortable: true,
       			type:"int"
       		},{
       			header:"用户名",
       			dataIndex:"userName",
       			sortable: true
       		},{
       			header:"用户电话",
       			dataIndex:"userPhone"
       		},{
       			header:"用户邮箱",
       			dataIndex:"userMail",
       			width:150
       		},{
       			header:"用户手机",
       			dataIndex:"mobilePhone",
       			width:150
       		},{
       			header:"用户地址",
       			dataIndex:"userAddress",
       			width:200
       		}]);
 这里的参数header是设置列显示的是什么,如果不设置默认的就是和dataIndex一样的,这里的dataIndex是和上边步骤2中的fields中的参数是相对应的,sortable是来设置是否可以在页面上排序功能,哪个里设置了true哪个就可以排序,type是来说明这一列是整数,要按整数的方法排序,如果不设置这个的话,他默认的会用字符串方式排序.
4.用了列以后就得有个地方来显示了,当然就少了不GridPanel.
var grid=new Ext.grid.GridPanel({
    			title:":::管理员信息维护:::",
    			cm:cm,
    			sm:check,
    			store:store,
    			autoWidth:true,
    			height:400,
    			bbar:bbar
    		}); 
  这里的title网格标题显示的内容,cm参数就是设置ColumnModel对象.sm那里是我加了个复选框,
var check=new Ext.grid.CheckboxSelectionModel({singleSelect :true}); 
 这样就得到复选框了,设置的singleSelect:true表示只能让其每次选择一个,不让多选.还有上边的第三步里
([check,{
       			header:"用户ID",
       			dataIndex:"userId",
       			sortable: true,
       			type:"int"
 这里也有个复选框.这就是说者一列的前边都会加上一个复选框.
现在就继续说GridPanel里参数,store设置的就是第二步里得到的那个store,autoWidth:true就是设置他的宽度为自动扩展,height:400设置的是他的高为400px,bbar设置的是分页工具栏.
var bbar=new Ext.PagingToolbar({
       			pageSize:15,
       			store:store,
       			beforePageText:"当前第",
       			afterPageText:"页,共{0}页",
       			lastText:"尾页",
       			nextText :"下一页",
       			prevText :"上一页",
       			firstText :"首页",
       			refreshText:"刷新页面",
       			displayInfo: true,
       			displayMsg:"当前显示 {0} - {1}条, 共 {2}
       		});
 这段代码就是分页工具栏,pageSize设置的页面显示多少页,store设置的数据从哪来.下边的都有中文就不一一解释了.
4.现在数据也有了,网格也有了,分页工具栏也有了,列也有了,是不是还差个显示窗口呢.
var win=new Ext.Window({
    			closable:false,
    			width:920,
    			height:450,
    			items:grid,
    			maximizable:true
    			}).show();
 这样就有了显示的窗口了,closable设置的是这个窗口没有关闭按钮,就是不能让用户关闭这个窗口,items设置的是要显示的网格,这个应该是可以设置多个的,但是我这里只用一个就够了,maximizable设置的是窗口可以有最大化按钮.
5.还有很重要的一步,就是要加载数据库:store.load();

现在页面的基本上就完成了,现在就剩下类中的处理了.

1.在action中首先得到PrintWriter out = response.getWriter();输出对象,
int starts = new Integer(request.getParameter("start") == null ? "0"
				: request.getParameter("start"));
int limit = 15;
 设置取前15条,和获取页面请求的参数获取哪些.
2.执行数据库的方法:
public List getSysUser(int start,int limit) throws SQLException{
		String sql = "select  top "+limit+" 用户id, 用户名称, 用户密码, 用户电话, 用户邮箱, " +
				" 用户手机,用户地址 from 用户信息 where 用户id not in" +
				" (select top "+start+" 用户id from 用户信息 order by 用户id desc ) order by 用户id desc";
		Connection conn =null;
		ResultSet rs = null;
		List<SystemUserVo> list = null;
		log.fine( "[query(sqlLabel)] sql : " + sql );
		try {
			conn = DbTool.getDs().getConnection();
			PreparedStatement pstm = conn.prepareStatement(sql);
			//pstm.setInt(1,start);
			//pstm.setInt(2,limit);
			rs = pstm.executeQuery();
		} catch (SQLException e) {
			e.printStackTrace();
		}
		if(null!=rs){
			list = new ArrayList<SystemUserVo>();
			while(rs.next()){
				SystemUserVo user = new SystemUserVo();
				user.setUserId(rs.getString(1));
				user.setUserName(rs.getString(2));
				user.setUserPhone(rs.getString(4));
				user.setUserEmail(rs.getString(5));
				user.setMobilePhone(rs.getString(6));
				user.setUserAddress(rs.getString(7));
				list.add(user);
			}
		}
		if(conn!=null){
			conn.close();
		}
		return list;
		
		
	}
 3.再回到action当中,得到数据库的总条数
int count=0;
在dao中的方法:
public int getSysUserCount(){
		String sql="select count(*) count from 用户信息";
		Connection conn =null;
		ResultSet rs = null;
		int count=0;
		try {
			conn = DbTool.getDs().getConnection();
			PreparedStatement pstm = conn.prepareStatement(sql);
			rs = pstm.executeQuery();
			if(rs.next()){
				count=rs.getInt(1);
			}
		} catch (SQLException e) {
			e.printStackTrace();
		}
		try {
			if(conn!=null){
				conn.close();
			}
		} catch (SQLException e) {
			e.printStackTrace();
		}
		
		return count;
		
	}
 在action中把获取到数据库的总条数赋给
count=new BrowseSystemUser().getSysUserCount();  
 4.现在就改输出到页面了.
if(list.size()<=0){//先决条件
			out.println("{totalProperty:0,data:[]}");
			return null;
		}
 如果数据库的数据位空就返回一个空.
5.如果有数据,就改拼json语句了:
StringBuffer sb = new StringBuffer("{totalProperty:" + count
				+ ",data:[");
		
		SystemUserVo sys = list.get(0);

		sb.append("{userId:"+sys.getUserId()+",userName:'" + sys.getUserName() + "',userPhone:'"
				+ sys.getUserPhone() + "',userMail:'" + sys.getUserEmail()
				+ "',mobilePhone:'" + sys.getMobilePhone() + "',userAddress:'"
				+ sys.getUserAddress() + "'}");
		int size=list.size();
		for (int i = 1; i < size; i++) {
			SystemUserVo user = list.get(i);
			sb.append(",{userId:"+user.getUserId()+",userName:'" + new String(user.getUserName().getBytes()) + "',userPhone:'"
					+ user.getUserPhone() + "',userMail:'" + user.getUserEmail()
					+ "',mobilePhone:'" + user.getMobilePhone() + "',userAddress:'"
					+ new String(user.getUserAddress().getBytes()) + "'}");
		}

		sb.append("]}");
out.println(sb.toString());
return null;
 这样就实现了ext做的分页.
 
 

 
分享到:
评论

相关推荐

    EXT分页工具条

    EXT分页工具条是一款在Web应用中常用的组件,主要用于展示数据集的分页信息,让用户能够方便地浏览大量数据。EXT是一个强大的JavaScript框架,它提供了丰富的UI组件和数据管理功能,使得开发人员能够构建高性能、...

    ext分页客户端demo Java js

    在这个"ext分页客户端demo Java js"的示例中,我们将探讨EXTJS如何实现客户端分页,以及如何与后端(如Java)进行数据交互,而无需在服务器端编写额外的Java代码。 EXTJS中的分页组件主要由Ext.grid.Panel和Ext....

    Ext分页排序 Ext分页排序

    总结,Ext分页排序是提高Web应用数据管理效率的关键特性。正确配置`Store`、`proxy`和分页工具栏,可以为用户提供流畅的数据浏览和排序体验,同时优化服务器资源的利用。在实际项目中,根据数据量和性能需求,选择...

    EXT 分页,树形结构案列

    EXT分页主要是为了处理大数据集,提高网页加载速度和用户体验。它通过与服务器进行交互,每次只请求和显示一部分数据,而不是一次性加载所有数据。这降低了对服务器资源的需求,并减少了网络传输的数据量。 1. 分页...

    Ext 分页核心代码

    本篇将深入探讨Ext分页的核心代码及其工作原理,帮助你理解和实现高效的分页功能。 1. **Ext Grid Panel与分页** Ext Grid Panel是Ext JS中的一个关键组件,用于显示表格数据。它支持分页功能,可以轻松地管理和...

    EXT分页视频

    EXT分页视频是针对EXT框架中的分页功能进行深入讲解的教程资源,主要适用于Web开发人员,特别是使用EXT.js库的开发者。EXT.js是一个强大的JavaScript UI框架,它提供了丰富的组件和功能,包括表格分页,使得用户可以...

    EXT树表分页(SERVLET)

    5. **EXT分页控件**:EXT提供内置的分页工具栏(pagingToolbar),可以自动与Store关联,显示页码并处理分页事件。开发者只需在界面上添加这个控件,即可实现分页功能。 6. **AJAX通信**:EXT通过AJAX与服务器进行...

    ext分页查询ext分页查询ext分页查询ext分页查询ext分页查询

    2. **分页插件(Paging Toolbar)**:当与数据存储结合使用时,分页工具栏(`Ext.PagingToolbar`)可以在底部显示页码导航,允许用户切换页面。它需要配置`store`属性来引用数据存储,并通过`displayMsg`和`emptyMsg...

    关于EXT分页,分组,排序

    var grid = new Ext.grid.GridPanel({ ... viewConfig: { forceFit: true, enableGroupingMenu: true }, ... }); ``` ### 三、EXTJS 排序 排序是数据展示中非常重要的功能之一,EXTJS 提供了灵活的排序...

    ExtJS笔记---Grid实现后台分页

    在IT行业中,ExtJS是一个广泛使用的JavaScript库,用于构建富客户端的Web应用程序。它提供了丰富的组件库,包括数据...在阅读这篇博客时,可以参照给出的"extgrid"文件,查看具体的代码实现,以便更好地理解和学习。

    Ext grid 分页实例源码

    Ext grid PagingToolbar分页实例源码Ext grid PagingToolbar分页实例源码Ext grid PagingToolbar分页实例源码Ext grid PagingToolbar分页实例源码

    ext 分页技术

    非常好的ext客户端分页方式,美化界面没话说

    Mvc4 分页 排序 搜索

    在本文中,我们将深入探讨如何在ASP.NET MVC4框架中实现分页、排序和搜索功能,这些功能对于任何Web应用程序的用户体验都至关重要。MVC4是一个流行且强大的开发平台,用于构建可伸缩、高性能的Web应用。我们将通过一...

    ExtJs分页

    ExtJS 分页是一种在Web应用中管理大量数据的常见技术,尤其在与Spring MVC框架集成时,能够提供高效的数据展示和交互。在ExtJS中,分页通常与数据网格(Grid)组件一起使用,用于显示从后端服务(如SQL Server 2008...

    Ext扩展控件-------可以通过下拉列表框选择每页的分页条数

    在本例中,“ux.Andrie.pPageSize”可能是一个EXT社区成员Andrie开发的自定义分页大小选择器,它扩展了默认的EXT分页工具栏。 2. **分页工具栏(paging toolbar)**:EXT Grid的分页功能通常通过分页工具栏来实现,...

    Jquery页面分页

    本篇文章将围绕jQuery页面分页展开,介绍其原理、方法以及相关的DWR(Direct Web Remoting)和EXT分页实现。 1. **jQuery分页基本原理** jQuery分页主要基于DOM操作和AJAX请求。首先,通过DOM操作构建分页导航条,...

    ext grid json分页显示

    在IT领域,尤其是在Web开发中,"ext grid json分页显示"是一个常见的需求,它涉及到前端数据展示和后端数据交互的关键技术。本例中提到的解决方案是利用DWR(Direct Web Remoting)和EXT.js库来实现。下面将详细阐述...

    简单的小例子Ext+servlet 分页

    本示例探讨了如何结合Ext JS(一个强大的JavaScript框架)和Servlet(Java Web开发中的服务器端组件)来实现简单的分页功能。下面将详细解释这个主题。 首先,Ext JS是一个用于构建用户界面的前端JavaScript库,它...

    ext4 表格分页实例代码

    EXT JS中的表格分页通常通过Grid Panel组件实现,该组件可以与数据存储(Store)配合,数据存储负责管理数据,包括加载、过滤、排序和分页。分页功能由Pager Toolbar组件提供,它是一个可自定义的工具栏,包含导航...

    Ext组合框comboBox带分页

    用EXT来实现下拉框ComboBox 下拉框可以实现分页

Global site tag (gtag.js) - Google Analytics