我们知道Ext的表格功能是很强大的,但有时仍然满足不了我们的需求。比如有时我们需要将表格的列锁定,类似Excel冻结列的功能。再比如有时我们希望在表格底部显示一行合计。
Ext的示例中带有这种锁定的扩展,如果只需要锁定列,依照这个示例就可以满足我们的要求。而且Ext的示例中也带有分组合计的功能,如果需要分组合计也正好可以满足。但是,这个分组合计的功能却不能进行整表的合计,而且分组的列必须包含在表格中,虽然可以被隐藏但分组前总是带有一个加号,用来展开和收起分组。显然这个用来做整表的合计是不合适的。并且这个分组合计插件与锁定列的扩展是不能同时使用的,由于他们都操作表格的view所以是冲突的。
在网上看到一篇文章,有人做了一个表格合计的功能,但是不巧的是他把合计的行放在了表格的顶端,这不符合我们的习惯。而且他的这个扩展也是与锁定列插件冲突的。于是只好自己写一个。
废话不多说了,先看一下效,然后上代码。
JS代码放在附件中,包含4个文件,其中两个是演示代码。另外GridSummary.js是扩展的合计行插件,LockingGridView_fixed.js是为了解决锁定列功能与合计共同使用时产生的冲突问题的。
锁定列与合计行功能可以分开使用也可以一起使用。使用锁定列功能时,表格必须使用锁定列专用的ColumnModel:Ext.ux.grid.LockingColumnModel ,并且要配合专用的view : new Ext.ux.grid.LockingGridView()。
使用合计行功能只需要使用一个grid插件plugins : new Ext.ux.grid.GridSummary()。
此功能是基于Ext3.3.1扩展的,用法就是这样的,具体的情况请看附件中的demo吧(放到Ext文件加内就可运行预览了)。估计还有很多人想要使用这样的功能,特此贡献出来,祝大家使用愉快。
此文章由作者转发,要下载附件或与作者交流,请到原文地址:http://www.oecp.cn/hi/slx/blog/1168162,谢谢。
分享到:
相关推荐
用于Ext开发Grid中遇到的所锁列的问题,这个很有帮助
这个插件主要用于改进Ext Grid的用户体验,特别是处理大量数据时,通过列锁定和多表头功能,使得用户能够更有效地浏览和操作数据。 首先,"列锁定"是Ext Grid中一个非常实用的功能,特别是在显示宽广、多列的数据表...
Ext grid 动态添加字段、列扩展, 如何动态添加或者删除一个grid的列
在本文中,我们将深入探讨如何在Ext2.0框架中实现Grid列的锁定功能,这是一种在数据展示时保持关键列固定不动,以便用户更轻松地浏览和操作表格数据的技术。Ext是一个强大的JavaScript库,用于构建复杂的Web应用程序...
找了半天,结果在extjs的老家找到一个前辈写的代码,可以在grid上面加上合计, <br>但是却只能合计grid里面的数据,但是我们平常一般是只显示20行或者30行,这样的合计就没有什么意义,我们的合计数据是单独从...
总之,EXT Grid的复杂表头和锁定列功能是其强大之处,能够帮助开发者构建专业且用户友好的数据展示界面。通过理解EXT Grid的API和配置选项,开发者可以灵活地定制表格以满足各种需求。博客文章和压缩包中的示例代码...
在EXT JS这个强大的JavaScript库中,多表头和锁定列的结合使用是创建复杂、功能丰富的数据展示表格的重要手段。EXT JS允许开发者构建高度自定义的用户界面,尤其是在处理大量数据时,锁定列和多表头功能能显著提高...
Ext grid中渲染进度条,超帅 源码-----下载不扣分,回帖加1分,欢迎下载,童叟无欺。Ext grid中渲染进度条,超帅 源码-----下载不扣分,回帖加1分,欢迎下载,童叟无欺。Ext grid中渲染进度条,超帅 源码-----下载不扣分...
5. **编辑功能**:EXTGRID可以配置为行编辑或单元格编辑模式,方便用户直接在网格中添加、修改和删除数据。 6. **扩展性**:EXTGRID支持各种插件和扩展,如工具栏、分组视图、拖放功能、树形网格等,增强功能和交互...
extgrid具有列大小 位置改变 排序 分组 分页 工具栏 扩展行 rowNumber 多选列 编辑列 行列锁 ajax远程支持 table转换 等功能">http: www extgrid com extgrid 是一款jquery上的gird插件 界面风格采用了类似easyui ...
通过阅读"5_使用Grids显示数据.doc"文档,你可以更深入地了解EXT JS Grid的用法和实践,包括如何配置和使用上述功能,以及解决实际项目中的问题。掌握EXT JS Grid的使用,对于提升前端数据展示的效率和用户体验有着...
在IT领域,特别是Web开发中,Ext Grid是一个广泛使用的组件,用于展示和管理大量数据。它提供了丰富的功能,包括排序、筛选、分页等,使得数据的交互和操作变得非常便捷。当我们需要将Ext Grid中的数据导出为Excel...
在EXT JS框架中,Grid组件是一种非常常用的展示数据表格的方式,它提供了丰富的功能和灵活性。在某些场景下,用户可能需要合并行或列以更好地组织和呈现数据,例如在显示汇总信息或者创建复杂的报告时。"ext grid ...
3. **自定义导出按钮**:EXT Grid通常有一个工具栏,我们可以在其中添加一个自定义的按钮,当用户点击该按钮时触发导出操作。在按钮的点击事件处理器中,执行上述的数据转换和文件写入操作。 4. **文件下载触发**:...
在Ext Grid中,你可以定义列(columns)来展示数据的不同属性,通过store来绑定数据源,以及使用各种插件和功能,如行选择、分组、自定义编辑等。在提供的"extdemo"压缩包中,可能包含了一个展示如何创建和配置Grid...
它支持分页、排序、过滤和自定义列功能,还可以与其他EXT组件(如表格)无缝集成。EXT Grid的核心特性包括: 1. 数据绑定:EXT Grid可以与服务器端的数据源进行双向绑定,这得益于EXT JS的数据模型和Store机制。...
EXT Grid导出Excel功能的核心是利用浏览器的Blob对象和FileSaver.js库。Blob对象可以用来存储二进制数据,而FileSaver.js则提供了在用户本地保存文件的能力。首先,我们需要确保EXT Grid的数据已经加载完成并且正确...
3. **配置Column Model**: 创建一个Ext.grid.ColumnModel,定义每列的属性,如text(列标题)、dataIndex(与Model字段关联)和width。 4. **创建Grid Panel**: 创建一个Ext.grid.Panel实例,将Store、Model和...
EXT Grid具有高度可定制性,支持列排序、筛选、分页等功能,使得用户界面更加友好。 分页是EXT Grid的重要特性之一,它可以有效地管理大量数据,避免一次性加载所有数据导致的性能问题。EXT Grid通常与服务器进行...
在大数据量的表格中,锁定列功能可以提高用户的工作效率,减少他们寻找特定信息的时间。 在Ext JS 3.4.0版本中,实现这些特性需要利用其提供的GridPanel组件。GridPanel允许开发者自定义头部(header)和列...