<!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 Grid的一种扩展功能，它允许用户在表头部分实现更为复杂和多层次的布局，以更好地管理和组织数据列。这种插件通常用于展现层级关系的数据，比如分类、分组或树状结构的信息。 EXT Grid的表头...
在提供的文件名"GroupHeaderPlugin"中，"Group"通常指的是分组，这可能意味着这个插件不仅实现了复杂的表头，还支持数据的分组展示，使得用户可以方便地对数据进行汇总和分析。 使用此插件时，开发者需要注意以下几...
**多表头（复合表头）**在EXT JS中的实现，是指在一个表格中可以有多个水平或垂直的表头，用于分类和描述数据。这种设计使得表格结构更加清晰，用户能快速理解不同数据列之间的关系。例如，你可以将一级表头用于类别...
在Ext 3.4中，实现多表头可能需要配置`headers`属性或者使用`Ext.grid.header.Container`来创建复杂的表头结构。 列锁定（Column Locking）是Ext JS的一个功能，它允许用户固定某些列，即使在滚动表格时这些列也会...
标题“EXT复杂表头+锁定列例子”提示我们这里将探讨EXT库在实现这种功能时的应用。 EXT是一个强大的JavaScript库，专为构建桌面级的Web应用而设计。它提供了丰富的组件，包括表格（Grid），用于高效地展示和操作...
"Ext3.4.0复杂(多行)表头+锁定多列例子"这个标题涉及到的是一个JavaScript库——Ext JS的一个高级功能应用。Ext JS是一个流行的前端框架，用于构建富互联网应用程序（RIA），它提供了一套完整的组件化开发工具，包括...
总的来说，`Ext grid`的合并表头功能是通过`GroupHeaderPlugin`实现的，这个插件结合了`JavaScript`和`CSS`来创建多级、可定制的表头结构。通过熟练掌握这一特性，开发者能够为用户提供更直观、更易理解的数据展示，...
在处理固定表头的问题上，EXT提供了GridPanel组件，该组件支持分页、排序、过滤等功能，并且可以轻松实现表头固定。 1. **EXT GridPanel**：EXT的核心组件之一，它是表格展示的主要工具。GridPanel允许开发者定义列...
在本文中，我们将深入探讨"Ext表格列锁定+多表头插件"这一主题，它在Ext3.4版本中的实现及其相关技术。这个插件主要用于改进Ext Grid的用户体验，特别是处理大量数据时，通过列锁定和多表头功能，使得用户能够更有效...
标题中的"GWT-EXT 多表头插件GroupHeaderPlugin"指的是一个用于Google Web Toolkit (GWT) 应用程序的扩展，它提供了多级表头的功能。在GWT中，EXT是一个流行的用户界面库，它允许开发人员创建富客户端应用。...
在EXT 4.1中，可以使用GridHeader实现跨列的表头合并，以表示某些列的共同属性或类别。这通过配置`header跨越`属性（`header跨越`）实现，可以有效减少列的数量，提高数据的可读性。 5. **表头菜单** GridHeader...
10. **Examples and Tutorials**: ExtJS社区提供了一些示例和教程，可以帮助你理解和实现表头的合并功能。通过参考这些资源，你可以更好地了解如何在实际项目中应用这些技术。 理解并掌握以上知识点，将有助于你在...
本篇将重点讲解如何在EXTjs中实现双层表头，以及通过提供的源代码`GridDoubleHeader.js`来理解其实现细节。 EXTjs的grid表头通常是单层的，每一列都有一个标题。但在某些场景下，我们可能需要更复杂的表头结构，...
在EXTJS中，列表头通常由`Ext.grid.header.Container`组件定义，而子列表头则可以通过嵌套`Ext.grid.header.Container`来实现。首先，你需要创建一个基本的`Ext.grid.Panel`，然后在它的`columns`配置中定义列。为了...
Ext 表头合并插件是一种在Ext JS框架中用于数据网格（Grid）的增强工具，它允许用户在数据网格的表头中实现多列合并，从而更好地组织和展示复杂的数据结构。这种插件通常用于创建具有层次结构或需要对一组相关列进行...
标题“extjs 实现动态表头”表明我们要讨论的是如何在ExtJS环境中构建一个能够动态改变列头的表格。动态表头的核心在于理解ExtJS的GridPanel组件和ColumnModel类。GridPanel用于显示数据，而ColumnModel则定义了...
本项目实现了在Ext3.0环境中集成验证码功能，结合服务器端的Tomcat，为用户提供了一个安全的验证环境。 验证码的主要目的是通过要求用户输入图片中显示的一串随机字符，来验证用户是人类而非机器。在Web应用中，...
简单的Ext 富客户端实现 简单的Ext 富客户端实现 简单的Ext 富客户端实现
在“Ext3.0实现多文件上传.rar”这个压缩包中，我们聚焦于一个特定的功能：使用Ext3.0来实现实时的多文件上传功能。这个功能通常在网页应用中用于让用户能够一次性上传多个文件，如图片、文档等，极大地提高了用户...