ext grid合并单元格

最新推荐文章于 2019-04-01 17:56:32 发布
置顶 最新推荐文章于 2019-04-01 17:56:32 发布
阅读量2.4k 收藏 2
点赞数 1
分类专栏： ext 文章标签： ext header stylesheet user null function
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/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>
春春
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ext表格合并单元格的方法
10-16
ext表格合并单元格的方法，合并表头的方法extjs的官网上有，这里提供的是合并数据单元格的方法
Extjs gridpanel 合并单元格
weixin_34008933的博客
08-22 325
1 /* 2 * *合并单元格的函数，合并表格内所有连续的具有相同值的单元格。调用方法示例： 3 * *store.on("load",function(){gridSpan(grid,"row","[FbillNumber],[FbillDate],[FAudit],[FAuditDate],[FSure],[FSureDate]","Fbill...
ExtJs表单合并单元格功能方法
BeanModel的博客
04-01 808
本方法用于表单请求回来后的回调函数中.一定要在数据请求回来后,表单生成前使用,否则不起作用 /** * 合并Grid的数据列 * @param grid {Ext.Grid.Panel} 需要合并的Grid * @param colIndexArray {Array} 需要合并列的Index(序号)数组；从0开始计数，序号也包含。 * @param i...
Ext grid合并单元格
我的博客
06-09 434
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 =...
Extjs grid 合并行
任彦章的博客
11-10 2889
在实际开发中可能会遇到grid中要合并单元格的操作，可能是合并横向单元格，也可能是合并列的单元格，网络上有很多demo，大多是用css样式去控制，但是这样的话代码就会显得很多，不容易阅读，我们看到html 类似  的代码表示 table 该列向下合并两行。那么extjs grid 基本结构也是table ，我们可尝试采用这样的方式来控制。小白也在网上找了一些方法，并加以修改整合，写出以下demo
EXT gridpanel 合并行
一笑天
07-02 5307
在实际工作中，我们需要实现如下图的效果，如下图：     那么，怎么实现呢？下面给大家做详细的讲解，首先，文件夹里的文件如下图所示，其实大家可以根据实际情况自定义文件名： 其中，page.js是放页面控件，data.js是放数据源，ColumnHeaderGroup.js很重要，是我从网上找的，最主要的就是这3个文件，其他几个文件不是很重要。  Gri
EXT里面合并单元格
蚂蚁筑巢
07-27 3330
/*  这个方法四个参数分别是  row:合并起始行  col:合并起始列.这两个参数是为了定位,要从哪个单元格开始合并.  type:是要合并行或者列.  num:是要合并的数量    //==>监听load , 执行合并单元格  grid.getStore().on('load', function () {  span(grid, 0, 0, 'row', 5);  })
Ext合并单元格
03-07
Ext 合并列表数据单元格 源代码以及效果图都在
ext 合并单元格
03-22
NULL 博文链接：https://qinya.iteye.com/blog/975344
ext grid 合并行
08-17
本人成功实现的一个合并列的例子，希望对大家有帮助
ExtJS 4.2 Grid组件单元格合并的方法
01-21
ExtJS 4.2 Grid组件本身并没有提供单元格合并功能，需要自己实现这个功能。 目录 1. 原理 2. 多列合并 3. 代码与在线演示 1. 原理 1.1 HTML代码分析 首先创建一个Grid组件，然后查看下的HTML源码。 1.1.1 Grid组件 ...
ext4合并单元格demo
06-30
ext4合并单元格完整demo，添加一行后自动合并单元格！
2024-2030全球及中国PCB接触式探头行业研究及十五五规划分析报告.docx
04-18
2024-2030全球及中国PCB接触式探头行业研究及十五五规划分析报告
网站界面设计mortal0418代码
04-18
网站界面设计mortal0418代码
PHP毕业设计-校园失物招领系统源码+数据库.zip
04-18
PHP毕业设计-校园失物招领系统源码+数据库.zip个人经导师指导并认可通过的高分毕业设计项目，主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者。也可作为课程设计、期末大作业。包含全部项目源码、该项目可以直接作为毕设使用。项目都经过严格调试，确保可以运行！ PHP毕业设计-校园失物招领系统源码+数据库.zip个人经导师指导并认可通过的高分毕业设计项目，主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者。也可作为课程设计、期末大作业。包含全部项目源码、该项目可以直接作为毕设使用。项目都经过严格调试，确保可以运行！ PHP毕业设计-校园失物招领系统源码+数据库.zip个人经导师指导并认可通过的高分毕业设计项目，主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者。也可作为课程设计、期末大作业。包含全部项目源码、该项目可以直接作为毕设使用。项目都经过严格调试，确保可以运行！ PHP毕业设计-校园失物招领系统源码+数据库.zip个人经导师指导并认可通过的高分毕业设计项目，主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者。也可
2024年神经酸行业分析报告.pptx
最新发布
04-18
2024年神经酸行业分析报告.pptx
Java爬虫信息抓取的实现 完整实例（源码）
04-18
【Java爬虫】信息抓取的实现 完整实例（源码）
ext Column cls 单元格背景色
06-06
您的问题是关于ext Column的`cls`属性来设置单元格背景色的吗？如果是，我可以为您提供一些帮助。 在ext Column中，`cls`属性用来为单元格添加一个CSS类名，可以通过该CSS类名来对单元格进行样式设置。如果您想要...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值