Extjs分页grid组件

今天之闲,写篇关于Extjs中分页技术,之所以对Extjs感兴趣,完全出于对Extjs分页grid面板莱单栏的上一页、下一页界面好看,而且简单。实现分页很简单其实和Extjs动态树状莱单一样,都是用到JSON数据类型存储。
JS代码:
Ext.onReady(function(){

   Ext.lib.Ajax.defaultPostHeader += '; charset=UTF-8';
    var sm = new Ext.grid.CheckboxSelectionModel();
var cm = new Ext.grid.ColumnModel([sm,
  new Ext.grid.RowNumberer(),
  {header:'编号',dataIndex:'id',sortable:true,
   editor:new Ext.grid.GridEditor(new Ext.form.TextField(
   {
    allowBlank:false
   }))},
  {header:'城镇',dataIndex:'price',sortable:true,width:300,
  editor:new Ext.grid.GridEditor(new Ext.form.TextField(
   {
    allowBlank:false
   }))},
  {header:'邮编',dataIndex:'sex',sortable:true,renderer:renderSex}
]);

function renderSex(value)
{
  if(value=='woman')
  {
   return "<span style='color:red'>"+value+"</span>";
  }
  else
  {
   return "<img src='js/drop-yes.gif'/> <span style='color:greed'>"+value+"</span>";
  }
}

var store= new Ext.data.Store({
  proxy:new Ext.data.HttpProxy({url:'ExtjsServlet'}),
  reader:new Ext.data.JsonReader({
    totalProperty:'totalProperty',
    root:'root'
   },[
    {name:'id'},
    {name:'price'},
    {name:'sex'}
   ])
  });
  
var grid =  new Ext.grid.GridPanel({
  renderTo:"right",
  store:store,
  cm:cm,
//  sm:new Ext.grid.RowSelectionModel({singleSelect:true}),
  loadMask:true,
  width:752,
  height:470,
// bbar:new Ext.PagingToolbar({下面工具条
  bbar:new Ext.PagingToolbar({
   pageSize:10,
   store:store,
   displayInfo:true,
   displayMsg:'显示第{0}数据到{1},一共有{2}条',
   emptyMsg:'没有记录'
  
  }),
tbar:[{
         text: '删除',
            iconCls:'user',
            handler : function(){
          //var record = grid.getSelectionModel().getSelected();// 返回值为 Record 类型
            var rows = grid.getSelectionModel().getSelections();// 返回值为 Record 数组
            for( var i=0;i<rows.length;i++){
            
      store.remove(rows);
      
       }
      grid.view.refresh();
//      this.getEl().dom.action='./formservlet?operator=save';
   this.getEl().dom.submit();
            }},{
       text: '添加'},
        
     {
       text: '修改'
      
     },
     {
       text: '查询'
    }]

});


store.load({params:{start:0,limit:10}})

Ext.get('remove').on("click",function(){
  var rows = grid.getSelectionModel().getSelections();// 返回值为 Record 数组
  for( var i=0;i<rows.length;i++){
   store.remove(rows);
  }
   grid.view.refresh();
},this);
// grid.render();
});
Servlet代码:
public class ExtjsServlet extends HttpServlet {
/*
int ................
*/
public void doGet(HttpServletRequest request, HttpServletResponse response)
   throws ServletException, IOException {
  response.setContentType("text/html;charset=UTF-8");
  int start  =Integer.parseInt(request.getParameter("start"));
  int pageSize=Integer.parseInt(request.getParameter("limit"));
  System.out.println("分页servlet");
  if(start==0){start=1;}
  String sql = "SELECT TOP "+pageSize+"* FROM county WHERE (id NOT IN ( SELECT TOP "+pageSize*(start-1)+"id FROM county ORDER BY id))ORDER BY id";
  System.out.println(start+" "+pageSize);
  JdbcDB jb=new JdbcDB();
  Connection conn=jb.getConnection();
  StringBuilder s=jb.getResultSet(conn,sql);
  System.out.println(s.toString());
  response.getWriter().write(s.toString());
  jb.close(conn);
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
   throws ServletException, IOException {
       doGet(request, response);
}
public void init() throws ServletException {
  // Put your code here
}
}
java代码:
public class JdbcDB {
/**
  * @param args
  *
  *
  */
public Connection getConnection(){
  Connection conn = null;
  try{
   Class.forName("net.sourceforge.jtds.jdbc.Driver");
   conn = DriverManager.getConnection("jdbc:jtds:sqlserver://localhost:1433/zhoutie","sa","123");
  }catch(Exception e){
   e.printStackTrace();
  }
  return conn;
}
public void close(Connection conn){
  if(conn!=null){
   try{
    conn.close();
   }catch(SQLException e){
    e.printStackTrace();
   }
  }
}

public StringBuilder getResultSet(Connection conn,String sql){
  
  int n=this.getResulsetRow(conn);
  StringBuilder s= new StringBuilder("{totalProperty:"+n+",root:[");
  PreparedStatement pst = null;
  ResultSet rs = null;
  try{
   pst = conn.prepareStatement(sql);  
   rs = pst.executeQuery();
  
   int i = 0;
   while(rs.next())
   {
    i++;
    String a=String.valueOf(rs.getInt("countyid"));
    String c=rs.getString("county");
    String b=String.valueOf(rs.getInt("fatherid"));
//    System.out.println(a);
    s.append("{id:'"+a+"',price:'"+c.trim()+"',sex:'"+b+"'}");
//    System.out.println(rs.getString(2));
    if(i<10)
    {
     s.append(",");
    }
   }
  
  } catch(SQLException e){
   e.printStackTrace();
  }
  s.append("]}");
  return s;
}


public int getResulsetRow(Connection conn){
  int n=0;
  Statement pst = null;
  ResultSet rs = null;
   try{
    pst=conn.createStatement(ResultSet.TYPE_SCROLL_INSENSITIVE,ResultSet.CONCUR_READ_ONLY);
    rs=pst.executeQuery("select count(id) from county");
    rs.next();
    n=rs.getInt(1);
    System.out.println(n);
   }catch(SQLException e){
    e.printStackTrace();
   }
   return n;
   }

public static void main(String[] args) {
  JdbcDB jb=new JdbcDB();
  Connection conn=jb.getConnection();
  String sql = "SELECT TOP "+10+"* FROM county WHERE (id NOT IN ( SELECT TOP "+10*(1-1)+"id FROM county ORDER BY id))ORDER BY id";
  StringBuilder s=jb.getResultSet(conn ,sql);
  System.out.println(s.toString());
  jb.close(conn);
}
}

你可能感兴趣的:(sql,Ajax,json,jdbc,ext)