Ext Grid 锁定列+多表头的设计与实现（二）

最新推荐文章于 2019-11-12 15:22:23 发布

原创

最新推荐文章于 2019-11-12 15:22:23 发布 · 4.6k 阅读

2 ·

CC 4.0 BY-SA版权

本文介绍了如何在Ext Grid中同时实现锁定列和多表头的功能。作者在尝试结合现有插件时遇到错误，通过分析源代码发现多表头插件的headersRender方法不支持多维数组，导致问题。文章探讨了Ext Grid的结构，特别是表头的生成方式，并指出解决多表头与锁定列结合的关键在于修改headers数组的结构。

上一次实现了锁定列，我是用的是Ext3.2扩展包里面的lockingGridView插件，实现起来还是很简单的。此外Grid还需要多表头，我从网上下到了几个关于多表头的插件，单独使用没有问题，但是将多表头和锁定列放到一起使用的时候就会报错。我查看了一下多表头的代码，发现了这个方法：

renderHeaders: function() {
			var ts = this.templates, headers = [], cm = this.cm, rows = cm.rows, tstyle = 'width:' + this.getTotalWidth() + ';';
			for (var row = 0, rlen = rows.length; row < rlen; row++) {
				var r = rows[row], cells = [];
				for (var i = 0, gcol = 0, len = r.length; i < len; i++) {
					var group = r[i];
					group.colspan = group.colspan || 1;
					var id = this.getColumnId(group.dataIndex ? cm.findColumnIndex(group.dataIndex) : gcol);
					var gs = Ext.ux.plugins.GroupHeaderGrid.prototype.getGroupStyle.call(this, group, gcol);
					cells[i] = ts.gcell.apply({
						cls: group.h