開始的時候只是聽說過ext,也不知道他是個怎樣的東東.
現在用了,發現在這玩意確實很強大.在項目中用他做了個分頁,挺好用.
帖出來代碼共享一下.
1.頁面要用到ext框架,必須先導入兩個js文件和它自帶的樣式文件:
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對象:
我用的是sqlserver數據庫,分頁可能和別的數據庫的分頁有差別.
先說說頁面部分的.
2. Ext.onReady(function(){}這樣就相當於在頁面上寫了個段javascript然後在<body>中onload調用的一樣.
首先要得到一個JsonStore對象:
Js代碼 ![複製代碼]()
- 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對象.
3.然後就是在頁面上設置列了,得要一個ColumnModel對象.
Js代碼 ![複製代碼]()
- 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.
Java代碼 ![複製代碼]()
- var grid=new Ext.grid.GridPanel({
- title:":::管理員信息維護:::",
- cm:cm,
- sm:check,
- store:store,
- autoWidth:true,
- height:400,
- bbar:bbar
- });
var grid=new Ext.grid.GridPanel({
title:":::管理員信息維護:::",
cm:cm,
sm:check,
store:store,
autoWidth:true,
height:400,
bbar:bbar
}); Js代碼 ![複製代碼]()
- var check=new Ext.grid.CheckboxSelectionModel({singleSelect :true});
Js代碼 ![複製代碼]()
- ([check,{
- header:"用戶ID",
- dataIndex:"userId",
- sortable: true,
- type:"int"
現在就繼續說GridPanel裏參數,store設置的就是第二步裏得到的那個store,autoWidth:true就是設置他的寬度爲自動擴展,height:400設置的是他的高爲400px,bbar設置的是分頁工具欄.
Js代碼 ![複製代碼]()
- var bbar=new Ext.PagingToolbar({
- pageSize:15,
- store:store,
- beforePageText:"當前第",
- afterPageText:"頁，共{0}頁",
- lastText:"尾頁",
- nextText :"下一頁",
- prevText :"上一頁",
- firstText :"首頁",
- refreshText:"刷新頁面",
- displayInfo: true,
- displayMsg:"當前顯示 {0} - {1}條, 共 {2}
- });
4.現在數據也有了,網格也有了,分頁工具欄也有了,列也有了,是不是還差個顯示窗口呢.
Js代碼 ![複製代碼]()
- var win=new Ext.Window({
- closable:false,
- width:920,
- height:450,
- items:grid,
- maximizable:true
- }).show();
5.還有很重要的一步,就是要加載數據庫:store.load();
現在頁面的基本上就完成了,現在就剩下類中的處理了.
1.在action中首先得到PrintWriter out = response.getWriter();輸出對象,
Java代碼 ![複製代碼]()
- int starts = new Integer(request.getParameter("start") == null ? "0"
- : request.getParameter("start"));
- int limit = 15;
int starts = new Integer(request.getParameter("start") == null ? "0"
: request.getParameter("start"));
int limit = 15;2.執行數據庫的方法:
Java代碼 ![複製代碼]()
- 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;
- }
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;
}int count=0;
在dao中的方法:
Java代碼 ![複製代碼]()
- 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;
- }
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;
}Java代碼 ![複製代碼]()
- count=new BrowseSystemUser().getSysUserCount();
count=new BrowseSystemUser().getSysUserCount(); Java代碼 ![複製代碼]()
- if(list.size()<=0){//先決條件
- out.println("{totalProperty:0,data:[]}");
- return null;
- }
if(list.size()<=0){//先決條件
out.println("{totalProperty:0,data:[]}");
return null;
}5.如果有數據,就改拼json語句了:
Java代碼 ![複製代碼]()
- 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;
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;
