`
zhoutiea
  • 浏览: 38707 次
  • 性别: Icon_minigender_1
  • 来自: 沈阳
社区版块
存档分类
最新评论

Extjs分页grid组件

    博客分类:
  • java
阅读更多
今天之闲,写篇关于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);
}
}
分享到:
评论

相关推荐

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

    这篇“ExtJS笔记——Grid实现后台分页”探讨了如何在ExtJS的Grid组件中实现高效的后台分页功能。 后台分页是一种常见的数据处理策略,特别是在大数据量的情况下,它将数据分批加载,避免一次性加载所有记录导致的...

    extjs 分页

    EXTJS分页通常与数据访问对象(DAO)和动作控制器(Action)结合使用,形成一个完整的数据获取和展示流程。下面将详细阐述EXTJS分页的核心概念、实现方法以及DAO和Action在其中的作用。 一、EXTJS分页核心概念 1. ...

    Extjs grid分页1

    首先,ExtJS Grid是一种强大的JavaScript组件,用于在Web应用中创建数据网格。它支持各种特性,如排序、过滤、分组、分页等。分页功能特别适用于处理大量数据,因为用户可以按需加载和查看数据,提高页面性能和用户...

    Extjs4 grid使用例子

    在给定的"Extjs4 grid使用例子"中,我们可以深入理解如何在MVC架构下有效地利用ExtJS4的Grid组件。Grid组件是ExtJS中的核心部分,它提供了一个灵活的、可定制的数据展示网格,通常用于显示和操作大量数据。 1. **...

    extjs 分页是碰到的问题,点击下一页事,查询条件无法传递

    ### Extjs分页遇到的问题:点击下一页时查询条件无法传递 在开发基于Extjs的应用程序时,分页是一项常用且重要...通过以上步骤,可以有效地解决Extjs分页时查询条件无法传递的问题,确保用户能够获得准确的数据结果。

    ExtJS 4.2 Grid组件单元格合并的方法

    ExtJS 4.2 Grid组件本身并没有提供单元格合并功能,需要自己实现这个功能。 目录 1. 原理 2. 多列合并 3. 代码与在线演示 1. 原理 1.1 HTML代码分析 首先创建一个Grid组件,然后查看下的HTML源码。 1.1.1 Grid组件 ...

    ExtJs6.5Grid列表导出(包含样式)

    在ExtJs 6.5版本中,开发人员经常需要实现数据导出功能,特别是对于Grid组件,这是一项常见的需求。Grid列表通常用于展示大量结构化的数据,而导出功能可以帮助用户将这些数据保存到本地,方便进一步分析或共享。...

    extjs4打印grid插件

    Grid是ExtJS中的核心组件,它提供了一种灵活的方式来展示和操作数据集。在ExtJS4中,有时我们需要实现打印Grid的功能,以便用户能够将屏幕上的数据显示在纸质或PDF文档上。这就是"extjs4打印grid插件"的作用。 打印...

    extjs 简单分页例子

    EXTJS是一种基于JavaScript的前端框架,它提供...这是一个基本的EXTJS分页实现,实际应用中可能还需要考虑错误处理、数据过滤、排序等功能。通过这种方式,EXTJS能够帮助开发者高效地构建功能丰富的数据驱动的Web应用。

    SSH+ExtJs分页小例子

    前端接收到数据后,使用ExtJS的Grid Panel或其他组件来显示分页结果。 总结来说,这个SSH+ExtJS分页小例子展示了如何利用Spring、Struts和Hibernate处理后端数据,以及如何结合ExtJS展示分页结果。通过理解这些代码...

    Extjs动态GRID

    EXTJS动态GRID是一种基于JavaScript的前端开发框架EXTJS中的组件,用于展示数据并提供交互功能。EXTDRID(可能是EXTGRID的拼写错误)是指EXTJS中的Grid Panel,它允许开发者构建灵活、可配置的数据视图,适用于大量...

    php+extjs+grid实时显示更新数据

    EXTJS的Grid组件是一种强大的数据展示工具,可以轻松地处理大量数据,并提供灵活的排序、筛选和分页功能。 首先,我们需要理解PHP在其中的角色。PHP是一种广泛使用的服务器端脚本语言,特别适合于处理动态内容和与...

    Extjs4 Grid分页与自动刷新

    在使用Extjs4进行Web应用开发时,Grid控件是常用的数据展示组件之一。对于大数据量的情况,通常需要使用分页来提高用户体验。下面详细介绍如何在Extjs4中实现Grid的分页功能。 **1.1 创建数据存储(Store)** 首先...

    ExtJS 使用grid显示数据

    在ExtJS中,Grid Panel是一种数据驱动的组件,它允许开发者以表格的形式展示大量数据,并且支持分页、排序、过滤、编辑等功能。要创建一个Grid,首先需要定义数据模型(Model),它描述了数据的结构,包括字段名和...

    ExtJs动态grid的生成

    - 首先,你需要创建一个Ext.grid.Panel实例,这是ExtJS中的Grid组件。通过设置配置项如store(用于存储数据)、columns(定义列)等来定制Grid。 2. **动态生成列** - 你可以使用`columns`属性来动态生成列。例如...

    ExtJs分页

    总结来说,ExtJS分页是通过前端和后端的协同工作实现的,前端通过ExtJS的Grid和Store组件呈现和管理分页数据,而后端则使用如Spring MVC和SQL Server 2008这样的技术处理分页查询。理解并熟练掌握这些技术对于构建...

    EXTJS grid导出EXCEL文件

    1. **EXTJS Grid组件**:EXTJS Grid是EXTJS的核心组件之一,它允许开发者创建可分页、可排序、可过滤的数据表格。Grid可以与各种数据源(如JSON、XML或内存中的数组)配合使用,并通过Store对象进行数据的加载和管理...

    Extjs3.0 常用组件介绍及怎么安装开发利器Spket

    2. **Grid(网格)**: Grid组件用于展示表格数据,支持排序、分页、选择行等功能,是数据展示的重要组件。 3. **Form(表单)**: ExtJS提供了多种表单组件,如文本框、下拉框、复选框、按钮等,以及表单验证功能,...

    Spring+JPA+ExtJs(Grid)

    其中的Grid组件是一种数据网格,可以用来显示大量结构化的数据,并支持排序、过滤、分页等功能。在本项目中,Grid可能被用来展示由Spring后端提供的数据,用户可以通过Grid进行数据浏览和操作。 具体到文件名...

    ExtJS_grid.rar_Grid javascript_extjs grid

    - **Grid Panel**:是ExtJS中的一个核心组件,用于显示二维数据,可以进行排序、筛选、分页等操作。 - **Store**:存储Grid的数据,可以是从服务器获取的JSON、XML或Array格式的数据,也可以是本地数据。 - **...

Global site tag (gtag.js) - Google Analytics