<!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=GB18030">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="../resources/libs/ext/resources/css/ext-all.css" />
<script type="text/javascript" src="../resources/libs/ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../resources/libs/ext/ext-all.js"></script>
<script type="text/javascript" src="../resources/ColumnHeaderGroup.js"></script>
<script type="text/javascript" src="../resources/examples.js"></script>
<!--注意css中的图片路径 否则效果问题-->
<link rel="stylesheet" type="text/css" href="../resources/ColumnHeaderGroup.css" />
</head>
<body>
<div id="column-group-grid"></div>
</body>
<script type="text/javascript">
Ext.onReady(function() {
var structure = {//第二层表格数据
'': ['产品代码', '组合名称','具体单券','盯市净值'],
'VaR95%': ['绝对值', '占比'],
'VaR97%':['绝对值', '占比'],
'VaR99%':['绝对值', '占比']
},
products = ['ProductX', 'ProductY'],
fields = [],
columns = [],
data = [],
continentGroupRow = [],
cityGroupRow = [];
/*
* Example method that generates:
* 1) The column configuration for the grid
* 2) The column grouping configuration
* 3) The data for the store
* 4) The fields for the store
*/
function generateConfig(){
var arr,
numProducts = products.length;
////////嵌套循环begin
//定义第一层国家列
Ext.iterate(structure, function(continent, cities){//continent:代表Asia、Europe cities:代表Berlin、Londeon、Paris
continentGroupRow.push({
header: continent,
align: 'center',
colspan: cities.length//制定占列数
});
//定义第二层城市列
Ext.each(cities, function(city){
fields.push({
type: 'int',
name: city + continent
});
columns.push({
dataIndex: city + continent,
header: city,
renderer: Ext.util.Format.usMoney
});
});
arr = [];
for(var i = 0; i < 20; ++i){
arr.push((Math.floor(Math.random()*11) + 1) * 100000);
}
data.push(arr);
});
}
// Run method to generate columns, fields, row grouping
generateConfig();
var group = new Ext.ux.grid.ColumnHeaderGroup({//插件 :前面两层表头
rows: [continentGroupRow]
});
var grid = new Ext.grid.GridPanel({
renderTo: 'column-group-grid',
title: 'Sales By Location',
width: 1000,
height: 400,
store: new Ext.data.ArrayStore({
fields: fields,
data: data
}),
columns: columns,
viewConfig: {
forceFit: true
},
plugins: group
});
});
</script>
</html>
分享到:
相关推荐
该例子实现了ext的gridpanel多层表头+分组+小计以及与Java后台交互的全代码。还有自适应浏览器大小的功能包括导出excel,里面有注释,可能注释不全。分别为group.jsp,totals.jsp页面。
网上收集的比较好的ext 多表头和锁定列结合的示例。 解压可以直接看到效果。
这是一个用于EXT实现复杂表头的插件.资源共享...欢迎下载.
html 表头固定,基于ext的 html 表头固定,基于ext的 html 表头固定,基于ext的
Ext3.4.0复杂(多行)表头+锁定多列例子 非常棒,项目中需要使用到的。
Ext3.4版本,描述如题,感谢之前在本网站提供了相关代码的大神们。 在项目中采用了其中一个,但是有一个小BUG,当列全部解锁时,列与前面的数字列、勾选列有错位现象,此版本已修复。
NULL 博文链接:https://myjoan.iteye.com/blog/565875
Ext3.4 将BufferView添加到LockingGridView中, 修改GroupHeaderPlugin使其可用于LockingGridView 内有使用示例
NULL 博文链接:https://guozhenqian.iteye.com/blog/1004411
NULL 博文链接:https://lixiaokui11.iteye.com/blog/1056365
ext 扩展子列表头 ,列表头分层 ,例子分了三层 ,打开 ANSTS01 即可
Ext表头合并插件,不管私自收藏,和大家一起共享
ext 4.1 中 gridheader example
NULL 博文链接:https://zhoumin.iteye.com/blog/619876
简单的Ext 富客户端实现 简单的Ext 富客户端实现 简单的Ext 富客户端实现
Ext GridPanel 中实现加链接操作 Ext GridPanel 中实现加链接操作 Ext GridPanel 中实现加链接操作
ext 嵌入editarea 实现代码 源代码 代码高亮 显示 ext 嵌入editarea 实现代码 源代码 代码高亮 显示 ext 嵌入editarea 实现代码 源代码 代码高亮 显示 ext 嵌入editarea 实现代码 源代码 代码高亮 显示
一个简单的Ext样例,实现了一个表格功能,能自动排序,增加减少字段等
NULL 博文链接:https://newlethe.iteye.com/blog/1146469
Ext.net Enter实现Tab功能