dhtmlGrid  是一个功能比较齐全的  html Grid  控件，在其  profesonal  版中生成支持公式编辑到cell级别，我只想动态求任意列的和，又不想花钱，就自己扩展了一下  dhtmlgrid，使其支持在任意  cell  上添加求和公式，同时如果没个  cell  的值发生了改变，那么关联的公式项会自动变化，跟  excel  有点像了，当然他的功能远不及  excel  强大。

1：扩展  eXcell

eXcell  是  dhmtlGrid  所有的  cell  的基类，所有的  cell  都是扩展自  eXcell,dhtml  中自带的类型有  readOnly(eXcell_ro),editable(eXcell_ed)图片,link，等等可以自己看它的  doc  有介绍，我扩展的类就叫  eXcell_formulas

2:扩展  eXcell  步骤：

代码

1.      function eXcell_formulas(cell){   

2.              try{   

3.                  this.cell = cell;   

4.                  this.grid = this.cell.parentNode.grid;   

5.              }catch(er){}   

6.              /**  

7.              *   @desc: method called by grid to start editing  

8.              */  

9.              this.edit = function(){   

10.                         

11.              }   

12.          /**  

13.          *   @desc: get real value of the cell  

14.          */  

15.          this.getValue = function(){   

16.                  return "";   

17.              }   

18.          /**  

19.          *   @desc: set formated value to the cell  

20.          */  

21.          this.setValue = function(val){   

22.                  if(val.toString().trim()=="")   

23.                      val = " ";   

24.                  this.cell.innerHTML = val;   

25.              }   

26.          /**  

27.          *   @desc: this method called by grid to close editor  

28.          */  

29.          this.detach = function(){   

30.                  this.setValue(this.obj.value);   

31.                  return this.val!=this.getValue();   

32.              }   

33.  }   

34.  eXcell_formulas.prototype = new eXcell;   

这是扩展的骨架，要实现  setValue,getValue,edit,detach  四个方法，也可以继承已有的类
看看我的代码吧

代码

1.      /*==== add by ivan li math begin====*/  

2.      function eXcell_formulas(cell)   

3.      {   

4.          try  

5.          {   

6.              this.cell = cell;   

7.              //指向  grid  控件   

8.              this.grid = this.cell.parentNode.grid;   

9.                 

10.      }catch(er){}   

11.  }   

12.  //再这里我扩展自eXcell_ed   

13.  eXcell_formulas.prototype = new eXcell_ed;   

14.  //这个方法接受外界传来的  cell  的值，在这里是公式的值，   

15.  //当让，在这里  cell  是可以编辑的，如果输入的是公式那么要以=号开头   

16.  eXcell_formulas.prototype.setValue = function(val)   

17.  {   

18.      if((typeof(val)!="number")&& val.toString()._dhx_trim()=="")   

19.      {   

20.          val=" "  

21.          this.cell._clearCell=true;   

22.      }   

23.         

24.      if(val.toString()._dhx_trim().indexOf('=') != -1)   

25.      {   

26.          //以=号开头，说明是公式，那么存下来公式   

27.          this.cell._val = val.toString()._dhx_trim();   

28.          this.cell.innerHTML="formulas";   

29.             

30.      }   

31.      else  

32.      {   

33.          //如果不是以=号开头那么仍然保留原来的公式   

34.          this.cell.innerHTML=val.toString()._dhx_trim();   

35.      }   

36.      //add cell observer   

37.      //prototype.addCellObserver()   

38.      //计划在此处把用  observer  模式存下  targetCell ->this,但是现在没成功，   

39.          //主要式在  callBack  时不能调用存下的  this.calcVale  方法   

40.  }   

41.  //就算公式的值并显示   

42.  eXcell_formulas.prototype.calcValue = function()   

43.  {   

44.      var innerFormulas;   

45.      //如果没有存公式那么就不用计算了   

46.      if(!this.cell._val)   

47.      {   

48.          return;   

49.      }   

50.      else  

51.      {   

52.          innerFormulas = this.cell._val.substr(1);   

53.      }   

54.      var cellAr = innerFormulas.split(',');   

55.         

56.      var formulasResult = 0;   

57.      for(icell=0; icell<cellAr.length;icell++)   

58.      {   

59.             

60.          cellChild = cellAr[icell].split('^');   

61.          //得到  targetCell  对象   

62.          var ex = this.grid.cells(cellChild[0],cellChild[1]);   

63.          //目前只实现了加法，对于公式的解析还有待实现   

64.          formulasResult= Number(formulasResult)+Number(ex.getValue());   

65.      }   

66.      this.cell.innerHTML = formulasResult;   

67.      //如果有公式，那么把  cell  的颜色设置成黄色，以做提示   

68.      this.setBgColor("yellow");   

69.  }   

70.  //此处添加  CellObserver   

71.  eXcell_formulas.prototype.addCellObserver = function()   

72.  {   

73.      var cellAr = this.cell._val.split(',');   

74.      for(i = 0; i< cellAr.length; i++)   

75.      {   

76.          //if already has observer on the cell   

77.          if(this.grid.formulasObserver.hasKey(cellAr[i]))   

78.          {   

79.              formulasCellAr = this.grid.formulasObserver.getValue(cellAr[i]);   

80.              var hasRegistered = false;   

81.                 

82.              for(j = 0; j<formulasCellAr.length;j++)   

83.              {   

84.                  if(this._val == formulasCellAr[j]._val)   

85.                  {   

86.                      hasRegistered = true;   

87.                      break;   

88.                  }   

89.              }   

90.              //if has not registered then add this formulascell in   

91.              if(!hasRegistered)   

92.              {   

93.                  formulasCellAr.push(this);   

94.              }   

95.          }   

96.          //if no observer on the cell then add a new one   

97.          else  

98.          {   

99.              var cellObservers = new Array();   

100.              cellObservers.push(this);   

101.                 

102.              this.grid.formulasObserver.add(cellAr[i], cellObservers);   

103.          }   

104.      }   

105.  }   

106.    

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

3：修改  grid  部分

代码

1.      /*add by Ivan Li 2006-10-20 begin*/  

2.          this.calcFormulas = function()   

3.          {   

4.              for(i = 0; i<this.getColumnCount();i++)   

5.              {   

6.                  if("formulas" == this.getColType(i))   

7.                  {   

8.                      this._calcFormulasCol(i)   

9.                  }   

10.          }   

11.      };   

12.      this._calcFormulasCol = function(colIdx)   

13.      {   

14.          for(j = 0; j < this.getRowsNum(); j++)   

15.          {   

16.              this.cells2(j, colIdx).calcValue();   

17.          }   

18.      };   

19.      this.notifyCellChange = function(rowId,cellInd)   

20.      {   

21.             

22.          formulasCells = this.formulasObserver.getValue(rowId+"^"+cellInd);   

23.             

24.          for(i = 0; i<formulasCells.length; i++)   

25.          {   

26.                 

27.              //formulasCells[i] is eXcell_formulas type   

28.              formulasCells[i].calcValue();   

29.          }   

30.      };   

31.      /*add by Ivan Li 2006-10-20 end*/