看代码就会明白的,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'}
]
}
运行效果:
分享到:
相关推荐
extjs动态生成表格,前台+后台extjs动态生成表格,前台+后台extjs动态生成表格,前台+后台extjs动态生成表格,前台+后台extjs动态生成表格,前台+后台extjs动态生成表格,前台+后台
Extjs4.1 小例子(适合extjs初学者学习使用).直接导入myeclipse即可
extjs4.1的中文文档,可以方便查看API
ExtJs4.1 正式版,考虑到官网速度慢,放上来服务大家!
EXTJS 4.1 API中文版 ExtJS 4.1 中文版API [脚本娃娃---开源文档翻译组]历时一年多完整翻译。 在此友情扩散。
Extjs 4.1中文版api,非常难得的一款4.1的中文api,值得大家收藏
ExtJS4.1学习心得及源码 目录 一、安装与配置 二、第一个ExtJS例子 三、表格 四、从XML读取数据表格 五、按钮 六、ComboBox控件 七、Panel面板 八、Viewport 九、表单Form 十、窗口 十一、消息对话框 十二...
ExtJS 4.1 中文版API [脚本娃娃---开源文档翻译组]历时一年多完整翻译。 在此友情扩散下载,非常完整详细! 学习ExtJS必备的帮助文档,而且对其中的API进行了汉化,更有利于ExtJS的学习!
Extjs4.1中文API.chm
extjs4.1修改bug版本,已修改数字、日期等多个控件的问题
100行代码解决ExtJs4.1合并单元格问题
Extjs 4.1 下拉框 Tree 的实现(mvc)
无需积分,ExtJs权威指南第一部分(ExtJs4.1),请两部分都下载完成后解压
Extjs4.1中build下的sdk.jsb3里的路径配置都是错误的,所以集成到spket根本不能进行智能提示,这个是经过修复后的,只要替换掉build下的sdk.jsb3就可以了
学习ExtJS必备的帮助文档,而且对其中的API进行了汉化,更有利于ExtJS的学习。
ExtJs4.1+Jbpm4+SSH2+Oracle10g视频教程 视频教程正在上传中!先共享代码,有了代码,还买啥教程额! SSH2+JBPM+ExtJs4实战,JBPM是重点讲解。实战与demo的区别我不再多说,在以前工作中走过一些弯路,一些实现都是...
EXTJS4.1API中文版,适合于4.x各版本通用,简单易懂,对于英语能力不是非常好的开发者可以借鉴。
extjs4.1下拉复选框完整DEMO,包含了extjs4.1主文件,代码实现了动态加载功能,所以需要配置IIS或者apache。插件文件在ux目录下,请自行参考。
ExtJS4.1+MVC4+Spring.NET1.3+EF5 整合项目数据库(pdm、sql及sqlite数据库) 原文地址:http://blog.csdn.net/xz2001/article/details/8723266
分享ExtJs4.1中文API,此API为脚本娃娃群汉化,个人感觉是汉化最全ExtAPI, 源始链接,大漠博客:http://damoqiongqiu.iteye.com/blog/1998022