使用extjs4.0实现动态列及分页

最新推荐文章于 2022-08-30 10:59:57 发布
最新推荐文章于 2022-08-30 10:59:57 发布
阅读量7.2k 收藏 2
点赞数
分类专栏： j2ee struts2 extjs ext grid 动态列 json 文章标签： extjs ExtJS grid json JSON Json struts2 Struts2 动态列
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/myairen1365/article/details/8197977
版权
j2ee 同时被 3 个专栏收录
4 篇文章 0 订阅
订阅专栏
extjs
4 篇文章 0 订阅
订阅专栏
struts2
2 篇文章 0 订阅
订阅专栏

    在做信息管理系统类项目时，用户有时需要实现表格的列头（列名字段）可以根据数据库返回的结果集不同而有不同的显示，包括字段名或者字段顺序。比如，同样是邮件列表，可以根据用户个人配置，显示“标题、发送时间、发送人”或者“发送时间、发送人、标题”又或者“标题、正文简介”等。这个时候，如何使用extjs自带的grid组件实现呢？

    首先，我们需要知道extjs的grid组件与后台程序之间传输数据一般使用json，而对于json这种形式，在struts2框架下，要实现不变列名（及列名使用硬编码配置，无法根据后台返回结果不同而有不同显示），比较简单，只要在action中定义相关类属性，在js中做相应的字段绑定即可。如果要实现动态列，就需要自己手动在action中将结果集（一般从数据库中查询得出）转化成json格式，并写入到response中，返回至客户端，交由extjs的grid组件进行渲染显示。

    下面贴出笔者的js代码和后台action代码，感兴趣的同学可以参考一二。

    1、js代码

     

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<title>动态生成表格</title>
		<meta http-equiv="pragma" content="no-cache">
		<meta http-equiv="cache-control" content="no-cache">
		<meta http-equiv="expires" content="0">
		<link rel="stylesheet" type="text/css"
			href="ext4/resources/css/ext-all.css">
		<script type="text/javascript" src="ext4/bootstrap.js"></script>
		<script type="text/javascript" src="ext4/ext-all.js"></script>
		<script type="text/javascript" src="ext4/locale/ext-lang-zh_CN.js"></script>

		<script type="text/javascript">
	Ext.onReady(function() {

		var json_f;
		Ext.Ajax.request({//store对象在创建时需要制定fields属性，因此使用ajax首先从后台获得列名
			url : 'json/testUser!testPage.action', //从action返回的response中读取数据，也可以从其他地方获取数据 
			method : 'POST',
			async : false,
			success : function(response) {
				//将返回的结果转换为json对象，注意extjs4中decode函数已经变成了：Ext.JSON.decode

				s = response.responseText;
				json_f = Ext.JSON.decode(response.responseText); //获得后台传递json 

			}
		});
		var thePageSize = 5;

		//JSON数据源,此处创建了带有分页功能的store数据源
		var humresStore = Ext.create('Ext.data.Store', {
			pageSize : thePageSize,
			fields : json_f.fields,//根据上面的ajax从后台action动态获得

			proxy : {
				type : 'ajax',
				url : 'json/testUser!testPage.action',//获取数据的url
				method : 'POST',
				reader : {
					type : 'json',
					root : 'data',
					totalProperty : 'totalRecord'//json数据,表示分页数据总数
				}
			},

			sorters : [ {
				property : 'id',
				direction : 'DESC'
			} ]
		});

		humresStore.load({
			params : {
				start : 0,
				limit : thePageSize
			}
		});

		//创建表格,可以加入更多的属性。
		Ext.create("Ext.grid.Panel", {
			title : '动态表格~~~~~~~~~~~',
			width : 400,
			height : 300,
			id : 'configGrid',
			name : 'configGrid',
			columns : [], //注意此行代码，至关重要
			displayInfo : true,
			emptyMsg : "没有数据显示",
			renderTo : 'grid',//渲染到页面
			forceFit : true,
			dockedItems : [ {
				xtype : 'pagingtoolbar',
				store : humresStore,
				dock : 'bottom',
				displayInfo : true,
				//displayMsg: '显示第 {0} 条到 {1} 条记录 / 共 {2} 条',
				emptyMsg : "没有记录！"
			} ]
		});

		//通过ajax获取表头以及表格数据
		Ext.Ajax
				.request({
					url : 'json/testUser!testPage.action', //从json文件中读取数据，也可以从其他地方获取数据 
					method : 'POST',
					success : function(response) {
						//将返回的结果转换为json对象，注意extjs4中decode函数已经变成了：Ext.JSON.decode
						
						var json = Ext.JSON.decode(response.responseText); //获得后台传递json
						
						//根据store和column构造表格
						Ext.getCmp("configGrid").reconfigure(humresStore,
								json.columns);
						
					}
				});

	})
</script>
	</head>

	<body>
		<!-- 将表格渲染在此处 -->
		<div id="grid"></div>
	</body>
</html>
      2、action代码

      

package com.struts;

import java.io.IOException;

import javax.servlet.http.HttpServletResponse;

import org.apache.struts2.ServletActionContext;

import com.opensymphony.xwork2.ActionSupport;

public class testUser extends ActionSupport {

	/**
	 * 
	 */
	private static final long serialVersionUID = 1L;
	public String execute() throws Exception {
		return SUCCESS;
	}

	public void testPage() throws Exception {
		System.out.print("enter testPage");
		String start = (ServletActionContext.getRequest().getParameter("start") == null) ? "0"
				: ServletActionContext.getRequest().getParameter("start");
		String gridJson;
		if (start.equals("0")) {
			gridJson = "{" + "'fields': [" + "{'name': 'id', 'type': 'int'},  "
					+ "{'name': 'name', 'type': 'string'},"
					+ "{'name': 'sex', 'type': 'string'},"
					+ "{'name': 'add', 'type': 'string'}" + "]," + "'data': ["
					+ "{'id': '1', 'name': 'AAA', 'sex': '男','add':'SSS'},"
					+ "{'id': '2', 'name': 'BBB', 'sex': '男','add':'SSS'},"
					+ "{'id': '3', 'name': 'CCC', 'sex': '男','add':'SSS'},"
					+ "{'id': '4', 'name': 'DDD', 'sex': '女','add':'是'},"
					+ "{'id': '5', 'name': 'EEE', 'sex': '男','add':'撒的发生'}"
					+ "]," + "'columns': ["
					+ "{'header': '编号', 'dataIndex': 'id'},"
					+ "{'header': '姓名', 'dataIndex': 'name'},"
					+ "{'header': '性别', 'dataIndex': 'sex'},"
					+ "{'header': '地址2', 'dataIndex': 'add'}" + "],"
					+ "'totalRecord':8,'success':true" + "}";
		} else {
			gridJson = "{" + "'fields': [" + "{'name': 'id', 'type': 'int'},  "
					+ "{'name': 'name', 'type': 'string'},"
					+ "{'name': 'sex', 'type': 'string'},"
					+ "{'name': 'add', 'type': 'string'}" + "]," + "'data': ["
					+ "{'id': '6', 'name': 'AAA', 'sex': '男','add':'SSS'},"
					+ "{'id': '7', 'name': 'BBB', 'sex': '男','add':'SSS'},"
					+ "{'id': '8', 'name': 'CCC', 'sex': '男','add':'SSS'},"
					+ "{'id': '9', 'name': 'DDD', 'sex': '女','add':'是'},"
					+ "{'id': '10', 'name': 'EEE', 'sex': '男','add':'撒的发生'}"
					+ "]," + "'columns': ["
					+ "{'header': '编号', 'dataIndex': 'id'},"
					+ "{'header': '姓名', 'dataIndex': 'name'},"
					+ "{'header': '性别', 'dataIndex': 'sex'},"
					+ "{'header': '地址2', 'dataIndex': 'add'}" + "],"
					+ "'totalRecord':8,'success':true" + "}";
		}
		HttpServletResponse response = ServletActionContext.getResponse();
		// 编制响应的格式
		response.setContentType("text/html;charset=UTF-8");

		try {
			response.getWriter().write(gridJson);
		} catch (IOException e) {
			e.printStackTrace();
		}
	}
	
}
      3、json数据格式

      

{  
    'fields': [  
        {'name': 'id', 'type': 'int'},  
        {'name': 'name', 'type': 'string'},  
        {'name': 'sex', 'type': 'string'},
        {'name': 'add', 'type': 'string'}
    ],
    'data': [  
        {'id': '1', 'name': 'AAA', 'sex': '男','add':'SSS'},  
        {'id': '2', 'name': 'BBB', 'sex': '男','add':'SSS'},   
        {'id': '3', 'name': 'CCC', 'sex': '男','add':'SSS'},   
        {'id': '4', 'name': 'DDD', 'sex': '女','add':'是'},   
        {'id': '5', 'name': 'EEE', 'sex': '男','add':'撒的发生'} 
    ],  
    'columns': [  
        {'header': '编号', 'dataIndex': 'id'},  
        {'header': '姓名', 'dataIndex': 'name'},  
        {'header': '性别', 'dataIndex': 'sex'},
        {'header': '地址', 'dataIndex': 'add'}
    ],"totalRecord": 8,"success": true}
      4、struts.xml配置文件

      

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE struts PUBLIC "-//Apache Software Foundation//DTD Struts Configuration 2.1//EN" "http://struts.apache.org/dtds/struts-2.1.dtd">
<struts>
<constant name="struts.i18n.encoding" value="utf-8"></constant>
    
    <package name="json" namespace="/json" extends="json-default"> 
        
		<action name="testUser!*" class="com.struts.testUser" method="${1}"> 
			<result type="json">
			</result>
		</action>
    </package>
</struts>
     在action代码中修改返回json数据中的columns节实现列名不同显示，fields节数据为表格列的元数据，应与columns节数据对应，data为数据节，totalRecord为数据总条数，供分页控件使用。

myairen1365
关注
专栏目录
Extjs 4.0 MVC分页实例
12-07
在这个MVC（Model-View-Controller）分页实例中，我们将探讨如何利用ExtJS 4.0的MVC架构来实现数据的分页展示。MVC模式是软件工程中的一个设计模式，它将应用程序分为三个主要部分：模型（Model）处理数据，视图...
Ext js 4 动态Grid(包括动态列和动态数据)
Dice的学习笔记
01-09 2398
版本:Ext 4.2 上网查了好多,都是老版本的,无奈看api加调试终于弄出来了 //1先定义一个面板 　　ValuePanel = new Ext.grid.GridPanel({ 　　 xtype: 'grid',// 关键属性 　　// 写其他属性 store,columns可写可不写 　　 }); //2,定义store 以及 store的数据结构 　　var Ne
[Extjs modern] 如何在gridpanel的列中添加按钮
u010989191的博客
10-31 2024
modern APIencodeHtml:默认是true, 此时使用renderer事件的时候并不会将返回值当作html来解析，而是直接将html当作文本来显示。 解决方法使用cell.setEncodeHtml(false);迫使cell直接将返回值当作html进行解析。显示效果显示出了button按钮。
EXTJS 中grid 动态增加列的方法
yuan5025的博客
08-30 1053
gridpanel动态生成列的核心就是在拼凑columnmodel和后台返回store的数据对的上。别忘了最后调用GridPanel的reconfigure()将其重新绑定，reconfigure()方法接收两个参数，一个是store，一个是ColumnModel。
ExtJs 之动态列实现
saiweny的博客
03-22 348
创建DynamicGrid.js Ext.grid.DynamicGrid = Ext.extend(Ext.grid.GridPanel, { initComponent: function() { //创建store var ds = new Ext.data.Store({ url: this.storeUrl, reader: new Ext.dat...
Ext.js 在 grid中加入按钮，复制粘贴可用
qq_37233816的博客
12-25 420
版本： Ext.js 3.4 效果图： 代码如下： var q_GPanel_to_call_list = new Ext.grid.EditorGridPanel({ store : q_dstore_todo, // TODO： 你自己的store width : '100%', height : 260, clicksToEdit: 1, // 设置点击一次修改 stripeRows : true, frame: true, // 有边框 //autoHeight : true,
Extjs4.0 列隐藏和滚动条动态加载
12-17
在ExtJS 4.0版本中，它提供了一系列功能，包括表格面板（Grid Panel）的列管理以及滚动条的动态加载。让我们深入探讨这些核心概念。 1. **列隐藏与显示** 在ExtJS 4.0中，表格面板允许用户动态隐藏或显示列，以...
extjs 4.0 extjs
12-07
`overview` 和 `welcome` 可能是介绍性的文档或页面，它们可能包含了关于ExtJS 4.0的概述、新手引导以及如何开始使用的信息。 在ExtJS 4.0中，新的布局管理器提供了更多的灵活性，使得组件布局更加直观。此外，图表...
ExtJs4.0官方版本
10-24
虽然ExtJS 4.0本身不直接支持响应式设计，但开发者可以利用其强大的组件体系和布局管理来实现不同屏幕尺寸下的适配。 11. 单元测试与调试工具 4.0版本提供了一套单元测试框架，方便开发者测试组件和应用程序。此外...
EXTJS4.0视频教程配套代码包含action类
09-13
在11课之后的内容，可能涉及到更复杂的服务器通信，如分页、过滤、排序和远程验证，这些都是EXTJS4.0中action类应用的重要场景。 通过参考yunchengfeng老师的视频教程，你可以学习如何创建自己的action类，设置请求...
GridPanel添加按钮列和响应函数
生活没了创意，那跟咸蛋有什么区别
12-16 1167
先介绍一下在grid面板添加按钮列的方法，这种方法也比较常用吧。只展示前端的编程哦，后台的java代码太多太累赘了，涉及到的ajax等等数据交互，就当作是个alert函数看待吧~ 上菜了，代码如下。 var colmldetail=new Ext.grid.ColumnModel({ columns:[ new Ext.grid.RowNumberer(), sm,
ExtJs4中gird列中增加操作列，并给操作按钮绑定事件
热门推荐
tianxing0923的专栏
09-24 1万+
在ExtJs4中，grid组件有Ext.grid.column.Action组件，所有要增加操作列，只需指定列的xtype为actioncolumn即可，例如： Ext.create('Ext.grid.Panel', { renderTo: Ext.getBody(), width: 500, height: 400, store: Ext.create('Ex
Extjs多图标表格操作按钮列组件实现
08-22 399
写此组件是看了joffice中的表格列中将操作用图标在一个列中实现，但看了源码他们采用的是在renderer中用拼接html标签实现，这样就难维护，不好使用，而且点击图片执行操作的时候作用域是指向整个window，并不能或用很不好的方式去获取表格本身这个对象，于是自己写了个，呈现的效果是一样，但使用更方便，作用域好控制，先晒一张效果图，在此展示下效果：   实现代码： /** * ...
Ext Js Grid实现动态添加列
随时随地记录每一刻发生的事情
05-03 1688
Grid实现动态添加列，满足实际工作中不同的场景要求
ExtJs GridPanel动态列完整版
pencil456的专栏
01-06 9387
如图是我做成的效果：ScoreSheetView类-用于生成json字符串public class ScoreSheetView implements Serializable { private static final long serialVersionUID = -7478139883055728881L; private Semester semester; private StudentView student; private Strin
Extjs4.1 gridPanel动态列
weixin_33851429的博客
03-07 115
动态列很常见，比如你构造的报表时需要根据不同的情况，显示完全不同的列表，在加载页面时或者在同一个页面上根据不同的条件设置不同的报表列都有可能，直接看效果吧 点击“修改动态列”显示为： 代码如下： View Code 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www...
extjs动态树 动态grid 动态列
dianjin3567的博客
06-07 210
由于项目需要做一个动态的extjs树、列等等，简而言之，就是一个都是动态的加载功能， 自己琢磨了半天，查各种资料，弄了将近两个星期，终于做出来了 首先，想看表结构，我的这个功能需要主从两张表来支持 代码目录表： CREATE TABLE SYS_T01_CODECONTENT ( ID NUMBER NOT NULL, PID NUMBER NOT NULL,...
ext实现动态列表
guoguo0717的博客
05-17 441
ext页面 <%@ page language="java" contentType="text/html;charset=UTF-8"%> <%@ include file="/common/taglibs.jsp"%> <% String path = request.getContextPath(); %> <% int huoDaiNum =(Integer) request.getAttribute("huoDaiNum"); %> <
EXTJS 中grid动态增加列的方法
romi17的博客
08-30 4309
EXTJS 中grid动态增加列的方法有多种，下面逐个说明： 1、适用创建带editor的列，但种方法不太适合报表展示 需要创建带editor的列，一般上同时存在一些已经固定的列，并且这些固定列基本上存在已经编写好配置和事件代码，这些固定的列是不需要重新创建的。此时只需要在初始化时，动态增加需要的列，也就是说动态增加的列只增加一次即可，不需要移除，然后重新加载。代码如下： var data...
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值