开始的时候只是听说过ext,也不知道他是个怎样的东东.
现在用了,发现在这玩意确实很强大.在项目中用他做了个分页,挺好用.
帖出来代码共享一下.
1.页面要用到ext框架,必须先导入两个js文件和它自带的样式文件:
我用的是sqlserver数据库,分页可能和别的数据库的分页有差别.
先说说页面部分的.
2. Ext.onReady(function(){}这样就相当于在页面上写了个段javascript然后在<body>中onload调用的一样.
首先要得到一个JsonStore对象:
3.然后就是在页面上设置列了,得要一个ColumnModel对象.
4.用了列以后就得有个地方来显示了,当然就少了不GridPanel.
现在就继续说GridPanel里参数,store设置的就是第二步里得到的那个store,autoWidth:true就是设置他的宽度为自动扩展,height:400设置的是他的高为400px,bbar设置的是分页工具栏.
4.现在数据也有了,网格也有了,分页工具栏也有了,列也有了,是不是还差个显示窗口呢.
5.还有很重要的一步,就是要加载数据库:store.load();
[color=red]现在页面的基本上就完成了,现在就剩下类中的处理了.[/color]
1.在action中首先得到PrintWriter out = response.getWriter();输出对象,
设置取前15条,和获取页面请求的参数获取哪些.
2.执行数据库的方法:
3.再回到action当中,得到数据库的总条数
int count=0;
在dao中的方法:
在action中把获取到数据库的总条数赋给
3.现在就改输出到页面了.
如果数据库的数据位空就返回一个空.
4.如果有数据,就改拼json语句了:
这样就实现了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"
});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
}]);4.用了列以后就得有个地方来显示了,当然就少了不GridPanel.
var grid=new Ext.grid.GridPanel({
title:":::管理员信息维护:::",
cm:cm,
sm:check,
store:store,
autoWidth:true,
height:400,
bbar:bbar
}); var check=new Ext.grid.CheckboxSelectionModel({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}
});4.现在数据也有了,网格也有了,分页工具栏也有了,列也有了,是不是还差个显示窗口呢.
var win=new Ext.Window({
closable:false,
width:920,
height:450,
items:grid,
maximizable:true
}).show();5.还有很重要的一步,就是要加载数据库:store.load();
[color=red]现在页面的基本上就完成了,现在就剩下类中的处理了.[/color]
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();3.现在就改输出到页面了.
if(list.size()<=0){//先决条件
out.println("{totalProperty:0,data:[]}");
return null;
}如果数据库的数据位空就返回一个空.
4.如果有数据,就改拼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做的分页.
3703
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
