ExtJS动态表格头结合struts2实例

最新推荐文章于 2024-07-22 14:15:06 发布

快乐随风

最新推荐文章于 2024-07-22 14:15:06 发布

阅读量67

点赞数

分类专栏： ExtJS S2SH 文章标签： java json javascript ViewUI

ExtJS 同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

S2SH

5 篇文章 0 订阅

订阅专栏

项目中遇到了要用动态表格头，即表格标题列数和内容不确定，由后台传回的数据来生成表格头，花了一天时间，也在网上找了不少资料，但是基本没一个有用，不过还是给了自己不少启发，自己摸索着，终于搞定了，在此记录下来，以便以后查阅。欢迎指正！！！

1、strust2的配置文件代码

<package name="defineReportJson" extends="json-default">
		
		<action name="defineListReportData" class="com.audit.action.reportJFree.DefineListReportAction" method="defineListReportData">
			<result type="json" name="success"></result>
		</action>
</package>

2、strusts2的Action类方法代码，以下各个属性提供相应的get方法

public String defineListReportData() throws Exception { 
	  
    	columnModel = "[{'header':'姓名','width':60,'dataIndex':'Name','align':'center'}," +
				"{'header':'生日','width':60,'format':'Y-m-d','dataIndex':'Birthday','align':'center','renderer': Ext.util.Format.dateRenderer('Y-m-d')}," +
				"{'header':'学历','width':60,'dataIndex':'Edu','align':'center'}," +
				"{'header':'备注','width':60,'dataIndex':'Memo','align':'center'}]";
    	
    	data = "[" +
    			"{ name: '李赞红',birthday: Date.parseDate('1979-04-11', 'Y-m-d'), edu: '本科', memo: '无备注' }," +
    			"{ name: '陈南',birthday: Date.parseDate('1987-08-06', 'Y-m-d'), edu: '本科',  memo: '一个小帅哥哈' }," +
    			"{ name: '陈南',birthday: Date.parseDate('1987-08-06', 'Y-m-d'), edu: '本科',  memo: '一个小帅哥哈' }," +
    			"{ name: '陈南',birthday: Date.parseDate('1987-08-06', 'Y-m-d'), edu: '本科',  memo: '一个小帅哥哈' }," +
    			"{ name: '陈南',birthday: Date.parseDate('1987-08-06', 'Y-m-d'), edu: '本科',  memo: '一个小帅哥哈' }" +
    			"]";
    	
    	fieldsNames = "[" +
    			"{name: 'Name', type: 'string', mapping: 'name'}, " +
    			"{name: 'Birthday', type: 'string', mapping: 'birthday'}, " +
    			"{name: 'Edu', type: 'string', mapping: 'edu'}, " +
    			"{name: 'Memo', type: 'string', mapping: 'memo'}" +
    			"]";
    	total = 4;
    	return SUCCESS;
    }

3、好了，到了最关键的时候了，就是ExtJS代码咯！请看下面详细，这就是一份完整的JSP文件，直接用就行。。。

<%@ page language="java" contentType="text/html; charset=UTF-8"
     pageEncoding="UTF-8"%>
<%@include file="../../ext-common.jsp"%>
 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 <html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 <title>Extjs动态加载Grid表格</title>
 <script type="text/javascript">
	Ext.onReady(function(){   
        Ext.Ajax.request({   
           url:'defineListReportData.action',  
           success:function(response,option){ 
           		var jsonText = Ext.util.JSON.decode(response.responseText);
				// 列模型 即表格头
				//var headColumn = $.parseJson(jsonText.columnModel);(此处需引用JQery文件)
				var headColumn = eval("(" + jsonText.columnModel + ")");
				var cm = new Ext.grid.ColumnModel(headColumn);
				
				//Record 定义数据项的逻辑结构,列信息 
				var field = jsonText.fieldsNames;
				var Human = Ext.data.Record.create(eval("(" + field + ")"));		
				//Reader 对逻辑数据进行分装
				var reader = new Ext.data.JsonReader({}, Human); 

				//准备数据 
				var data = eval("(" + jsonText.data + ")");
				//MemoryProxy ,获取数据
				var proxy = new Ext.data.MemoryProxy(data); 
				
				//Store 存储器，用于整合Proxy和Reader
				var store = new Ext.data.Store({ 
					  proxy: proxy, 
					  reader: reader 
				}); 
				store.load(params : {start : 0,limit : 20});

				var grid = new Ext.grid.GridPanel({ 
					  title: "自定义报表数据", 
					  //autoWidth: true, 
					  width:jsonText.total * 60 + 160,
					  autoHeight: true, 
					  cm: cm, 
					  store: store, 
					  renderTo: "dyngrid", 
					  buttonAlign:"center",
					  stripeRows: true, 	//让grid相邻两行背景色不同 
					  bbar : new Ext.PagingToolbar({
						  pageSize : 20,
						  store : store,
						  displayInfo : true,
						  displayMsg : '显示第{0}条到{1}条记录，一共{2}条',
						  emptyMsg : "没有记录"
					}),
					viewConfig : {
						columnsText : '显示的列',
						scrollOffset : 30,
						sortAscText : '升序',
						sortDescText : '降序',
						forceFit : true
					}		
				});
	 	   },   
          failure:function(){   
              Ext.Msg.alert("错误提示","数据加载失败！");
          }   
	   });   
   }); 
 </script>
 </head>
 <body>
     <div id="dyngrid"></div>
 </body>
 </html>

这只是实现了表格头不固定，分页啥的都还没做好，先贴上代码，后面做好了再更新

快乐随风

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ExtJS动态表格头结合struts2实例

项目中遇到了要用动态表格头，即表格标题列数和内容不确定，由后台传回的数据来生成表格头，花了一天时间，也在网上找了不少资料，但是基本没一个有用，不过还是给了自己不少启发，自己摸索着，终于搞定了，在此记录下来，以便以后查阅。欢迎指正！！！1、strust2的配置文件代码&lt;package name="defineReportJson" extends="json-default"&gt;...
复制链接

扫一扫

专栏目录