Extjs grid实现多行合并(rowspan)效果3.4.0

最新推荐文章于 2024-03-07 08:00:00 发布
最新推荐文章于 2024-03-07 08:00:00 发布
阅读量9.7k 收藏 4
点赞数
分类专栏： JavaScript 文章标签： extjs jsp
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/luo_deng/article/details/10376465
版权 
<%@ page language="java" pageEncoding="UTF-8"%>
  <head>
    <title>衡量指标回顾条形图</title>   
    <link rel="stylesheet" type="text/css" href="../js/extjs/resources/css/ext-all.css"/>
	<script type="text/javascript" src="../js/extjs/adapter/ext/ext-base.js"></script>
	<script type="text/javascript" src="../js/extjs/ext-all.js"></script>
	<script type="text/javascript" src="../js/extjs/src/locale/ext-lang-zh_CN.js"></script>	
  </head>
<style>
    .spanScore {display:block;text-align:center;}
        .x-grid3-row td, .x-grid3-summary-row td{
            padding-right: 0px;
            padding-left: 0px;
            padding-top: 0px;
            padding-bottom: 0px;
        }
        .x-grid3-row {
            border-right-width: 0px;
            border-left-width: 0px;
            border-top-width: 0px;
            border-bottom-width: 0px;
        }
        .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 #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 #fff;
        }
        .rowspan-grid .x-grid3-body .rowspan-unborder {
           
            border-bottoRowspanView.js
        .rowspan-grid .x-grid3-body .rowspan {
            border-bottom: 1px solid #ccc;
        }
</style>
<script type="text/javascript">
Ext.onReady(function(){ 

Ext.QuickTips.init();
var cm = new Ext.grid.ColumnModel([new Ext.grid.RowNumberer(), 
	                 		
	{  
		header:"维度",
		dataIndex:'wd'		
	},
	{
		header:'战略主题',
		dataIndex:'topic'		
	},{ 
		header:"战略目标",
		dataIndex:'target'		
		
	},
	{
		header:'衡量指标',
		dataIndex:'measure'
		
	},
	{
		header:'行动方案',
		dataIndex:'plan'		
	}
]);
//数据源定义
var store = new Ext.data.Store({
	proxy : new Ext.data.HttpProxy({url : 'date.jsp'}),//查看地址，获取JSON地址信息
	reader : new Ext.data.JsonReader({							
		totalProperty : 'totalProperty',//总页数
		root : 'root'//数据 
		},[{name:'wd'},{name:'topic'},{name:'target'},{name:'measure'},{name:'plan'}]
	)
});
/*
**合并单元格的函数，合并表格内所有连续的具有相同值的单元格。调用方法示例：
**store.on("load",function(){gridSpan(grid,"row","[FbillNumber],[FbillDate],[FAudit],[FAuditDate],[FSure],[FSureDate]","FbillNumber");});
**参数：grid-需要合并的表格,rowOrCol-合并行还是列,cols-需要合并的列（行合并的时候有效）,sepCols以哪个列为分割(即此字段不合并的2行，其他字段也不许合并)，默认为空
*/
function gridSpan(grid, rowOrCol, cols, sepCol){
    var array1 = new Array();
    var arraySep = new Array();
    var count1 = 0;
    var count2 = 0;
    var index1 = 0;
    var index2 = 0;
    var aRow = undefined;
    var preValue = undefined;
    var firstSameCell = 0;
    var allRecs = grid.getStore().getRange();
    if(rowOrCol == "row"){
        count1 = grid.getColumnModel().getColumnCount();
        count2 = grid.getStore().getCount();
    } else {
        count1 = grid.getStore().getCount();
        count2 = grid.getColumnModel().getColumnCount();
    }
    for(i = 0; i < count1; i++){
        if(rowOrCol == "row"){
            var curColName = grid.getColumnModel().getDataIndex(i);
            var curCol = "[" + curColName + "]";
            if(cols.indexOf(curCol) < 0)
            continue;
        }
        preValue = undefined;
        firstSameCell = 0;
        array1[i] = new Array();
        for(j = 0; j < count2; j++){
            if(rowOrCol == "row"){
                index1 = j;
                index2 = i;
            } else {
                index1 = i;
                index2 = j;
            }
            var colName = grid.getColumnModel().getDataIndex(index2);
            if(sepCol && colName == sepCol)
            arraySep[index1] = allRecs[index1].get(sepCol);
            var seqOldValue = seqCurValue = "1";
            if(sepCol && index1 > 0){
                seqOldValue = arraySep[index1 - 1];
                seqCurValue = arraySep[index1];
            }
             
            if(allRecs[index1].get(colName) == preValue && (colName == sepCol || seqOldValue == seqCurValue)){
//                 alert(colName + "======" + seqOldValue + "======" + seqCurValue);
                 allRecs[index1].set(colName, "");
                 array1[i].push(j);
                 if(j == count2 - 1){
                     var index = firstSameCell + Math.round((j + 1 - firstSameCell) / 2 - 1);
                     if(rowOrCol == "row"){
                         allRecs[index].set(colName, preValue);
                       } else {
                           allRecs[index1].set(grid.getColumnModel().getColumnId(index), preValue);
                       }
                   }
               } else {
                   if(j != 0){
                       var index = firstSameCell + Math.round((j + 1 - firstSameCell) / 2 - 1);
                       if(rowOrCol == "row"){
                           allRecs[index].set(colName, preValue);
                       } else {
                           allRecs[index1].set(grid.getColumnModel().getColumnId(index), preValue);
                    }
                   }
               firstSameCell = j;
               preValue = allRecs[index1].get(colName);
               allRecs[index1].set(colName, "");
               if(j == count2 - 1){
                   allRecs[index1].set(colName, preValue);
               }
           }
        }
    }
    grid.getStore().commitChanges();
    //添加所有分隔线
    var rCount = grid.getStore().getCount();
    for(i = 0; i < rCount; i ++){
        for(j = 0; j < grid.getColumnModel().getColumnCount(); j ++){
               aRow = grid.getView().getCell(i,j);
             if(i == 0){
                 aRow.style.borderTop = "none";
                 aRow.style.borderLeft = "1px solid #ccc";
             }else if(i == rCount - 1){
                 aRow.style.borderTop = "1px solid #ccc";
                 aRow.style.borderLeft = "1px solid #ccc";
                aRow.style.borderBottom = "1px solid #ccc";
             }else{
                 aRow.style.borderTop = "1px solid #ccc";
                 aRow.style.borderLeft = "1px solid #ccc";
             }
             if(j == grid.getColumnModel().getColumnCount()-1)
                 aRow.style.borderRight = "1px solid #ccc";
            if(i == rCount-1)     
             aRow.style.borderBottom = "1px solid #ccc";
           }
       }
       //去除合并的单元格的分隔线
       for(i = 0; i < array1.length; i++){
           if(!Ext.isEmpty(array1[i])){
               for(j = 0; j < array1[i].length; j++){
                   if(rowOrCol == "row"){
                       aRow = grid.getView().getCell(array1[i][j],i);
                       aRow.style.borderTop = "none";
                   } else {
                       aRow = grid.getView().getCell(i, array1[i][j]);
                       aRow.style.borderLeft = "none";
                   }
               }
           }
       }
}
store.load();
var grid = new Ext.grid.GridPanel({
	cm : cm,		
	store :store,
	autoExpandColumn:'pipeInfoName',
	border:false,
	//stripeRows : true,//斑马线效果
	loadMask:true,
	height:450,	
	viewConfig: {forceFit:true},
	enableColumnHide : false,
    enableColumnMove : false,
    enableColumnResize : false
   	
});
store.on("load",function(){gridSpan(grid,"row","[wd],[topic],[target],[measure],[plan]");});

var view = new Ext.Viewport({
	id:'view',
	layout:'fit',		
	items:grid
});

});


</script>


{"root":[{"topic":"T1 增长战略","plan":" ","measure":"F1.1 实收金额（K）","target":"F1 实现有效益发展","wd":"财务维度"},{"topic":"T1 增长战略","plan":"K1 推进收益管理","measure":"F1.2 利润总额（K）","target":"F1 实现有效益发展","wd":"财务维度"},{"topic":"T1 增长战略","plan":" ","measure":"F2.1 创利额","target":"F2 持续提高单店营业额与利润","wd":"财务维度"},{"topic":"T1 增长战略","plan":"K2 减亏计划","measure":"F2.2 减亏额（K）","target":"F2 持续提高单店营业额与利润","wd":"财务维度"},{"topic":"T2 生产力战略","plan":" ","measure":"F3.1 存货周转天数","target":"F3 提高资源利用率","wd":"财务维度"},{"topic":"T2 生产力战略","plan":" ","measure":"F3.2 单位人工成本创利额（K）","target":"F3 提高资源利用率","wd":"财务维度"},{"topic":"T2 生产力战略","plan":" ","measure":"F4.1 费用率","target":"F4 合理控制成本费用","wd":"财务维度"},{"topic":"T2 生产力战略","plan":" ","measure":"F4.2 创利率（K）","target":"F4 合理控制成本费用","wd":"财务维度"},{"topic":"T3 顾客和供应商","plan":"K3 实施顾客满意度提升计划","measure":"C1.1 顾客满意度（K）","target":"C1 成为目标顾客购物首选","wd":"客户维度"},{"topic":"T3 顾客和供应商","plan":"K4 实施供应商满意度提升计划","measure":" ","target":"C2 成为供应商良好的合作伙伴","wd":"客户维度"},{"topic":"T4 商品战略","plan":" ","measure":"P1.1 生鲜熟盘后毛利额（K）","target":"P1 提升品类管理能力","wd":"内部流程维度"},{"topic":"T4 商品战略","plan":" ","measure":"P1.2 自有品牌与专属商品毛利额（K）","target":"P1 提升品类管理能力","wd":"内部流程维度"},{"topic":"T4 商品战略","plan":" ","measure":"P1.3 产地直采毛利额（K）","target":"P1 提升品类管理能力","wd":"内部流程维度"},{"topic":"T4 商品战略","plan":"K5 推进超市品种结构梳理，保证基础陈列效果（K）","measure":" ","target":"P1 提升品类管理能力","wd":"内部流程维度"},{"topic":"T4 商品战略","plan":"K6 夯实商品质量管理基础","measure":"P2.1 重大质量事故次数","target":"P2 提升商品质量","wd":"内部流程维度"},{"topic":"T4 商品战略","plan":" ","measure":"P2.2 门店超市商品质量审核得分（K）","target":"P2 提升商品质量","wd":"内部流程维度"},{"topic":"T5 营销战略","plan":" ","measure":"P3.1 （日均）促销收益","target":"P3 提升营销有效性","wd":"内部流程维度"},{"topic":"T6 服务战略","plan":"K7 口碑服务提升计划","measure":" ","target":"P4 打造口碑服务","wd":"内部流程维度"},{"topic":"T6 服务战略","plan":" ","measure":"P5.1 神秘顾客检查得分（K）","target":"P5 打造亲切服务","wd":"内部流程维度"},{"topic":"T6 服务战略","plan":" ","measure":"P6.1 便捷服务指标考核达标率","target":"P6 打造便捷服务","wd":"内部流程维度"},{"topic":"T6 服务战略","plan":" ","measure":"P7.1 季度检查专项服务得分","target":"P7 打造专业服务","wd":"内部流程维度"},{"topic":"T7 环境战略","plan":" ","measure":"P8.1 商场季度检查环境卫生、VI标识和消防安全得分","target":"P8 提供整洁明亮、安全舒适的购物环境","wd":"内部流程维度"},{"topic":" ","plan":" ","measure":"P9.1 商品损耗率","target":"P9 加强安全管理","wd":"内部流程维度"},{"topic":" ","plan":" ","measure":"P9.2 重大事故（纠纷）发生次数","target":"P9 加强安全管理","wd":"内部流程维度"},{"topic":"T8 有竞争力的员工队伍","plan":"K8 实施敬业度提升计划","measure":"L1.1 员工敬业度（K）","target":"L1 激发员工源动力","wd":"学习与成长维度"},{"topic":"T8 有竞争力的员工队伍","plan":"K9 宣导和践行企业文化","measure":" ","target":"L1 激发员工源动力","wd":"学习与成长维度"},{"topic":"T8 有竞争力的员工队伍","plan":" ","measure":"L2.1 管理干部本土化比例","target":"L2 加快员工本土化建设","wd":"学习与成长维度"},{"topic":"T9 高效的信息系统","plan":"K10 提升R3系统应用能力","measure":" ","target":"L3 有效应用R3系统","wd":"学习与成长维度"},{"topic":"T10 卓越的组织能力","plan":"K11 落实人效项目提升方案","measure":" ","target":"L4 提高运营效率","wd":"学习与成长维度"}]}


Roden
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
ExtJS GRID单元格合并
09-22
ExtJs 4.0 Grid 单元格合并控件封装
ExtJs 实现动态加载grid完整示例
10-26
动态加载grid在ExtJs中如何实现，貌似有很多的朋友都不知道吧，下面有个不错的示例，希望对大家有所帮助
CSS Grid 布局：span 关键字
最新发布
rubys007的博客
03-07 710
该项目从名称为 col 的第 2 行开始，结束于同样被命名为 col 的第 7 行。类似地，它从名称为 content 的第 6 行开始，结束于同样被命名为 content 的第 10 行。如果你使用 grid-column 或 grid-row 将项目放置到其父网格上，你可以使用 span 关键字来避免在项目跨越多列或多行时指定结束线。span 也可以与 grid-area 属性一起使用。
Extjs 实现多行合并(rowspan)效果
03-19
NULL 博文链接：https://tipx.iteye.com/blog/718279
ExtJS 4.2 Grid组件单元格合并的方法
01-21
ExtJS 4.2 Grid组件本身并没有提供单元格合并功能，需要自己实现这个功能。 目录 1. 原理 2. 多列合并 3. 代码与在线演示 1. 原理 1.1 HTML代码分析 首先创建一个Grid组件，然后查看下的HTML源码。 1.1.1 Grid组件 1.1.2 HTML代码 从这些代码中可以看出，Grid组件可分为grid-header和grid-body 两块区域(若含有工具栏和分页栏，它们都会含有各自的独立区域)。 其中grid-body包含了许多tr元素，每一个tr都是代表Grid组件中的一行数据；每个tr内部都包含了许多td，每个td表示一个单元格。 1.1.3 结构图
ExtJS3 - 如何实现多表头Grid
般若
12-21 6671
ExtJS 3.x 版本并没有直接实现多表头的Grid，可借助ColumnHeaderGroup插件进行实现。
Extjs Grid 合并两列显示的数据
vickyfei的专栏
02-08 5004
为那一列添加一个Convert函数，详见Ext API中的：Class Ext.data.Field  例子1：  Js代码   function addfunc(v, record){       return record.a+record.b;   }   var map=Ext.data.Record.create([       {name: 'fu
Extjs 多表头插件GroupHeaderGrid
冷月宫主的专栏
11-11 3124
效果图：     是不是非常酷啊！ js 代码： Ext.namespace("Ext.tet.plugins"); Ext.tet.plugins.GroupHeaderGrid = function(config) {  Ext.apply(this, config); }; Ext.extend(Ext
Extjs 4.0 Grid 表格列合并代码
wyfhist的专栏
04-22 2408
{ text:"库存量", flex : 1, name:'gross', dataIndex:'m_id', renderer  : function (value, meta, record, rowIndex, colIndex, store) { var first = !rowIndex || store.getAt(rowIndex).get('m_code') !== s
WPF基础五：UI①布局元素Grid
hd51cc的博客
04-10 1686
Grid 定义由列和行组成的灵活的网格区域。 Grid的特点： 可以定义任意数量的行和列。 行的高度和列的宽度可以使用绝对值、相对比例或自动调整的方式进行精确设定、并可设置最大和最小值。 内部元素可以设置自己的所在的行和列，还可以设置自己跨行、跨列的数量。 可以设置Children元素的对齐方向。 Grid的使用场合： UI布局的大型框架设计。 大量UI元素需要成行或者列对齐的情况。 UI整体尺寸改变时，元素需要保持固有的高度和宽度...
WPF Grid跨行、跨列
weixin_44552202的博客
05-17 8486
开发工具与关键技术：MVC、WPF 作者：刘俊杰 撰写时间：2019年05月15日 Grid顾名思义就是“网格”，以表格形式布局元素。在Grid布局中除了使用Row和Column附加属性在单元格中放置元素，还可以使用另外两个附加属性使用元素跨越多个单元格，这两个附加属性是RowSpan(跨行)和ColumnSpan(跨列)。 通过下面代码了解跨行、跨列： <!--网格布局--> ...
extjs3合并表头 rowspan
12-16
extjs3合并表头 rowspan
Ext多层表头
静水渊的专栏
08-22 1012
var row1 = [{ header: '总体情况', colspan: 4, align: 'center'}];     var row = [         { header: '', colspan: 4, align: 'center' },
Extjs grid 合并行
任彦章的博客
11-10 2894
在实际开发中可能会遇到grid中要合并单元格的操作，可能是合并横向单元格，也可能是合并列的单元格，网络上有很多demo，大多是用css样式去控制，但是这样的话代码就会显得很多，不容易阅读，我们看到html 类似  的代码表示 table 该列向下合并两行。那么extjs grid 基本结构也是table ，我们可尝试采用这样的方式来控制。小白也在网上找了一些方法，并加以修改整合，写出以下demo
Extjs grid 单元格溢出用……代替
不如一默
03-25 1381
Extjs 单元格中如果字符长度大于单元格宽度时，特别有换行符时就会将单元格高度拉伸，如果一个grid 界面上每行记录的高度不一致就会大大影响界面的美观性。所以，就想到了让每个单元格自动将溢出的字符用……代替，从而避免了这种情况。 解决方法： 在单元格的renderer事件函数中增加： meta.attr = 'style="overflow: hidden;text-overflow:
EXT gridpanel 合并行
一笑天
07-02 5309
在实际工作中，我们需要实现如下图的效果，如下图：     那么，怎么实现呢？下面给大家做详细的讲解，首先，文件夹里的文件如下图所示，其实大家可以根据实际情况自定义文件名： 其中，page.js是放页面控件，data.js是放数据源，ColumnHeaderGroup.js很重要，是我从网上找的，最主要的就是这3个文件，其他几个文件不是很重要。  Gri
【tkinter布局管理】grid：网格分布，按行列形式排列
nilvya的博客
05-17 8003
tkinter布局管理器之grid，网格分布，按行列形式排列
ExtJs grid合并单元格
weixin_34319640的博客
04-29 181
extjs中，如果要输出一些有合并单元格的表格，要怎么做呢？如图所示：从网上找了个例子，其主要思想是表格的store装载完毕后，随即对这个grid的td进行一个个的控制，用的方法也是原始的javascript方法。我针对目前在做的项目，做了一些修改。//grid的store var gridStore = new Ext.data.Store({ autoDestroy: true, ...
如何 实现 ExtJs 实现动态加载grid，请提供完整示例
05-24
ExtJS可以通过Store的proxy来实现动态加载Grid。下面是一个参考示例： ```javascript Ext.application({ name: 'MyApp', launch: function() { Ext.create('Ext.data.Store', { storeId:'myStore', fields:['name', 'email', 'phone'], proxy: { type: 'ajax', url: '/data.json', // 对应后端数据接口 reader: { type: 'json', rootProperty: 'data' // 数据集合的属性名 } }, autoLoad: true // 自动加载数据 }); Ext.create('Ext.grid.Panel', { title: 'My Grid Panel', store: Ext.data.StoreManager.lookup('myStore'), columns: [ { text: 'Name', dataIndex: 'name' }, { text: 'Email', dataIndex: 'email', flex: 1 }, { text: 'Phone', dataIndex: 'phone' } ], height: 200, width: 400, renderTo: Ext.getBody() }); } }); ``` 在上面的示例中，创建了一个Store，并设置了proxy的类型为ajax，url为数据接口的地址，reader的类型为json，rootProperty为数据集合的属性名。同时设置了autoLoad为true，使得Store在创建时自动加载数据。 然后创建了一个Grid Panel，并将Store设置为其数据源。最后通过renderTo将Grid Panel渲染到页面上。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值