`
IvanLi
  • 浏览: 604594 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

扩展dhtmlGrid,使其支持自定义公式和动态列,表头合并

阅读更多
dhtmlGrid是一个功能比较齐全的html Grid控件,在其profesonal版中生成支持公式编辑到cell级别,我只想动态求任意列的和
,又不想花钱,就自己扩展了一下dhtmlgrid,使其支持在任意cell上添加求和公式,同时如果没个cell的值发生了改变,那么关联的
公式项会自动变化,跟excell有点像了,当然他的功能远不及excell强大。
1:扩展eXcell
eXcell是dhmtlGrid所有的cell的基类,所有的cell都是扩展自eXcell,dhtml中自带的类型有readOnly(eXcell_ro),editable(eXcell_ed)
图片,link,等等可以自己看它的doc有介绍,我扩展的类就叫eXcell_formulas
2:扩展eXcell步骤:
function eXcell_formulas(cell){
		try{
			this.cell = cell;
			this.grid = this.cell.parentNode.grid;
		}catch(er){}
		/**
		*	@desc: method called by grid to start editing
		*/
		this.edit = function(){
					
			}
		/**
		*	@desc: get real value of the cell
		*/
		this.getValue = function(){
				return "";
			}
		/**
		*	@desc: set formated value to the cell
		*/
		this.setValue = function(val){
				if(val.toString().trim()=="")
					val = " ";
				this.cell.innerHTML = val;
			}
		/**
		*	@desc: this method called by grid to close editor
		*/
		this.detach = function(){
				this.setValue(this.obj.value);
				return this.val!=this.getValue();
			}
}
eXcell_formulas.prototype = new eXcell;

这是扩展的骨架,要实现setValue,getValue,edit,detach四个方法,也可以继承已有的类
看看我的代码吧
/*==== add by ivan li math begin====*/
function eXcell_formulas(cell)
{
 	try
	{
		this.cell = cell;
		//指向grid控件
		this.grid = this.cell.parentNode.grid;
		
	}catch(er){}
}
//再这里我扩展自eXcell_ed
eXcell_formulas.prototype = new eXcell_ed;
//这个方法接受外界传来的cell的值,在这里是公式的值,
//当让,在这里cell是可以编辑的,如果输入的是公式那么要以=号开头
eXcell_formulas.prototype.setValue = function(val)
{
	if((typeof(val)!="number")&& val.toString()._dhx_trim()=="")
	{
 		val=" "
 		this.cell._clearCell=true;
	}
	
	if(val.toString()._dhx_trim().indexOf('=') != -1)
	{
		//以=号开头,说明是公式,那么存下来公式
		this.cell._val = val.toString()._dhx_trim();
		this.cell.innerHTML="formulas";
		
	}
	else
	{
		//如果不是以=号开头那么仍然保留原来的公式
		this.cell.innerHTML=val.toString()._dhx_trim();
	}
	//add cell observer
	//prototype.addCellObserver()
	//计划在此处把用obserer模式存下targetCell ->this,但是现在没成功,
        //主要式在callBack时不能调用存下的this.calcVale方法
}
//就算公式的值并显示
eXcell_formulas.prototype.calcValue = function()
{
	var innerFormulas;
	//如果没有存公式那么就不用计算了
	if(!this.cell._val)
	{
		return;
	}
	else
	{
		innerFormulas = this.cell._val.substr(1);
	}
	var cellAr = innerFormulas.split(',');
	
	var formulasResult = 0;
	for(icell=0; icell<cellAr.length;icell++)
	{
		
		cellChild = cellAr[icell].split('^');
		//得到targetCell对象
		var ex = this.grid.cells(cellChild[0],cellChild[1]);
		//目前只实现了加法,对于公式的解析还有待实现
		formulasResult= Number(formulasResult)+Number(ex.getValue());
	}
	this.cell.innerHTML = formulasResult;
	//如果有公式,那么把cell的颜色设置成黄色,以做提示
	this.setBgColor("yellow");
}
//此处添加CellObserver
eXcell_formulas.prototype.addCellObserver = function()
{
	var cellAr = this.cell._val.split(',');
	for(i = 0; i< cellAr.length; i++)
	{
		//if already has observer on the cell
		if(this.grid.formulasObserver.hasKey(cellAr[i]))
		{
			formulasCellAr = this.grid.formulasObserver.getValue(cellAr[i]);
			var hasRegistered = false;
			
			for(j = 0; j<formulasCellAr.length;j++)
			{
				if(this._val == formulasCellAr[j]._val)
				{
					hasRegistered = true;
					break;
				}
			}
			//if has not registered then add this formulascell in
			if(!hasRegistered)
			{
				formulasCellAr.push(this);
			}
		}
		//if no observer on the cell then add a new one
		else
		{
			var cellObservers = new Array();
			cellObservers.push(this);
			
			this.grid.formulasObserver.add(cellAr[i], cellObservers);
		}
	}
}

/*====add by ivan li math end====*/

3:修改grid部分
/*add by Ivan Li 2006-10-20 begin*/
	this.calcFormulas = function()
	{
		for(i = 0; i<this.getColumnCount();i++)
		{
			if("formulas" == this.getColType(i))
			{
				this._calcFormulasCol(i)
			}
		}
	};
	this._calcFormulasCol = function(colIdx)
	{
		for(j = 0; j < this.getRowsNum(); j++)
		{
			this.cells2(j, colIdx).calcValue();
		}
	};
	this.notifyCellChange = function(rowId,cellInd)
	{
		
		formulasCells = this.formulasObserver.getValue(rowId+"^"+cellInd);
		
		for(i = 0; i<formulasCells.length; i++)
		{
			
			//formulasCells[i] is eXcell_formulas type
			formulasCells[i].calcValue();
		}
	};
	/*add by Ivan Li 2006-10-20 end*/

有关dhtmlGrid可以自己到http://www.scbr.com/docs/products/dhtmlxGrid/index.shtml下载
分享到:
评论
29 楼 清风车影 2007-06-29  
非常好,找了好久才看到这么精典的。最喜欢的就是dhtmlxGrid1.2里面的动态过滤。
28 楼 zhenjia 2007-06-24  
个人感觉
mygrid.setHeader()
比xml里进行构造好得多,我的客户常常想改页面列表的title,如果进行XML里的构造我如果有要改的 不是改库就是改代码,或者有可能有人会那种读取properties文件,但是我觉得如果在JS上能进行设置就好了mygrid.setHeader('<bean:write name="myform" property="headerData"/>'); 这也不是很丑陋啊 标准标签 而不是<%%>
27 楼 IvanLi 2007-01-25  
walterjar 写道
能支持服务器端分页的dhtmlxGrid 什么地方有啊?Ivan Li
改了没有?

1.2 pro版里有!要花钱
26 楼 walterjar 2007-01-25  
能支持服务器端分页的dhtmlxGrid 什么地方有啊?Ivan Li
改了没有?
25 楼 IvanLi 2007-01-18  
今天新发现
在使用dhtml grid中的enableAutoHeigth方法要注意:
1:enableAutoHeigth的好处是可以根据grid的行的高度和行数来自动调整grid的高度,比如动态增加或者删除一行时,这个功能很有用。
2:但是在享受enableAutoHeigth带来的好处的同时我们牺牲了sroll bar,也就不能够smart rendering,而且如果在初始化grid时如果没有设定buffer的大小,那么dhtmlGrid的默认buffer是40,在grid行数>40的情况下,如果使用enableAutoHeigth(true),那么40行以上的数据将不会被显示,由于没有sroll bar,这些数据永远也不会被显示了!
24 楼 daoger 2007-01-17  
Ivan Li 写道
写分页比较有难度,值得一试


在客户端实现分页,将不属于该页的数据暂时放入缓存是困难一些!

在服务器端实现分页则比较好控制,只需要构造要显示的数据即可!
23 楼 IvanLi 2007-01-17  
写分页比较有难度,值得一试
22 楼 daoger 2007-01-17  
我现在做的几个页面感觉速度还是很快的,以后我准备添加显示的分页功能,提高操作速度!

每次只有保存后才更新页面上的数据显示!我用的是免费版,有些工作是自己扩展的!

21 楼 IvanLi 2007-01-17  
berlo 写道
你是服务器端处理的呀,还有个问题,你的数据是从服务器端取的数吧,服务器端是什么?jsp、php、asp?
我用的是jsp,直接loadXML(http://地址),服务器端返回xml格式的数据,现在能够正常的显示出数据来,但是我客户端取数据的请求发送了两遍,如果插入或修改操作岂不重复了,数据多对服务器端的压力也很大。这个问题你有吗?苦恼,跟踪代码也找不出来,嗨

1:js只认服务器返回的XML数据,至于服务器端使用什么技术,dhtmlgrid并不关心。
2:发送两次请求应该是你jsp写的有问题,你可以把代码贴上来看看
3:对于grid的crud操作,应该使用gridAPI+ajax来控制,而不是每次都重新load grid
20 楼 IvanLi 2007-01-17  
berlo 写道
刚才对dhtmlGrid进行500条数据的测试,什么呀,在一个数据窗口显示500条数据,反应极其缓慢,简直让人不能接受!!!!!!!!!!!!!

500条,每行多少列?
dhtml有4种方式来提高相应速度
1:Dynamical Loading
2:Buffering
3:Distributed Parsing
4:Split the Content of Grid into Pages
其中3,4是pro版才支持的功能。
4比较繁琐,3的话如果你好好看看std版中parseXML的部分可以自己写出来

dhtmlgrid大概每秒中能够渲染300-500个cell
这个跟客户机的配置有关,还有如果cell里如果包含了复杂的公式计算,那么渲染速度会慢些
19 楼 berlo 2007-01-17  
大家还知道有什么别的数据窗口比较好吗,功能倒不用太多,能增、删、改、动态添加数据就行呀
18 楼 berlo 2007-01-17  
刚才对dhtmlGrid进行500条数据的测试,什么呀,在一个数据窗口显示500条数据,反应极其缓慢,简直让人不能接受!!!!!!!!!!!!!
17 楼 berlo 2007-01-16  
你是服务器端处理的呀,还有个问题,你的数据是从服务器端取的数吧,服务器端是什么?jsp、php、asp?
我用的是jsp,直接loadXML(http://地址),服务器端返回xml格式的数据,现在能够正常的显示出数据来,但是我客户端取数据的请求发送了两遍,如果插入或修改操作岂不重复了,数据多对服务器端的压力也很大。这个问题你有吗?苦恼,跟踪代码也找不出来,嗨
16 楼 daoger 2007-01-16  
berlo 写道
解决了,楼上的这样做:
这行:if((_isIE)&&(!this._retry)){
变成:if(_isIE){
就ok了
呵呵


我是服务器端处理的问题,现在已经解决了!
15 楼 berlo 2007-01-16  
解决了,楼上的这样做:
这行:if((_isIE)&&(!this._retry)){
变成:if(_isIE){
就ok了
呵呵
14 楼 berlo 2007-01-16  
lz,我的问题和上面的一样,注释掉那一句也还是不行,reload时仍报错呀,急死我了,呀
13 楼 daoger 2007-01-12  
poiuyt373 写道
测试reloaddata,发现同样的xml也报错,"LoadXML Incorrect XML",跟踪了一下发现
dhtmlXCommon.js中
dtmlXMLLoaderObject.prototype.getXMLTopNode=function(tagName){
if(this.xmlDoc.responseXML){
var temp=this.xmlDoc.responseXML.getElementsByTagName(tagName);
var z=temp[0];
}else
var z=this.xmlDoc.documentElement;
if(z)
return z;

if((_isIE)&&(!this._retry)){

var xmlString=this.xmlDoc.responseText;
this._retry=true;
this.xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
this.xmlDoc.async=false;
this.xmlDoc.loadXML(xmlString);
return this.getXMLTopNode(tagName);
}

dhtmlxError.throwError("LoadXML","Incorrect XML",[this.xmlDoc])
return document.createElement("DIV");
};


必须把this._retry=true;这句注释掉才行,不清楚_retry有什么用




LZ 我在用dhtmlXGrid的时候也出现了这种问题,按照这位同学的方法仍没解决,不知你是怎么解决的?

请看一下我的问题吧!谢谢

http://www.iteye.com/topic/46367
12 楼 泡泡 2007-01-11  
lipengch 写道
你好,非常感谢你的关注.  我用的是1.0pro了, 里面没有setSerializationLevel(userData,fullXML,config,changedAttr,onlyChanged)这个功能. 不知道怎么实现.
非常好
11 楼 lipengch 2006-12-20  
你好,非常感谢你的关注.  我用的是1.0pro了, 里面没有setSerializationLevel(userData,fullXML,config,changedAttr,onlyChanged)这个功能. 不知道怎么实现.
10 楼 IvanLi 2006-12-20  
1.2版中支持表头合并,但是比较恶心的是在statnd版中支持生成表格后在调用js来合并表头,要想从xml配置,对不起,掏钱。搞得我很是郁闷,怎么办,搞它。其实也很简单,加了几句js搞定,对于生手说困难在于先要理清内部方法,我仅仅在我原来H它的_parseHeader方法中做一下手脚就搞定了。
我把我扩展的代码都传上来了,想要的自取。各位老大有什么好的扩展也通知一声,谢谢!
我改过的代码在extend_ivan文件夹下
1:支持自定义公式到任意cell(目前只是求和)
2:支持从XML里配置表头
3:支持从XML里配置表头合并。
其实我很想建议公司买一个正版的150$而已,真的算不上什么,公司给QA MM们买的什么IBM基层测试工具要20多万$,那群MM们还不是那它
做这Selenium做的事,唉,谁叫咱们是小弟呢!

相关推荐

    QTableWidget QTableView 自定义复杂表头(多行表头,表头合并) 、冻结、固定特定的行

    至于表头的合并,`QTableView`同样不直接支持,但可以通过设置相同的列标题和调整`QHeaderView`的几何形状来实现。如果要实现真正的合并,可能需要重绘表头并处理点击事件,以正确地响应用户操作。 冻结或固定特定...

    Excel导出、自定义表头、锁定首行、合并、字体、边框

    在Excel中,我们可以在“开始”选项卡的“对齐”区域找到“合并和居中”按钮,单击即可合并选中的单元格。合并后的单元格内容将占据所有合并单元格的空间,并保持居中。 设置字体和边框能显著提升表格的专业外观。...

    devexpress 自定义合并单元格和表头

    通过研究这个示例,你可以更好地理解和应用DevExpress GridControl的自定义单元格合并和表头功能。记得将此示例代码与自己的项目需求相结合,以创建符合业务逻辑的定制化数据展示方案。 总之,掌握DevExpress的...

    复杂JTable-跨列表头

    2. **GroupableTableHeader**: 这个类扩展了JTable的默认表头JTableHeader,添加了支持列合并的功能。它会维护列分组信息,并与GroupableTableHeaderUI协同工作,确保正确的显示效果。 3. **TableHeaderRenderer**:...

    GridView动态表头合并,表头合并

    这个示例可能包含一个ASP.NET Web Forms页面,以及相关的后台代码文件,通过运行和调试这个项目,你可以直观地看到动态表头合并的效果,同时也能更深入地理解背后的实现逻辑。 总之,GridView动态表头合并是一个...

    GridView动态创建列头丶自定义多行合并表头

    ### GridView动态创建列头与自定义多行合并表头 #### 一、概述 在Web开发中,`GridView` 控件被广泛应用于显示表格数据。它不仅提供了强大的数据绑定功能,还支持各种自定义设置,使得开发者能够根据具体需求灵活...

    dataGridView表头合并列

    首先,我们要明白,`DataGridView`控件本身并不直接支持表头的合并功能。但是,我们可以通过一些技巧来模拟这个效果。一种常见方法是利用自定义绘制(Custom Painting)功能,覆盖`DataGridViewHeaderCell`的默认...

    自定义QTableView的表头QHeaderView实现多行表头

    1.自定义了一个表格View(TcTableView),支持继承重载相关虚函数, 2.TcTabelView支持设置多行横向表头(默认2行), 3.可以添加多张表格,每个表格是独立的,它们都有属于自己的自定义表头。 4.表头的右键操作我是自己写...

    C# DataGrid表头合并和单元格内容合并

    本教程将详细介绍如何在C#中实现DataGrid的表头合并和单元格内容合并,以及如何创建一个具有多层表头的示例(Demo)。 首先,我们要理解表头合并的概念。在DataGrid中,表头合并允许我们将多个列的标题合并成一个大...

    Gridcontrol合并表头、合并行、冻结列

    总结起来,DevExpress GridControl提供了强大的功能来满足复杂的数据展示需求,包括表头合并、行合并和冻结列。开发者可以根据项目需求灵活运用这些特性,提升应用的用户体验。在实际操作中,理解并熟练掌握这些方法...

    wpf 动态合并datagrid表头单元格

    要实现动态合并,我们需要扩展DataGrid的默认列类型。创建一个新的类,如`MergeableDataGridColumn`,继承自`DataGridBoundColumn`或`DataGridTemplateColumn`。在这个自定义列中,我们将处理表头的合并逻辑,通过...

    GridView实现多表头合并

    GridView控件本身并不直接支持多级表头的合并,但可以通过自定义代码来实现这一功能。以下是实现步骤: 1. **数据绑定**:首先,你需要准备合适的数据源,这可以是数据库查询结果、数组、集合或其他数据结构。数据...

    DataGrid表头合并和单元格内容合并-升级版

    这个“DataGrid表头合并和单元格内容合并-升级版”主题主要聚焦于如何在DataGrid中实现复杂的表头和单元格合并功能,以适应多层结构的数据展示需求。 首先,我们要理解在DataGrid中进行表头合并的意义。通常,当...

    JTable表头合并

    而"JTable表头合并"是Swing中的一个高级特性,允许开发者创建具有复杂结构的表头,以更好地呈现和组织数据。这种功能特别适用于那些需要将相关列分组或分类的情况。 表头合并是通过`DefaultTableColumnModel`的`...

    自定义表格,表头可合并单元格,自定义列数据

    然而,对于一些更复杂的需求,比如动态改变列宽、自定义渲染、表头合并等,就需要深入理解Qt的模型视图体系,并对其进行扩展和定制。Qt的模型视图架构允许我们将数据模型(如QStandardItemModel)与视图(如...

    element-ui表格el-table动态合并单元格(合并行和列)以及给表头添加斜线

    实现功能点 1.行的合并 2.列的合并 3.给表头添加斜线 4.动态生成列

    dev_GridView多表头合并.rar

    多表头合并可以使数据更容易理解,提供更好的阅读体验。实现GridView的多表头合并主要涉及以下几个关键步骤: 1. **创建多级表头**:首先,在GridView的HeaderRow中,可以添加额外的Row来模拟多级表头。通过编程...

    支持多表头及单元格合并的StringGrid

    支持多层表头、表头斜线 单元格合并、拆分; 每个单元格可单独设置字体、颜色、对齐等格式 随意行、列锁定 指定表格背景图片,格线顔色 对每行数据提供状态管理(Modified,Inserted,Deleted,Unmodified) 动态插入、...

    DataGrid 实现复杂表头和合并行源码与示例

    五、支持自定义转换器(IValueConverter); 六、支持对象集合(ICollection)和支持动态字典集合(ICollection, object&gt;&gt;)的绑定 ; 七、对象集合使用 AddBindingPathTemplateColumn 函数,字典集合使用 ...

    extjs3合并表头 rowspan

    7. **CSS Styling**: 为了使合并后的表头看起来正常,你可能还需要调整CSS样式,例如,确保合并的表头在视觉上与其他单元格对齐,以及处理边框和背景色。 8. **Event Handling**: 考虑到交互性,可能需要监听并处理...

Global site tag (gtag.js) - Google Analytics