请教个问题。我用下面的代码实现了合并行的效果(第一列当中值相同的行合并显示) 效果是出来的。但是有个问题,就是一旦点击后面的编辑组件之后,隐藏了的那个值又出来了。不知道什么原因
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 = " ";
}
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("");
}
});
分享到:
相关推荐
NULL 博文链接:https://zdk8105.iteye.com/blog/2232570
100行代码解决ExtJs4.1合并单元格问题
ExtJs 4.0 Grid 单元格合并控件封装
extjs单元格合并,gridpanel中多行合并
ext表格合并单元格的方法,合并表头的方法extjs的官网上有,这里提供的是合并数据单元格的方法
ExtJS 4.2 Grid组件本身并没有提供单元格合并功能,需要自己实现这个功能。 目录 1. 原理 2. 多列合并 3. 代码与在线演示 1. 原理 1.1 HTML代码分析 首先创建一个Grid组件,然后查看下的HTML源码。 1.1.1 Grid组件 ...
实现grid单元格重复数据的合并,完整的案例实现,包含合并方法和调用过程
1.js代码 MyGridView=Ext.extend(Ext.grid.GridView,{ renderHeaders : function(){ var cm = this.cm, ts = this.templates; var ct = ts.hcell,ct2=ts.mhcell; var cb = [], sb = [], p = {},mcb=[];...
NULL 博文链接:https://tipx.iteye.com/blog/718279
附件包含 控件及调用例子,看看理解即可,无法直接运行
ExtJS Grid 合并单元格使用的ExtJS版本为4.2.1.883主要配置viewConfig: { mergeColumns: 'cat1>cat2|cat2_desc' // 先按cat1合并,再按cat2合并,cat2_desc按cat2合并}
6.5.3. 呼呼,TableLayout就是合并行,合并列 7. 低鸣吧!拖拽就像呼吸一样容易。 7.1. 如此拖拽,简直就像与生俱来的本能一样。 7.2. 第一!乱拖。 7.3. 第二!代理proxy和目标target 7.4. yui自远方来,不亦乐乎 ...