分類  >  Web前端 >

Ext Grid 鎖定列+多表頭的設計與兌現(二)

tags:    時間:2013-12-10 08:20:28
Ext Grid 鎖定列+多表頭的設計與實現(二)

上一次實現了鎖定列,我是用的是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.header ? 'ux-grid-hd-group-cell' : 'ux-grid-hd-nogroup-cell', 						id: id, 						row: row, 						style: 'width:' + gs.width + ';' + (gs.hidden ? 'display:none;' : '') + (group.align ? 'text-align:' + group.align + ';' : ''), 						tooltip: group.tooltip ? (Ext.QuickTips.isEnabled() ? 'ext:qtip' : 'title') + '="' + group.tooltip + '"' : '', 						istyle: group.align == 'right' ? 'padding-right:16px' : '', 						btn: this.grid.enableHdMenu && group.header, 						value: group.header || ' ' 					}); 					gcol += group.colspan; 				} 				headers[row] = ts.header.apply({ 					tstyle: tstyle, 					cells: cells.join('') 				}); 			} 			headers.push(this.constructor.prototype.renderHeaders.apply(this, arguments)); 			return headers.join(''); 		},

我們大致上看一下這段代碼。這是重寫了在Ext的headersRender方法。從方法名上就可以看出這個方法是控制表頭顯示的。其實Ext的Grid是由兩個div組成的,至於表頭,是由table構成的。只不過這個table的寬度和我們定義在columnModel中列的寬度是一致的,所以看起來像是一氣呵成的一張表格。了解到這裡,我們再看一下這段代碼,會發現他定義了一個headers的數組,存放著每一列HTML代碼,在最後直接返回的是一個拼裝好的table。但是這個headers數組是一個一維數組,所以很顯然他不支持多表頭。

再來看一下下面這段代碼:

renderHeaders: function() { 			var ts = this.templates, headers = [[],[]], cm = this.cm, rows = cm.rows, tstyle = 'width:' + this.getTotalWidth() + ';',tw = this.cm.getTotalWidth(), lw = this.cm.getTotalLockedWidth(); 			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 l = cm.isLocked(gcol)?1:0; 					var id = this.getColumnId(group.dataIndex ? cm.findColumnIndex(group.dataIndex) : gcol); 					var gs = Ext.ux.plugins.LockedGroupHeaderGrid.prototype.getGroupStyle.call(this, group, gcol); 					cells[l][i] = ts.gcell.apply({ 						cls: group.header ? 'ux-grid-hd-group-cell' : 'ux-grid-hd-nogroup-cell', 						id: id, 						row: row, 						style: 'width:' + gs.width + ';' + (gs.hidden ? 'display:none;' : '') + (group.align ? 'text-align:' + group.align + ';' : ''), 						tooltip: group.tooltip ? (Ext.QuickTips.isEnabled() ? 'ext:qtip' : 'title') + '="' + group.tooltip + '"' : '', 						istyle: group.align == 'right' ? 'padding-right:16px' : '', 						btn: this.grid.enableHdMenu && group.header, 						value: group.header || ' ' 					}); 					gcol += group.colspan; 				} 				headers[0][row] = ts.header.apply({ 					tstyle: 'width:' + (tw - lw) + 'px;', 					cells: cells[0].join('') 				}); 				headers[1][row] = ts.header.apply({ 					tstyle: 'width:' + lw + 'px;', 					cells: cells[1].join('') 				}); 				//alert(headers[0][row]); 				//alert(headers[1][row]); 				 			} 			//headers.push(this.constructor.prototype.renderHeaders.apply(this, arguments)); 			//var h = this.constructor.prototype.renderHeaders.apply(this, arguments); 			var h = this.constructor.prototype.renderHeaders.call(this); 			headers[0][headers[0].length] = h[0]; 			headers[1][headers[1].length] = h[1]; 			alert(h[0]); 			alert(h[1]); 			return [headers[0].join(''),headers[1].join('')]; 		}

其中tw和lw為定義的列寬和鎖定的列寬,有了這兩個值,我們可以通過樣式去控制顯示。具體相關的代碼我也在研究之中,但是我發現lockingGridView這個組件和其他的一些組件存在衝突,或多或少的都會存在一些問題。比如與合計的插件一起使用的時候,由於合計行在移動滾動條的時候計算寬度出現問題,導致合計行不能隨著列的移動而進行移動

推薦閱讀文章

Bookmark the permalink ,來源:互聯網