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

Ext Grid 锁定列与多表头实现教程（一）

最新推荐文章于 2018-08-22 14:33:00 发布

原创

最新推荐文章于 2018-08-22 14:33:00 发布 · 5.1k 阅读

3 ·

CC 4.0 BY-SA版权

这篇博客介绍了如何在Ext Grid中实现报表的锁定列功能。作者分享了lockingGridView.js插件的使用，该插件允许通过LockingColumnModel来判断、设置列的锁定状态，并提供了获取冻结列宽、数量和移除列的方法。由于附件无法上传，作者提供了获取源码的途径，包括邮箱和微博链接。文章预告将探讨如何结合锁定列和多表头的实现。

首先找到Ext源码包下lockingGridView.js（我会放到附件中）

这个插件的目的在于实现Grid的锁定列效果。使用起来也很简单，只需要建立一个LockingColumnModel。它继承了Ext中的ColumnModel，并且添加了几个方法用来判断该列是否被锁住、设置该列是否锁住、获取冻结列宽、获取冻结列个数、移除列方法

Ext.ux.grid.LockingColumnModel = Ext.extend(Ext.grid.ColumnModel, {
    isLocked : function(colIndex){
        return this.config[colIndex].locked === true;
    },
    
    setLocked : function(colIndex, value, suppressEvent){
        if(this.isLocked(colIndex) == value){
            return;
        }
        this.config[colIndex].locked = value;
        if(!suppressEvent){
            this.fireEvent('columnlockchange', this, colIndex, value);
        }
    },
    
    getTotalLockedWidth : function(){
        var totalWidth = 0;
        for(var i = 0, len = this.config.length; i < len; i++){
            if(this.isLocked(i) && !this.isHidden(i)){
                totalWidth += this.getColumnWidth(i);
            }
        }
        return totalWidt