- 浏览: 75156 次
文章分类
最新评论
1.产生动态的表头
function initHeader(data){ var colWidth = 50; var headers = data.header; var fields = data.fields; if(headers == null || headers.length == null || headers.length == 0){ alert("请先给XXX!"); return; } /* * 构建field和data */ var dataMaps =[]; dataMaps.push({name:'group_name',details:[]}); for(var k=0;k<fields.length;k++){ dataMaps.push(fields[k]); } dataMaps.push({name:'total_count',details:[]}); var gridStore = new Ext.data.JsonStore({ data: {root:data.datas}, autoDestroy: true, root:'root', fields:dataMaps }); /** * 构建复杂表头 */ var columns = [{header: 'XX', locked:true, width: 90, dataIndex: 'group_name'}, {header: '合计', locked:true, width: 40, dataIndex: 'total_count'}]; var columnsRow = [{header: 'XX',align:'center',rowspan:2,colspan:1,locked:true,height:46}, {header: '合计',align:'center',rowspan:2,colspan:1,locked:true,height:46}]; for(var i=0; i<headers.length; i++){ var dataInfo = headers[i]; var dates = dataInfo.header_2; //第一行 var hrcell = {}; hrcell.header = dataInfo.header_1;//列名 hrcell.colspan = dates.length; hrcell.align = 'center'; hrcell.width = dates.length*colWidth; columnsRow.push(hrcell); for(var j=0; j<dates.length; j++){ var dobj = dates[j]; //第二行 var drcell = {}; drcell.header = dobj.count_name; drcell.width = colWidth; drcell.align = 'center'; drcell.dataIndex = dobj.column_index; columns.push(drcell); } } var grid = new Ext.grid.GridPanel({ allowEdit:false, columnLines: true, autoScroll:true, stripeRows: true, autoSizeColumns : false, view: new Ext.ux.grid.LockingGridView(), store:gridStore, enableColLock:false, enableColumnResize:false, enableColumnMove: false, enableColumnHide:false, colModel: new Ext.ux.grid.LockingColumnModel(/*columns*/{ columns:columns, defaultSortable: true, bLockedTable:true, rows: [columnsRow] }), viewConfig: { forceFit: false }, sm: new Ext.grid.RowSelectionModel({singleSelect:true}), title: '', plugins: [new Ext.ux.plugins.GroupHeaderGrid()] }); return grid; }
发表评论
-
gridPanel设置行变色
2014-05-16 10:09 410doStoreLoad: function() { th ... -
grid中操作各种状态
2013-02-02 14:34 822//获得子表数据 function getChildGridD ... -
重置按钮
2013-01-31 11:38 642this.getForm().reset(); if( ... -
gridPanel 新增时,自动添加默认值
2013-01-31 10:53 753var grid = this.grid, store = g ... -
Ext 初始化的过程
2012-12-19 11:15 7591.Ext的入口函数 initComponent和constr ... -
Ext显示时间的格式
2012-12-06 13:50 8561.panel a.显示时,时间格式 'start_time' ... -
Ext 画图
2012-12-05 15:03 9001.饼图 PieChartPanel = Ext.exten ... -
Ext各种赋值的方法
2012-11-23 12:11 1112var form = Ext.getCmp('teacherI ... -
Ext.data中常用的方法
2012-11-08 18:14 6231.主要由以下构成 a.DataProxy:子类--Mermo ... -
Ext与panel
2012-11-01 17:51 01.选中第一行 grid.getSelectionModel( ... -
Ext 查询控件
2012-10-19 17:59 701var findNurseList = function(){ ... -
Extjs与js相关的方法
2012-10-29 17:22 7101.注册事件 a.listeners listeners:{ ... -
Extjs的form表单
2012-08-28 19:21 6121.根据id取值 form.getForm().findfie ... -
Extjs的layout
2012-08-23 10:52 11911.layout常用的选项 选项 ... -
Gird编辑
2012-08-22 16:36 7361.grid可编辑条件 为了让 grid 可编辑,我们需要做四 ... -
Extjs的Grid
2012-08-22 15:09 6021.data store 类型: • Simple (Ar ... -
Extjs的工具条
2012-08-21 17:37 7411.包括的按钮 • Ext.Toolbar:按钮的主要容器; ... -
Extjs的标签和方法
2012-08-21 16:31 11851.加载 Ext.onReady(function(){ ... -
应用Extjs需要引入的库
2012-08-20 14:07 422开发时您可以使用 ext‐all‐debug,发布时转换为 e ...
相关推荐
`Ext JS`是一个流行的JavaScript库,用于构建富客户端应用,其`grid`组件提供了灵活的数据网格展示,而合并表头则是增强用户界面和提升用户体验的关键特性。 合并表头允许我们在`grid`中创建多级表头,使得数据分类...
表头合并通常涉及到设置特定的配置选项和处理渲染过程。以下是一些关键知识点: 1. **GroupingView**: 这是ExtJS 3中用于创建分组网格的视图类。它可以显示行分组,但默认不支持列的合并。如果你想在分组网格中实现...
2. **合并单元格**:在表头中合并单元格,形成跨列或跨行的标题,使得复杂的数据结构更加清晰。 3. **可展开/折叠**:表头中的部分可以折叠或展开,以隐藏或显示更详细的层级信息,提高界面的可读性和交互性。 4. **...
Ext 表头合并插件是一种...总的来说,Ext表头合并插件是提升Ext JS Grid功能的一个有力工具,它使得数据展示更加清晰,提升了用户体验。通过熟练掌握其用法和配置,开发者可以构建出更加专业且用户友好的数据展示界面。
在EXT JS框架中,Grid组件是一种非常常用的展示数据表格的方式,它提供了丰富的功能和灵活性。...记住,实践是检验代码的最好方式,尝试根据上述步骤编写代码,逐步调试和完善,最终你会得到一个满意的行合并EXT Grid。
根据提供的文件信息,我们可以深入探讨如何在 Ext JS 中实现 Grid 的单元格合并功能。此案例主要涉及到了自定义 GridView 的 `renderHeaders` 方法来达到单元格合并的目的,并且还涉及了模板(Template)的使用、...
在EXT 4.1中,可以使用GridHeader实现跨列的表头合并,以表示某些列的共同属性或类别。这通过配置`header跨越`属性(`header跨越`)实现,可以有效减少列的数量,提高数据的可读性。 5. **表头菜单** GridHeader...
综上所述,"Ext 合并单元格"是一个增强用户界面的关键特性,通过合理的代码设计和配置,可以实现各种复杂的单元格合并效果,使数据展示更加高效且易于理解。结合提供的源代码和效果图,我们可以深入学习和实践这一...
本文将详细介绍一种在Ext JS中实现数据单元格合并的方法,并通过示例代码来帮助开发者更好地理解和应用这一技术。 #### CSS样式调整 为了实现良好的视觉效果,在开始编写JavaScript代码之前,我们需要对CSS样式做...
此外,如果合并的行跨越了多列,还需要确保列的顺序和width不会导致合并后的单元格位置错乱。 4. **CSS样式调整**:为了使合并后的单元格看起来更加自然,可能需要对CSS做一些调整,例如隐藏被合并的单元格,或者...
表格合并通常涉及到两个主要方面:行合并和列合并。在ExtJS中,这可以通过操作表格面板(`Ext.grid.Panel`)的配置和插件来实现。首先,我们需要了解表格的行和列模型,包括`columns`配置项和`store`数据源。 1. 行...
1. **表头分割**:EXT JS允许开发者将表头进行多级拆分,这样可以更好地组织复杂的数据结构,使用户能快速理解列的含义和层级关系。例如,一级标题可以表示部门,二级标题表示具体的职位,数据行则显示各个职位的...
标题中的“extjs合并单元格”指的是在使用Ext JS这个JavaScript框架时,如何实现表格(Grid)中的单元格合并功能。Ext JS是一个用于构建富客户端Web应用的前端框架,提供了丰富的组件库,其中包括数据网格(Data ...
这个JavaScript文件可能定义了新的类或者扩展了ExtJS的内置`Ext.grid.header.Container`类,以支持多级表头的逻辑和交互。它可能包含的方法有设置和获取表头层级、合并单元格、处理排序事件等。 `HeaderColumn.css`...
在实际应用中,"EXT ToExcel"功能还可以结合其他EXT特性,例如自定义样式、表头和合并单元格,以提供更丰富的导出体验。同时,考虑到浏览器的安全限制,这种方法可能需要用户手动触发文件下载,而不是自动执行,以...
这是一个方法,可以根据业务逻辑返回一个对象,该对象的 `row` 和 `column` 分别表示当前行和列,`rows` 和 `cols` 用于指定需要合并的行数和列数。在这个案例中,由于 `area` 占据了多行,我们可以在此方法中进行...
例如,可以使用条件格式化突出显示特定值,利用排序和过滤功能快速查找和分析数据,或者使用合并单元格来创建美观的表头。 5. **效率提升技巧**:在处理大型表格时,批量调整列宽能节省大量时间。选中连续的列,...
使用`::before`伪元素和`content`属性模拟合并单元格的效果。 在实际应用中,这种方法尤其适用于响应式设计,因为`<ul>`和`<li>`的灵活性使得我们可以更容易地调整单元格的大小和排列方式。同时,这种技术对于SEO也...