开始的时候只是听说过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做的分页.