ExtJS4 grid动态生成表格分页加入行号

最新推荐文章于 2018-03-19 21:25:54 发布

原创最新推荐文章于 2018-03-19 21:25:54 发布 · 6.5k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#extjs #string #email #json #function #header

本文介绍如何使用ExtJS实现网格表格的分页显示及添加、删除等功能，包括页面设置、数据源配置、后台数据返回及展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近闲来无事就看了一下ExtJS的grid表格，相对来说ExtJS个grid做的是非常成功的，很受欢迎，功能很强大。由于本人能力有限，只是闲来无事看看，并未深入研究，下面简单介绍一些基本功能。

1. 首先先写页面，页面很简单，没写什么东西，只作为一个容器，具体js代码放在grid.js中，grid.html代码如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>ext-grid分页显示</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=gbk">
    
    <link rel="stylesheet" type="text/css" href="ext4/resources/css/ext-all.css">
	<script type="text/javascript" src="ext4/ext-all-debug.js"></script>
	<script type="text/javascript" src="js/grid.js"></script>
  </head>
  
  <body>
    <div id="topic-grid"></div>
  </body>
</html>

说明：导入ext-all.css和ext-all-debug.js文件就可以了，grid.js是页面具体的js代码。

2. 最关键的部分就是grid.js的代码编写了，因为它最终要生成最后的表格，grid.js代码如下：

Ext.onReady(function(){
	
	Ext.define('csdnModel', {
        extend: 'Ext.data.Model',
        fields: [
            {name:'id',type:'int'},
            {name:'username',type:'string'},
            {name:'password',type:'string'},
            {name:'email',type:'email'}
        ],
        idProperty: 'threadid'
    });
	
	
	
var store = Ext.create('Ext.data.Store', {
    storeId:'csdnStore',
    model:'csdnModel',
    pageSize:50,
    proxy: {
            type: 'ajax',
            url: 'csdnServlet',
            reader: {
				type:'json',
                root: 'users',
                totalProperty: 'totalCount'
            },
            // sends single sort as multi parameter
            simpleSortMode: true
        },
});

Ext.grid.PageRowNumberer = Ext.extend(Ext.grid.RowNumberer, {  
    renderer:function(value, cellmeta, record, rowIndex, columnIndex, store){ 
		return (store.currentPage - 1) * store.pageSize + rowIndex + 1;
    }     
});  


Ext.create('Ext.grid.Panel', {
    title: '优快云泄漏用户账户信息',
    titleAlgin:'center',
    columnLines:true,
    store: Ext.data.StoreManager.lookup('csdnStore'),
    columns: [
    	Ext.create('Ext.grid.PageRowNumberer',{
    		header:'序号',
    		width:'80'
    	}),
    	{header:'ID',dataIndex:'id',hidden:true},
        { header: '用户名',  dataIndex: 'username',sortable:true,width:150},
        { header: '密码', dataIndex: 'password', flex: 1,width:150},
        { header: '注册邮箱', dataIndex: 'email',sortable:true,width:300}
    ],
    tbar:[
                '-', {
                text: '添加',
                enableToggle: true,
                toggleHandler: function(btn, pressed) {
                    Ext.Msg.alert('友情提示','未添加此功能！');
                }
            },'-',{
            	text: '删除',
                enableToggle: true,
                toggleHandler: function(btn, pressed) {
                    Ext.Msg.alert('友情提示','未添加此功能！');
                }
            }],
    bbar: Ext.create('Ext.PagingToolbar', {
            store: Ext.data.StoreManager.lookup('csdnStore'),
            displayInfo: true,
            displayMsg: '正在展示优快云泄漏用户信息 第 {0} - {1}条 共 {2} 条数据',
            emptyMsg: "没有任何数据",
            beforePageText:"第",
			afterPageText:"/ {0}页",
			firstText:"首页",
			prevText:"上一页",
			nextText:"下一页",
			lastText:"尾页",
			refreshText:"刷新",
            items:[
                '-', {
                text: '添加',
                enableToggle: true,
                toggleHandler: function(btn, pressed) {
                    Ext.Msg.alert('友情提示','未添加此功能！');
                }
            },'-',{
            	text: '删除',
                enableToggle: true,
                toggleHandler: function(btn, pressed) {
                    Ext.Msg.alert('友情提示','未添加此功能！');
                }
            }]
        }),
    
    
    height: 570,
    width: 700,
    renderTo: Ext.getBody()
});
store.loadPage(1);
});

说明： (1) 首先定义了一个csdnModel继承自Ext.data.Model 它指明了后台返回的json对象有那些属性，也就是说j返回的json对象有id，username，password，email这4个属性，这决定了后台返回json对象的格式。(2) 其次定义了一个store，store非常重要，它就是数据的来源，grid最终的数据都是由store提供。在store中指明数据的格式，就是刚才定义的csdnModel，pageSize指明每页显示的数据量，我这里配置了50，每页显示50条数据。然后配置代理选项，代理项中需要指明数据来源的url，以及读取数据的方式ajax，reader是真正读取数据的东西，指明返回的是json格式的数据，root是指json对象组成的数组由“users”开始*，totalProperty指明返回数据的同时返回的数据总量的属性是什么（可以看第4步后台返回数据的格式，便于理解）。(3)接下来就要创建真正的gridPanel了相关配置项可以参考API，在此主要说一下添加行号，分页行号是连续的。在Columns的配置项中添加了 'Ext.grid.PageRowNumberer'对象，这个类并不是EXTJS自有的，而是自己定义的，定义在gridPanel前面。它继承自 Ext.grid.RowNumberer，在定义的时候重写renderer，这是一个函数表格数据在渲染前会调用这个函数，然后该列就会显示函数返回的值，函数中通过计算得到该行的真实行号。行号连续效果如下：

grid分页添加连续行号

grid分页插入连续行号2

3. 后台数据返回。到此为止前台已经准备就绪了，剩下的就是后台代码的编写了，第2步中的store中已经指明了请求数据的URL，csdnServlet！csdnServet的主要代码如下：

int start = Integer.parseInt(request.getParameter("start"));
		int limit = Integer.parseInt(request.getParameter("limit"));
		int total = userDAO.getTotalOfUsers();
		List userList = userDAO.getAllUser(start, limit);
		
		request.setAttribute("total", total);
		request.setAttribute("userList", userList);
		request.getRequestDispatcher("/gridDatas.jsp").forward(request, response);

参数值start和limit是ExtJS中grid分页请求的默认参数，如果想修改参数值，请参照API，在此不作详细说明了。获取到分页数据的起始值和每页数据容量之后，就可以从数据库中取数据了 total是数据总量，取出来的数据放在userList中，然后转向gridDatas.jsp做数据的展示。userList里面放的是User对象，User对象定义如下：

public class User {
	private int id;
	private String username;
	private String password;
	private String email;
	
	
	public int getId() {
		return id;
	}
	public void setId(int id) {
		this.id = id;
	}
	public String getUsername() {
		return username;
	}
	public void setUsername(String username) {
		this.username = username;
	}
	public String getPassword() {
		return password;
	}
	public void setPassword(String password) {
		this.password = password;
	}
	public String getEmail() {
		return email;
	}
	public void setEmail(String email) {
		this.email = email;
	}
	
}

4. 数据返回。这是最后一步了。第2步已经定义好了数据的返回格式，所以在gridDatas.jsp中要按照第2步定义的格式返回数据，代码如下：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

{
	'totalCount':${total },
	'users':[
	<c:forEach items="${userList }" var="user">
		{'id':${user.id},'username':'${user.username }','password':'${user.password }','email':'${user.email }'},
	</c:forEach>
	]
}

第2步中定义store的时候指明totalProperty的值为‘totalCount’，所以后台必须用totalCount指明数据的总量，同样第2步中store的root选项指明根元素为'users'，所以返回的json对象的跟元素必须为users 。json对象中的属性是第1步中定义的csdnModel中的字段值。前台定义好之后，后台的数据返回相对简单。

到此为止，所有的步骤都完成了，徒说无用，给大家看看效果：

请求数据：

正在请求数据