Extjs4.1 动态生成报表
日期：2014-05-16 浏览次数：20408 次
Extjs4.1 动态生成表格
看代码就会明白的，test.jsp:
<%@ 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="js/extjs-4.1.0/resources/css/ext-all.css">
<script type="text/javascript" src="js/extjs-4.1.0/bootstrap.js"></script>
<script type="text/javascript" src="js/extjs-4.1.0/locale/ext-lang-zh_CN.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
//创建表格,可以加入更多的属性。
Ext.create("Ext.grid.Panel",{
title:'动态表格~~~~~~~~~~~',
width:400,
height:300,
id : 'configGrid',
name : 'configGrid',
columns : [], //注意此行代码，至关重要
displayInfo : true,
emptyMsg : "没有数据显示",
renderTo:'grid',//渲染到页面
forceFit: true
});
//通过ajax获取表头已经表格数据
Ext.Ajax.request({
url: 'js/calmm/data.json', //从json文件中读取数据，也可以从其他地方获取数据
method : 'POST',
success : function(response) {
//将返回的结果转换为json对象，注意extjs4中decode函数已经变成了：Ext.JSON.decode
var json = Ext.JSON.decode(response.responseText); //获得后台传递json
//创建store
var store = Ext.create('Ext.data.Store', {
fields : json.fields,//把json的fields赋给fields
data : json.data //把json的data赋给data
});
//根据store和column构造表格
Ext.getCmp("configGrid").reconfigure(store, json.columns);
//重新渲染表格
Ext.getCmp("configGrid").render();
}
});
})
</script>
</head>
<body>
<!-- 将表格渲染在此处 -->
<div id="grid"></div>
</body>
</html>
?
数据文件，data.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'}
]
}
?
运行效果：
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
