扩展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 
 
3：修改grid部分 
 
 
 
/*add by Ivan Li 2006-10-20 begin*/
	this.calcFormulas = function()
	{
		for(i = 0; i 
 
有关dhtmlGrid可以自己到 http://www.scbr.com/docs/products/dhtmlxGrid/index.shtml下载 
 
 
  
 
   
dhtmlxGrid1.2.rar (394.3 KB)
 
   
下载次数: 1038