一,自定义的表头,默认表头使用
var groupTmp = [{header: '', colspan: 4, align: 'center' },{
header : '加班日期及加班时长(单位:小时)',
menuDisabled:true,
colspan :30,
align : 'center'
},{header:'',colspan:3,align:'center'}];
var group = new Ext.ux.plugins.GroupHeaderGrid({
//rows : [group1,group2]
rows : [groupTmp]
});
二,自定义列
//列数组
var colMArray1 = new Array();
var colMArray2=new Array();
colMArray2 = [{
header : '地区', // 列标题
dataIndex : 'wm_name',
width:100,
align : 'center'
},{
header : '姓名', // 列标题
dataIndex : 'gsw_first_name',
mcol:2,
width:100,
align : 'center'
},{
header : '员工编号', // 列标题
dataIndex : 'gsw_employee_id',
width:100,
align : 'center'
}];
var colMArray5 = new Array();
colMArray5 = [ {
header : '离司日期', // 列标题
dataIndex : 'wm_leave_date'
}];
var colMArray6 = new Array();
colMArray6 = [ {
header : '1', // 列标题
dataIndex : '1'
}, {
header : '2', // 列标题
dataIndex : '2'
},{
header : '3', // 列标题
dataIndex : '3'
},{
header : '4', // 列标题
dataIndex : '4'
},{
header : '5', // 列标题
dataIndex : '5'
},{
header : '6', // 列标题
dataIndex : '6'
},{
header : '7', // 列标题
dataIndex : '7'
},{
header : '8', // 列标题
dataIndex : '8'
},{
header : '9', // 列标题
dataIndex : '9'
},{
header : '10', // 列标题
dataIndex : '10'
},{
header : '11', // 列标题
dataIndex : '11'
},{
header : '12', // 列标题
dataIndex : '12'
},{
header : '13', // 列标题
dataIndex : '13'
},{
header : '14', // 列标题
dataIndex : '14'
},{
header : '15', // 列标题
dataIndex : '15'
},{
header : '16', // 列标题
dataIndex : '16'
},{
header : '17', // 列标题
dataIndex : '17'
},{
header : '18', // 列标题
dataIndex : '18'
},{
header : '19', // 列标题
dataIndex : '19'
},{
header : '20', // 列标题
dataIndex : '20'
},{
header : '21', // 列标题
dataIndex : '21'
},{
header : '22', // 列标题
dataIndex : '22'
},{
header : '23', // 列标题
dataIndex : '23'
},{
header : '24', // 列标题
dataIndex : '24'
},{
header : '25', // 列标题
dataIndex : '25'
},{
header : '26', // 列标题
dataIndex : '26'
},{
header : '27', // 列标题
dataIndex : '27'
},{
header : '28', // 列标题
dataIndex : '28'
},{
header : '29', // 列标题
dataIndex : '29'
},{
header : '30', // 列标题
dataIndex : '30'
}];
var colMArray7 = new Array();
colMArray7 = [{
header : '日常', // 列标题
dataIndex : 'jiabanType0'
}, {
header : '双休 ', // 列标题
dataIndex : 'jiabanType1'
}, {
header : '节假 ', // 列标题
dataIndex : 'jiabanType2'
}];
colMArray1 = colMArray1.concat(colMArray2);
colMArray1 = colMArray1.concat(colMArray5);
colMArray1 = colMArray1.concat(colMArray6);
colMArray1 = colMArray1.concat(colMArray7);
// 定义列模型
var cm = new Ext.grid.ColumnModel({
defaults : {
sortable : true,
menuDisabled:true,
align : 'center'
},
columns:colMArray1,
rows:[groupTmp]
});
三,表格实例,
// 表格实例
var grid = new Ext.grid.GridPanel({
region : 'center', // 和VIEWPORT布局模型对应,充当center区域布局
margins : '3 3 3 3',
// collapsible : true,
border : false,
// 表格面板标题,默认为粗体,我不喜欢粗体,这里设置样式将其格式为正常字体
title : '<span class="commoncss"></span>',
// height : 500,
autoScroll : true,
frame : true,
store : store, // 数据存储
stripeRows : true, // 斑马线
cm : cm, // 列模型
bbar : bbar,// 分页工具栏
// plugins : [ summary ], // 合计
plugins : [new Ext.ux.plugins.GroupHeaderGrid()] , // 分组
//bodyStyle : "width:100%",
viewConfig : {
//scrollOffset : 0,// 表示表格右侧为滚动条预留的宽度
// 不产横向生滚动条, 各列自动扩展自动压缩, 适用于列数比较少的情况
//forceFit : true
},
loadMask : {
msg : '正在加载表格数据,请稍等...'
}
});
五,当事件触发,如点击按钮时,需重新变表头
function setFomatForm(){
var params = qForm.getForm().getValues();
var tValue =params['starttime'];
var arr=tValue.split("-");
var countDay=dayNumOfMonth(arr[0],arr[1]);
var colMArray11=new Array();
for(var i=1;i<=countDay;i++){
colMArray11.push({header : i, dataIndex:i, align : 'center'});
}
var cols=new Array();
cols=cols.concat(colMArray2);
cols=cols.concat(colMArray5);
cols=cols.concat(colMArray11);
cols=cols.concat(colMArray7);
var rows_h=[{header: '', colspan: 4, align: 'center' },{
header : '加班日期及加班时长(单位:小时)',
menuDisabled:true,
colspan :colMArray11.length,
align : 'center'
},{header:'',colspan:3,align:'center'}];
grid.reconfigure(store,new Ext.grid.ColumnModel({
columns:cols,
rows:[rows_h]
}));
}
完成
相关推荐
该例子实现了ext的gridpanel多层表头+分组+小计以及与Java后台交互的全代码。还有自适应浏览器大小的功能包括导出excel,里面有注释,可能注释不全。分别为group.jsp,totals.jsp页面。
在提供的文件名"GroupHeaderPlugin"中,"Group"通常指的是分组,这可能意味着这个插件不仅实现了复杂的表头,还支持数据的分组展示,使得用户可以方便地对数据进行汇总和分析。 使用此插件时,开发者需要注意以下几...
在压缩包文件"EXT表头三层插件"中,可能包含了实现这一功能的源代码、示例文件以及相关的文档资源。通过解压并研究这些文件,开发者能够更直观地了解这个插件的工作原理,并将其应用到自己的项目中。 总的来说,EXT...
动态表头是ExtJS中一个高级特性,它允许开发者根据需要在运行时动态地创建和修改表格的列结构。这在处理数据展示和操作时具有很大的灵活性,尤其在数据字段不确定或需要自定义的情况下非常实用。 标题“extjs 实现...
在EXT JS这个强大的JavaScript库中,多表头和锁定列的结合使用是创建复杂、功能丰富的数据展示表格的重要手段。EXT JS允许开发者构建高度自定义的用户界面,尤其是在处理大量数据时,锁定列和多表头功能能显著提高...
在描述中提到的“复杂(多行)表头”是指在数据网格中创建多级或者多层次的表头,这种设计常用于显示复杂的分类或分组信息。多行表头可以清晰地展示数据的层次结构,帮助用户更直观地理解和操作数据。例如,第一行可能...
在这个特定的场景中,我们关注的是"多表头"和"列锁定"功能,这两者都是Ext JS表格视图中的高级特性。 多表头(Multi-Level Headers)允许在表格中创建层次化的列标题,这在处理复杂数据时非常有用。通过多表头,...
合并表头允许我们在`grid`中创建多级表头,使得数据分类更加清晰,尤其对于处理大量分组数据时更为有用。`Ext grid`的这种功能通常通过插件实现,如在给定的资源中提到的`GroupHeaderPlugin`。这个插件允许开发者...
标题“EXT复杂表头+锁定列例子”提示我们这里将探讨EXT库在实现这种功能时的应用。 EXT是一个强大的JavaScript库,专为构建桌面级的Web应用而设计。它提供了丰富的组件,包括表格(Grid),用于高效地展示和操作...
在本文中,我们将深入探讨"Ext表格列锁定+多表头插件"这一主题,它在Ext3.4版本中的实现及其相关技术。这个插件主要用于改进Ext Grid的用户体验,特别是处理大量数据时,通过列锁定和多表头功能,使得用户能够更有效...
6. **EXT插件**:虽然EXT核心库未直接提供固定表头功能,但社区开发了一些插件,如`Ext.ux.grid.FixedHeaderTable`,这些插件可以直接应用于GridPanel,简化实现固定表头的过程。 7. **示例代码**:HTMLPage2.htm...
EXT 4.1提供了丰富的API接口和事件,如`columnresize`、`columnsort`等,便于开发者在运行时动态调整GridHeader的配置,响应用户的操作。 综上所述,EXT 4.1的GridHeader功能强大且灵活,为开发复杂的、具有良好...
在ExtJS 3中,如果你需要合并表头,你可能会使用`Ext.grid.GroupingView`或自定义的视图类。表头合并通常涉及到设置特定的配置选项和处理渲染过程。以下是一些关键知识点: 1. **GroupingView**: 这是ExtJS 3中用于...
标题中的"GWT-EXT 多表头插件GroupHeaderPlugin"指的是一个用于Google Web Toolkit (GWT) 应用程序的扩展,它提供了多级表头的功能。在GWT中,EXT是一个流行的用户界面库,它允许开发人员创建富客户端应用。...
这个"extjs动态表头"的资源很可能是一个插件或组件,名为`Ext.ux.grid.DynamicGridPanel.js`,它扩展了ExtJS的标准GridPanel,增加了动态调整列的能力。 动态表头的核心功能包括: 1. **实时编辑**:用户可以在...
Ext 表头合并插件是一种...总的来说,Ext表头合并插件是提升Ext JS Grid功能的一个有力工具,它使得数据展示更加清晰,提升了用户体验。通过熟练掌握其用法和配置,开发者可以构建出更加专业且用户友好的数据展示界面。
在ExtJS6中,数据网格可以配置分组、分组合计行以及二重表头,这些都是增强数据展示和理解的重要特性。分组功能允许将数据按照特定字段进行分类,使数据更有条理;分组合计行则是在每个分组下显示该组数据的总计,...
EXTJS以其强大的组件模型和优雅的数据绑定机制而闻名,其中"EXT 扩展子列表头"是EXTJS框架中的一种功能,主要应用于数据展示和交互。本文将深入探讨这个主题,以及如何在EXTJS中实现列表头的分层结构。 "EXT 扩展...
1. **GridPanel**:动态表头的实现基于`Ext.grid.Panel`(或简称为`GridPanel`)。首先,我们需要创建一个GridPanel实例,并配置其`columns`属性,这个属性可以动态地更新。 2. **Column模型**:`Ext.grid.column....
在ExtJS Grid中,多表头能够帮助用户更清晰地理解列的分组和关系,提高数据的可读性和分析性。 首先,我们来详细解释一下多表头的概念。在传统的表格中,表头通常只有一个层次,而在多表头中,我们可以设置多个层次...