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

关键字: JavaScript   javascript    

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;    <script>render_code();</script> 这是扩展的骨架，要实现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====*/   <script>render_code();</script> 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*/   <script>render_code();</script> 有关dhtmlGrid可以自己到http://www.scbr.com/docs/products/dhtmlxGrid/index.shtml下载