欢迎来到Doc100.Net免费学习资源知识分享平台!
您的位置:首页 > 程序异常 >

ext grid 表格锁定列+多表头的设计与实现(一)

更新时间: 2014-01-05 03:06:53 责任编辑: Author_N1

 

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

首先找到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 totalWidth;
    },
    
    getLockedCount : function(){
        for(var i = 0, len = this.config.length; i < len; i++){
            if(!this.isLocked(i)){
                return i;
            }
        }
    },
    
    moveColumn : function(oldIndex, newIndex){
        if(oldIndex < newIndex && this.isLocked(oldIndex) && !this.isLocked(newIndex)){
            this.setLocked(oldIndex, false, true);
        }else if(oldIndex > newIndex && !this.isLocked(oldIndex) && this.isLocked(newIndex)){
            this.setLocked(oldIndex, true, true);
        }
        Ext.ux.grid.LockingColumnModel.superclass.moveColumn.apply(this, arguments);
    }
});

之后我们还需要在定义的gridPanel中去定义使用的插件

plugins:[new Ext.ux.plugins.LockedGroupHeaderGrid()]
这时,我们还需要在之前定义好的LockingColumnModel中设置冻结的列。很简单,加上locked:true就可以了

var cm = new Ext.ux.grid.LockingColumnModel({
		header : 'AAA',
		dataIndex : 'aaa',
		locked: true
	});
让我们看一下效果,应该已经成功了吧?

不能上传附件,大家要是有需要lockingGridView的可以直接从源码包里去找,或者直接找我要。我的邮箱:gjy891230@163.com。

今天先写到这里,明天再写上后半段关于如何实现锁定列和多表头的整合,我也还处于研究阶段.

上一篇:上一篇
下一篇:下一篇

 

随机推荐程序问答结果

 

 

如对文章有任何疑问请提交到问题反馈,或者您对内容不满意,请您反馈给我们DOC100.NET论坛发贴求解。
DOC100.NET资源网,机器学习分类整理更新日期::2014-01-05 03:06:53
如需转载,请注明文章出处和来源网址:http://www.doc100.net/bugs/t/18440/
本文WWW.DOC100.NET DOC100.NET版权所有。