软件下载 | 资讯教程 | 最近更新 | 下载排行 | 一键转帖 | 发布投稿
您的位置:最火下载站 > 网络编程 > ASP教程 > Ext以及Coolite下实现表格锁定列和多行表头

Ext以及Coolite下实现表格锁定列和多行表头

这段时间我们的项目中采用了Coolite来做客户端,Coolite目前的版本是0.8.1,它所采用的Ext版本是2.2.1,因此下面主要是说明在这个版本下所实现的锁定列和多行表头,需要说明的是Ext在2.0版本以后就不自带锁定列功能了,只能自己实现,中国人的习惯和国外的不太一样,喜欢表格化得数据,而且形式又多种,表格最基本的功能之一,就是要锁定列和多行表头,而这两项又是Coolite和Ext所提供的组件中所没有直接包含的,虽然他们这两个框架没有提供,但依然要说的是Ext的js功能很强大,Coolite为Ext在Asp.net上的应用封装了绝大多数功能,还扩展了一部分,庞大的功能模块,非常不错,可以和官方开源封装的java版GWT2.0媲美。

看了些废话,讲入主题了,实现锁定列目前较为常见的是继承Grid,然后重写模块,实现双表格,下面的示例是采用MeDavid所实现的锁定列方式,版本为[Update 5],Ext的代码很长就贴点主要和修正的,例子在后面有完整提供。Ext为这些控件都提供了一个模板的方式以供重写,就是重写了主模板. 

initTemplates : function(){ 
if(!this.templates){ 
this.templates = {}; 

if(!this.templates.master){ 
this.templates.master = new Ext.Template( 
'<div class="x-grid3" hidefocus="true">', 
'<div class="x-grid3-locked">', 
'<div class="x-grid3-header"><div class="x-grid3-header-inner"><div class="x-grid3-header-offset">{lockedHeader}</div></div><div class="x-clear"></div></div>', 
'<div class="x-grid3-scroller"><div class="x-grid3-body">{lockedBody}</div><div class="x-grid3-scroll-spacer"></div></div>', 
'</div>', 
'<div class="x-grid3-viewport">', 
'<div class="x-grid3-header"><div class="x-grid3-header-inner"><div class="x-grid3-header-offset">{header}</div></div><div class="x-clear"></div></div>', 
'<div class="x-grid3-scroller"><div class="x-grid3-body">{body}</div><a href="#" class="x-grid3-focus" tabIndex="-1"></a></div>', 
'</div>', 
'<div class="x-grid3-resize-marker">&#160;</div>', 
'<div class="x-grid3-resize-proxy">&#160;</div>', 
'</div>' 
); 

Ext.grid.LockingGridView.superclass.initTemplates.call(this); 
}, 

同时为ColumnModel增加getTotalLockedWidth方法,原有[Update 5]中的脚本中Ext.grid.LockingColumnModel要去掉。 

Ext.grid.ColumnModel.prototype.getTotalLockedWidth=function(){ 
var totalWidth = 0; 
for(var i = 0; i < this.config.length; i++){ 
if(this.isLocked(i) && !this.isHidden(i)){ 
totalWidth += this.getColumnWidth(i); 


return totalWidth; 
};
另外,版本为[Update 5]目前支持行选择模式有点BUG,就是在获得焦点时行会移动,这是因为没有重新定位造成的,在Ext.grid.LockingGridView中加入以下方法即可修正。 

getResolvedXY : function(resolved){ 
if(!resolved){ 
return null; 

var c = resolved.cell, r = resolved.row; 
return c ? Ext.fly(c).getXY() : [this.scroller.getX(), Ext.fly(r).getY()]; 
}, 

多行表头分别对应有两个文件,一个是针对有锁定列的表格,一个是针对没有锁定列的表格,两个表格输出的对象是不一样的,要经过判断来输出不一样的值,至于实现的方式大家看下代码就知道了。

下面把它融入进Coolite中。新建一个ExtGridPanel继承自GridPanel,然后重写OnPreRender如下: 

protected override void OnPreRender(EventArgs e) 

//判断是否有锁定列 
bool haveLock=false; 
ExtColumn extcolumn; 
int i; 
for (i = 0; i < ColumnModel.Columns.Count; i++) 

extcolumn = ColumnModel.Columns[i] as ExtColumn; 
if (extcolumn == null) 
break; 
else if (extcolumn.Locked) 

haveLock = true; 
break; 


//判断是否有多行表头 
foreach (Plugin plugin in Plugins) 

if (plugin is ExtGroupHeaderGrid) 

//如果表格是由锁定的,那一样通知插件也是要求锁定的 
//这里用一个属性进行区分 
((ExtGroupHeaderGrid)plugin).Locked = haveLock; 
break; 


 
System.ComponentModel.AttributeCollection attrscoll = TypeDescriptor.GetAttributes(this, true); 
 
//注册js 
if (haveLock) 

//锁定列之前的列也必须锁定 
for (int j = 0; j < i; j++) 

extcolumn = ColumnModel.Columns[j] as ExtColumn; 
if (extcolumn != null) 
extcolumn.Locked = haveLock; 

((InstanceOfAttribute)attrscoll[typeof(InstanceOfAttribute)]).ClassName = "Ext.grid.LockingEditorGridPanel"; 
ScriptManager.RegisterClientScriptInclude(base.GetType(), "CDPFLibrary.Build.extjs.Grid.LockingGridPanel.js"); 

else 

((InstanceOfAttribute)attrscoll[typeof(InstanceOfAttribute)]).ClassName = "Coolite.Ext.GridPanel"; 

 
base.OnPreRender(e); 
}
同时新增了几个类,新增类如下:ExColumnModel、ExtColumn、ExtGridPanel、ExtGroupHeaderGrid、ExtRow、ExtRowCollection、ExtRows、ExtRowsCollection这些,具体代码都在源码中可以自己分析。
因为同一个表格同时要支持锁定列和非锁定列,因为功能不同输出的js也不一样,那么InstanceOfAttribute的ClassName类名要进行变动,所以要采用TypeDescriptor.GetAttributes来取得属性,这样可以保存当前实例所进行修改过后的自定义属性值,而用Type. GetCustomAttributes只能取得实例定义时的值,不能获得当前实例改动后的值,这一点要在Coolite.Ext.Web程序集的WebControl_Helpers类的GetClientConstructor方法和InstanceOf属性中进行修改,个人认为它是一个明显的BUG。

其实涉及的变动的地方还挺多,上面仅仅是关键点,源码随文章发布,Coolite的源码可以去官方下来,下面也有链接。

下载:锁定列和多表头源码    Coolite源码0.8.1
项目需要用Vs2008打开,需要ASP.NET3.5支持,欢迎发表意见。

转自:http://www.cnblogs.com/zhujiechang/

    相关阅读
    网友评论