日期:2014-05-16  浏览次数:20498 次

extjs合并单元格
请教个问题。我用下面的代码实现了合并行的效果(第一列当中值相同的行合并显示) 效果是出来的。但是有个问题,就是一旦点击后面的编辑组件之后,隐藏了的那个值又出来了。不知道什么原因
Ext.ux.grid.RowspanView = Ext.extend(Ext.grid.GridView, {
  constructor: function(conf) {
  Ext.ux.grid.RowspanView.superclass.constructor.call(this, conf);
  },
  //清除合并的行中,非第一行的数据
  cleanRenderer : function(column, value, metaData, record, rowIndex, colIndex, store,rowSpanTem,n) {
  var rowspan = rowSpanTem;
  if(!Ext.isEmpty(rowspan) && rowspan !== 0 && n!=0 ){
  return '';
  }
  return column.renderer(value, metaData, record, rowIndex, colIndex, store);
  },
  // private
  doRender : function(cs, rs, ds, startRow, colCount, stripe){
  var ts = this.templates, ct = ts.cell, rt = ts.row, last = colCount-1;
  var tstyle = 'width:'+this.getTotalWidth()+';';
  // buffers
  var buf = [], cb, c, p = {}, rp = {tstyle: tstyle}, r;
  //cmConfig列模型
  var cmConfig = this.cm.config, rowspans=[];
   
  for(var j = 0, len = rs.length; j < len; j++){
// rowspans.clear();
  var rowSpanTemp1=1; 
  var strTemp1=rs[j].data.BillOfLadingID;
  for(var l=j+1;l<rs.length;l++){
  var strCom1=rs[l].data.BillOfLadingID;
  if(strTemp1==strCom1)
  {
  rowSpanTemp1=rowSpanTemp1+1;
  }
  else
  {
  break;
  }
  }
  for(var m = 0; m< cmConfig.length; m++){
  if( m==0)
  {
  if(rowSpanTemp1>1)
  {
  rowspans.push(rowSpanTemp1);
  }else
  {
  rowspans.push(0);
  }
   
  }
  else
  {
  rowspans.push(0);
  }
   
  }
  for(var n=0;n<rowSpanTemp1;n++)
  {
  j=j+(n==0?0:1);
  var rowIndex = (j+startRow);
  r = rs[j]; cb = [];
  for(var i = 0; i < colCount; i++){
  c = cs[i];
  p.id = c.id;
  p.css = i === 0 ? 'x-grid3-cell-first ' : (i == last ? 'x-grid3-cell-last ' : '');
  p.attr = p.cellAttr = "";

  p.value = this.cleanRenderer(cmConfig[i], r.data[c.name], p, r, rowIndex, i, ds,rowspans[i],n);
  p.style = c.style;
  if(Ext.isEmpty(p.value)){
  p.value = "&#160;";
  }

  if(this.markDirty && r.dirty && typeof r.modified[c.name] !== 'undefined'){
  p.css += ' x-grid3-dirty-cell';
  }
  //------------------------------------------------
  //添加rowspan类,用样式实现合并行的效果
  if(rowspans[i] !== 0){
  //每rowspan行以及最后一行加上rowspan类,即加上border-bottom
  if(i==0)
  {
  if(n==rowSpanTemp1-1)
  {
  p.css += ' rowspan';  
  }else
  {
  p.css += ' rowspan-unborder';
  }
  }
  }
  //------------------------------------------------
  cb[cb.length] = ct.apply(p);
  var alt = [];
  if(stripe && ((rowIndex+1) % 2 === 0)){
  alt[0] = "x-grid3-row-alt";
  }
  if(r.dirty){
  alt[1] = " x-grid3-dirty-row";
  }
  rp.cols = colCount;
  if(this.getRowClass){
  alt[2] = this.getRowClass(r, rowIndex, rp, ds);
  }
  rp.alt = alt.join(" ");
  rp.cells = cb.join("");
  buf[buf.length] = rt.apply(rp);
  }
  }
  return buf.join("");
  }
});