ext grid合并单元格

最新推荐文章于 2017-11-10 15:22:40 发布
置顶 最新推荐文章于 2017-11-10 15:22:40 发布
阅读量2.5k 收藏 2
点赞数 1
分类专栏： ext 文章标签： ext header stylesheet user null function
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/spring1986/article/details/7448349
版权 
/*rowspan grid合并行效果*/
.rowspan-grid .x-grid3-body .x-grid3-row {
    border:none;
    cursor:default;
    width:100%;
}
.rowspan-grid .x-grid3-header .x-grid3-cell{
    /*border-left: 2px solid transparent;*//*ie6的transparent下显示黑色?*/
    border-left: 2px solid #fff;
}
.rowspan-grid .x-grid3-body .x-grid3-row{
    overflow: hidden;
    border-right: 1px solid #ccc;
}
.rowspan-grid .x-grid3-body .x-grid3-cell {
    border: 1px solid #ccc;
    border-top:none;
    border-right:none;
}
.rowspan-grid .x-grid3-body .x-grid3-cell-first {
    /*border-left: 1px solid transparent;*/
    border-left: 1px solid #fff;
}
.rowspan-grid .x-grid3-body .rowspan-unborder {
    /*border-bottom:1px solid transparent;*/
    border-bottom:1px solid #fff;
}
.rowspan-grid .x-grid3-body .rowspan {
    border-bottom: 1px solid #ccc;
}


Ext.ns("Ext.ux.grid");
/**
 * 实现grid的rowspan效果
 *
 *  1.在列模型里需要配置合并行的列中设置rowspan属性，如：{dataIndex:'xxx', header:'xxx', rowspan:3} //该列每三行合并一行
 *  2.为grid设置view属性 => view : new ExtBuilder.grid.RowspanView()
 *  3.为grid设置cls属性 => cls : 'rowspan-grid'
 *  4.加入css样式
 */
Ext.ux.grid.RowspanView = Ext.extend(Ext.grid.GridView, {
    constructor: function(conf) {
        Ext.ux.grid.RowspanView.superclass.constructor.call(this, conf);
    },
    // private
    //清除合并的行中，非第一行的数据
    cleanRenderer : function(column, value, metaData, record, rowIndex, colIndex, store) {
        var rowspan = column.rowspan;
        if(!Ext.isEmpty(rowspan) && rowspan.length !== 0){
        	//var arrLast = new Array;
        	var recordFront = rowIndex === 0 ? null : store.getAt(rowIndex-1);
        	//var recordLast = rowIndex === store.getCount() ? null : store.getAt(rowIndex+1);
        	var isFront = false;
        	//var isLast = false;
        	for(var i = 0;i < rowspan.length; i++){
        		var key = rowspan[i];
        		if(recordFront != null && record.get(key) === recordFront.get(key)){
        			isFront = true;
        		}else{
        			isFront = false;
        		}
        	}
            if(isFront){
                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 i = 0, len = cmConfig.length; i < len; i++){
        //    rowspans.push(Math.max((cmConfig[i].rowspan || 0), 0));
        //}

        for(var j = 0, len = rs.length; j < len; j++){
            r = rs[j]; cb = [];
            var rowIndex = (j+startRow);
            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);
                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';
                }
                //----------------------------------------------------------------------------
                //alert(this.cm.config[0].rowspan);
                //添加rowspan类，用样式实现合并行的效果
                var rowspan = cmConfig[i].rowspan;
                var record = r;
        				var recordFront = rowIndex === 0 ? null : ds.getAt(rowIndex-1);
        				var recordLast = rowIndex === ds.getCount() ? null : ds.getAt(rowIndex+1);
        				var isFront = false;
        				var isLast = false;
		        		 if(!Ext.isEmpty(rowspan) && rowspan.length !== 0){
			        		for(var k = 0;k < rowspan.length; k++){
			        			var key = rowspan[k];
			        			if(recordFront != null && record.get(key) === recordFront.get(key)){
			        				isFront = true;
			        			}else{
			        				isFront = false;
			        			}
			        			if(recordLast != null && record.get(key) === recordLast.get(key)){
			        				isLast = true;
			        			}else{
			        				isLast = false;
			        			}
			        		}
			        		if(!isLast　){
		        			 	p.css += ' rowspan';
		        			}else{
		        				p.css += ' rowspan-unborder';
		        			}
		        			
		        		}
        		
                /**
                if(rowspans[i] !== 0){
                    //每rowspan行以及最后一行加上rowspan类，即加上border-bottom
                    if(j == (len-1) || (rowIndex+1) % rowspans[i] === 0){
                        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("");
    }
});

<html>
<head>
    <title>Rowspan (行合并)</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
    <!-- GC -->
   <!-- LIBS -->
   <script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
   <!-- ENDLIBS -->
    <script type="text/javascript" src="../../ext-all.js"></script>
    <link rel="stylesheet" type="text/css" href="rowspan.css"/>
    <script type="text/javascript" src="RowspanView.js"></script>
    <script type="text/javascript">
    <!--
        Ext.onReady(function() {
         var myData = [
                ['供电所1',6090,'大工业用电户数',15,'公用线',5,100,100,'公用变',57,100,100],
                ['供电所1',6090,'非普工业用电户数',15,'公用线',5,100,100,'公用变',57,100,100],
                ['供电所1',6090,'商业用电户数',15,'公用线',5,100,100,'公用变',57,100,100],
                ['供电所1',6090,'住宅用电户数',15,'公用线',5,100,100,'公用变',57,100,100],
                ['供电所1',6090,'售户数',15,'公用线',5,100,100,'公用变',57,100,100],
                
                ['供电所1',6090,'城区用户数',0,'专用线',0,100,100,'专用变',51,100,100],
                ['供电所1',6090,'非城区用户数',0,'专用线',0,100,100,'专用变',51,100,100],
                ['供电所1',6090,'低压用户数',41,'专用线',0,100,100,'专用变',51,100,100],
                ['供电所1',6090,'未完成一户一表改造户数',0,'专用线',0,100,100,'专用变',51,100,100],
                
                ['供电所2',6090,'大工业用电户数',15,'公用线',5,100,100,'公用变',57,100,100],
                ['供电所2',6090,'非普工业用电户数',15,'公用线',5,100,100,'公用变',57,100,100],
                ['供电所2',6090,'商业用电户数',15,'公用线',5,100,100,'公用变',57,100,100],
                ['供电所2',6090,'住宅用电户数',15,'公用线',5,100,100,'公用变',57,100,100],
                ['供电所2',6090,'售户数',15,'公用线',5,100,100,'公用变',57,100,100],
                
                ['供电所2',6090,'城区用户数',0,'专用线',0,100,100,'专用变',51,100,100],
                ['供电所2',6090,'非城区用户数',0,'专用线',0,100,100,'专用变',51,100,100],
                ['供电所2',6090,'低压用户数',41,'专用线',0,100,100,'专用变',51,100,100],
                ['供电所2',6090,'未完成一户一表改造户数',0,'专用线',0,100,100,'专用变',51,100,100]
               ];
               // create the data store
            var store = new Ext.data.ArrayStore({
                fields: [
                   {name: 'pass_name'},
                   {name: 'user_num'},
                   {name: 'user_name' },
                   {name: 'user_count'},
                   {name: 'dedicated_line' },
                   {name: 'dedicated_num'},
                   {name: 'colnum7'},
                   {name: 'colnum8'},
                   {name: 'colnum9'},
                   {name: 'colnum10'},
                   {name: 'colnum11'},
                   {name: 'colnum12'}
                ]
            });
            // manually load local data
            store.loadData(myData);
            // create the Grid
            var grid = new Ext.grid.EditorGridPanel({
                region:'center',
                store: store,
                columns: [
                  {id:'pass_name', header: 'pass_name', width: 75,dataIndex: 'pass_name', rowspan: ['pass_name']},
                    {header: 'user_num', width: 75,dataIndex: 'user_num', rowspan: ['pass_name'], editor : new Ext.form.NumberField()},
                    {header: 'user_name', width: 75,dataIndex: 'user_name'},
                    {header: 'user_count', width: 75,dataIndex: 'user_count', editor : new Ext.form.NumberField()},
                    {header: 'dedicated_line', width: 75,dataIndex: 'dedicated_line', rowspan: ['dedicated_line']},
                    {header: 'dedicated_num', width: 75,dataIndex: 'dedicated_num', rowspan: ['dedicated_line'], editor : new Ext.form.NumberField()},
                    {header: 'colnum7', width: 75,dataIndex: 'colnum7', rowspan: ['pass_name'], editor : new Ext.form.NumberField()},
                    {header: 'colnum8', width: 75,dataIndex: 'colnum8', rowspan: ['pass_name'], editor : new Ext.form.NumberField()},
                    {header: 'colnum9', width: 75,dataIndex: 'colnum9', rowspan: ['colnum9']},
                    {header: 'colnum10', width: 75,dataIndex: 'colnum10', rowspan: ['colnum9'], editor : new Ext.form.NumberField()},
                    {header: 'colnum11', width: 75,dataIndex: 'colnum11', rowspan: ['pass_name'], editor : new Ext.form.NumberField()},
                    {header: 'colnum12', width: 75,dataIndex: 'colnum12', rowspan: ['pass_name'], editor : new Ext.form.NumberField()}
                ],
                stripeRows: true,
                autoExpandColumn: 'pass_name',
                title: 'Array Grid',
                // config options for stateful behavior
                stateful: true,
                stateId: 'grid',
                cls: 'rowspan-grid',//******必须配置此样式
                view: new Ext.ux.grid.RowspanView() //****使用view
            });
            var win = new Ext.Window({
                title:"行合并 demo",
                width:600,
                height:400,
                resizable:false,
                layout:'border',
                items:grid
            });
            win.show();
        });
    //-->
    </script>
</head>
<body>
</body>
</html>
Ext grid合并单元格
06-23
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=[]; for(var i = 0, len = cm.getColumnCount(); i < len; i++){ p.id = cm.getColumnId(i); p.value = cm.getColumnHeader(i) || ""; p true);
Ext合并单元格
03-07
Ext 合并列表数据单元格 源代码以及效果图都在
extjs grid合并单元格
weixin_30613727的博客
09-05 164
http://blog.youkuaiyun.com/kunoy/article/details/7829395 /** * Kunoy * 合并单元格 * @param {} grid 要合并单元格的grid对象 * @param {} cols 要合并哪几列 [1,2,4] */ var mergeCells = function(grid,cols...
采用新的方法解决extjs4.1 grid合并单元格问题
热门推荐
江下飞雪
08-04 2万+
首先技术原理基于狂人论坛的大大yunfengcheng发的帖子《100行代码解决ExtJs4.1合并单元格问题》，表示感谢。 如果需要他的代码各位可自行下载，在此不方便贴出（人家可卖30个金钱的呢，虽然有点小贵，呵呵）。 好了，进入正题吧。首先使用他的代码后效果如下： 从这幅图可以看出，该合并的都合并了，不该合并的也合并了，第三列“A单元”，属于不同的地块，不同栋数，常理是不应该合并的，
ext 合并单元格
03-22
NULL 博文链接：https://qinya.iteye.com/blog/975344
Ext Grid合并单元格实现方法
"该资源主要涉及Ext JS中的Grid组件，特别是如何实现格子视图（GridView）中的列头单元格合并功能。通过自定义GridView类并扩展Ext.grid.GridView，然后在`renderHeaders`方法中处理列头的渲染，实现合并效果。" 在...
ExtJS 4.2 Grid组件单元格合并的方法
01-21
ExtJS 4.2 Grid组件本身并没有提供单元格合并功能，需要自己实现这个功能。 目录 1. 原理 2. 多列合并 3. 代码与在线演示 1. 原理 1.1 HTML代码分析 首先创建一个Grid组件，然后查看下的HTML源码。 1.1.1 Grid组件 ...
ext表格合并单元格的方法
10-16
### ext表格合并单元格的方法 #### 背景与概述 在进行Web开发时，特别是在使用Ext JS框架处理表格数据展示的过程中，经常会遇到需要合并单元格的情况。这不仅可以提升数据展示的美观性，还能增强数据的可读性和...
ext grid 合并行
08-17
"ext grid 合并行"就是关于如何在EXT Grid中实现行合并的技术点。 EXT Grid的行合并功能并不像列合并那样内置在默认配置中，因此需要通过一些额外的技巧来实现。以下是一个详细的步骤和知识点解析： 1. **理解EXT ...
Ext grid合并行单元格
渡江人博客
02-14 513
 由于Ext grid目前不支持单元格的合并，但在项目中需要合并单元格显示，因此在显示样式上做了一些修改。 效果如图，根据单元格相同值合并行，同行单元格值为空时向前合并。   源代码 见附件（现在好像压缩文件上传不成功，稍后再上传。）  ...
Ext单元格合并
02-22 275
Ext虽可以去除相同的单元格,但右侧数据左移导致grid错乱,有待解决。。。 /** *Kunoy *合并单元格 *@param{}grid要合并单元格的grid对象 *@param{}cols要合并哪几列[1,2,4] */ varmerg...
EXT里面合并单元格
蚂蚁筑巢
07-27 3400
/*  这个方法四个参数分别是  row:合并起始行  col:合并起始列.这两个参数是为了定位,要从哪个单元格开始合并.  type:是要合并行或者列.  num:是要合并的数量    //==>监听load , 执行合并单元格  grid.getStore().on('load', function () {  span(grid, 0, 0, 'row', 5);  })
Extjs grid 合并单元格
zyzlywq的专栏
01-18 7714
/* 这个方法四个参数分别是 row:合并起始行 col:合并起始列.这两个参数是为了定位,要从哪个单元格开始合并. type:是要合并行或者列. num:是要合并的数量 //==>监听load , 执行合并单元格 grid.getStore().on('load', function () { span(grid, 0, 0, 'row', 5); }); */ var span = func
ext gridView 合并单元格
ly0309的专栏
10-21 1115
/**   * Kunoy   * 合并单元格   * @param {} grid  要合并单元格的grid对象   * @param {} cols  要合并哪几列 [1,2,4]   */   var mergeCells = function(grid,cols){          var arrayTr=document.getElementById(grid.getI
ext合并单元格的方法
hifebruary的专栏
06-12 4067
<br />//合并表头的方法extjs的官网上有，这里提供的是合并数据单元格的方法<br /> <br />//首先在页面上添加以下内容<br /><style> <br /> /*与表头对齐*/<br />  .x-grid3-row td, .x-grid3-summary-row td{<br />        padding-right: 0px;<br />        padding-left: 0px;<br />        padding-top: 0px;<br />      
ExtJs grid合并单元格
weixin_34319640的博客
04-29 215
extjs中，如果要输出一些有合并单元格的表格，要怎么做呢？如图所示：从网上找了个例子，其主要思想是表格的store装载完毕后，随即对这个grid的td进行一个个的控制，用的方法也是原始的javascript方法。我针对目前在做的项目，做了一些修改。//grid的store var gridStore = new Ext.data.Store({ autoDestroy: true, ...
Extjs grid 合并行
任彦章的博客
11-10 3100
在实际开发中可能会遇到grid中要合并单元格的操作，可能是合并横向单元格，也可能是合并列的单元格，网络上有很多demo，大多是用css样式去控制，但是这样的话代码就会显得很多，不容易阅读，我们看到html 类似  的代码表示 table 该列向下合并两行。那么extjs grid 基本结构也是table ，我们可尝试采用这样的方式来控制。小白也在网上找了一些方法，并加以修改整合，写出以下demo
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值