`
maphey
  • 浏览: 9123 次
社区版块
存档分类
最新评论

datagrid 动态合并行

阅读更多

easyui datagrid 需要动态合并行,可以考虑在加载完数据之后按照文本合并

$('#datagrid').datagrid({    
			    method:"post",
			    loadMsg:'数据加载中请稍后……',
			    pagination:false,
			    rownumbers:false, 
			    resizable:true,
			    fitColumns:true,
			    nowrap:true,
			    singleSelect:true,
		        striped : true,
		        data:data,
			    columns:[[
			        // ...
			    ]],
			    onLoadSuccess:function (data){
			    	console.log(data);
				    	if(data.rows.length>0){
				    		mergeCell("datagrid","colName1,colName2");
				    	}
			    	} 
			});
		}



加载之后对传入的列 动态合并

		function mergeCell(dgId,fields){
			var fieldArray=fields.split(",");
			var dg=$('#' + dgId);
			var rowCount=dg.datagrid("getRows").length;
			for (var i = 0; i < fieldArray.length; i++) {
				var begin=0;
				var length=0;
				var perTxt="";
				var curTxt="";
				var field = fieldArray[i];
				for (var j = 0; j < rowCount; j++) {
					curTxt=dg.datagrid("getRows")[j][field];
					if (curTxt==perTxt) {
						length++;
					}else if(length==0){
						begin++;
					}
					if ((curTxt!=perTxt&&length!=0)||(curTxt==perTxt&&j==rowCount-1)) {
						dg.datagrid("mergeCells",{
							index: begin-1,
		                    field: field,
		                    rowspan: length+1,
		                    colspan: null
						});
						begin+=(length+1);
						length=0;
					}
					perTxt=curTxt;
				}
			}
		}



后面发现下面情况子列会跨父列合并:

 

1 2 4
1 2 5
1 3 5

 


希望不要合并 5,修改代码如下:

function mergeCell(dgId,fields){
			var fieldArray=fields.split(",");
			var dg=$('#' + dgId);
			var rowCount=dg.datagrid("getRows").length;
			for (var i = 0; i < fieldArray.length; i++) {
				var begin=0;
				var length=0;
				var perTxt="";
				var curTxt="";
				var field = fieldArray[i];
				for (var j = 0; j < rowCount; j++) {
					curTxt="";
					for (var k = 0; k <= i; k++) {
						curTxt+=dg.datagrid("getRows")[j][fieldArray[k]];
					}
					if (curTxt==perTxt) {
						length++;
					}else if(length==0){
						begin++;
					}
					if ((curTxt!=perTxt&&length!=0)||(curTxt==perTxt&&j==rowCount-1)) {
						dg.datagrid("mergeCells",{
							index: begin-1,
		                    field: field,
		                    rowspan: length+1,
		                    colspan: null
						});
						begin+=(length+1);
						length=0;
					}
					perTxt=curTxt;
				}
			}
		}

 

 

 

分享到:
评论

相关推荐

    WPF DataGrid合并行

    7. **处理程序事件**:可能需要监听DataGrid的Loaded或DataGrid.ItemsSourceChanged事件,以便在数据加载后或数据更改时动态调整行的合并状态。 8. **自定义DataGrid类**:如果你需要更高级的控制,可以考虑扩展...

    DataGrid 实现复杂表头和合并行源码与示例

    四、支持模拟行合并,即对象中存在集合成员; 五、支持自定义转换器(IValueConverter); 六、支持对象集合(ICollection)和支持动态字典集合(ICollection, object&gt;&gt;)的绑定 ; 七、对象集合使用 ...

    WPF.DataGrid.MergeRow

    在某些场景下,我们可能需要对DataGrid的行或单元格进行合并,以达到更美观或者特定的信息展示效果。标题"WPF.DataGrid.MergeRow"和描述中的"实现功能:WPF下DataGrid实现行单元格合并"正是针对这个需求的解决方案。...

    wpf 动态合并datagrid表头单元格

    然而,在某些情况下,我们可能需要动态地合并Datagrid的表头单元格,以达到更清晰、更具有组织性的数据展示效果。这通常发生在数据有层次结构或需要对某一列进行分类时。本篇将详细讲解如何在WPF中实现这个功能。 ...

    easyui的datagrid生成合并行,合计计算价格

    - 如果需要动态合并行,可能需要对数据源进行预处理,找出需要合并的行并计算相应的`rowspan`值。 - 考虑到用户体验,合并行时应确保不会造成阅读困扰,避免过多的合并导致信息难以理解。 综上所述,利用EasyUI的...

    DataGrid表头合并和单元格内容合并-升级版

    3. **编程实现合并**:在后台代码中,需要对DataGrid的ItemsSource进行处理,识别出哪些行或列需要合并,并设置相应的HeaderSpan属性。HeaderSpan属性控制了当前列的表头将跨越的行数。 4. **事件处理**:可能需要...

    miniui datagrid 合并单元格

    ### MiniUI DataGrid合并单元格方法详解 #### 一、引言 在处理表格数据时,经常需要对具有相同属性的行进行合并显示,以提高数据的可读性和美观度。MiniUI是一款功能强大且易用的企业级前端框架,其DataGrid组件...

    DataGrid简单实现合并单元格

    真实的单元格合并通常涉及到数据结构的调整,这在WPF DataGrid中并不容易实现,尤其是在动态数据场景下。因此,对于复杂的合并需求,可能需要考虑其他解决方案,如使用更高级的报表工具或自定义控件。

    WPF DataGrid合并单元格(模板列嵌套DataGrid)

    嵌套DataGrid可以用来显示与当前行相关的子集数据,提供更丰富的信息展示。 在提供的压缩包文件中,`DataGridInTemplateColumn.sln`是一个Visual Studio解决方案文件,包含了项目的源代码。`...

    WPF Datagrid 合并单元格

    在标准的Datagrid中,合并单元格通常涉及到对行和列的范围进行设置。在WPF中,可以通过自定义控件或扩展Datagrid的默认行为来实现复杂的合并功能。描述中的"支持位置拖动、列宽度拖动"意味着这个实现还考虑了用户...

    C# DataGrid表头合并和单元格内容合并

    本教程将详细介绍如何在C#中实现DataGrid的表头合并和单元格内容合并,以及如何创建一个具有多层表头的示例(Demo)。 首先,我们要理解表头合并的概念。在DataGrid中,表头合并允许我们将多个列的标题合并成一个大...

    jquery.easyui.datagrid扩展合并列

    jquery.easyui.datagrid自动合并列扩展,支持多列合并。 用法:加载成功后 $('#'+tab).datagrid("autoMergeCells",['列名','列名']);

    nui或者miniui中gird合并重复行数据,查找某行

    在本篇文章中,我们将深入探讨如何在NUI或MiniUI框架中的Datagrid组件实现合并重复行数据,并且介绍如何在这些合并后的数据中查找特定行的功能。本文将分为几个部分来详细阐述:首先,理解Datagrid的基本概念及其在...

    MVVM实现WPF中DataGrid动态列与编辑器

    本篇主要讨论如何在MVVM框架下实现DataGrid控件的动态列以及编辑功能。 首先,理解MVVM模式的基本概念: 1. **Model**:模型层,负责业务数据的处理,不关心UI。 2. **View**:视图层,UI界面,用户交互的地方,...

    datagrid合并单元格

    - 对于行合并,通常需要自定义逻辑来计算合并信息,并传递给`datagrid`。 7. **注意事项** - 合并单元格可能会增加复杂性,需要确保正确处理数据绑定、事件监听等问题。 - 考虑到性能,避免在大数据量时进行大量...

    easyui datagrid 合并行扩展

    easyui并没有合并行的具体方法,在开发过程中有时候会遇到一行带多行的需求,本代码为满足该需求写的easyUI扩展,代码带注释

    easyUI datagrid合并单元格(支持子对象的属性)

    easyUI datagrid合并单元格的两种方法 都实现了按照子对象的属性合并单元格的需求 调用方式也很简单调用方式: $(tableID).datagrid("autoUnrelatedMergeCells", ["role.name", "num"]);

    .net datagrid表头合并

    本文将深入探讨如何实现`.NET datagrid表头合并`,以及如何从TreeView中获取数据并加载到DataGrid中,创建具有多行表头的功能。 首先,表头合并是一个常见的需求,尤其是在展示层次化数据时。在.NET DataGrid中,...

    datagrid合并指定合并单元格.txt

    datagrid指定"列数"进行合并,当创建报表表格的时候,有合并需求并使用datagrid进行合并列的时候总是无从下手,此资源可以让你按照特定列,想让那列合并就可以让那列进行合并。也可以只根据某列进行合并,非常好用

    datagrid合并单元格,MecGrid实现

    这个方法接受行索引、列索引、行跨度和列跨度作为参数,可以合并指定区域的所有单元格。这在需要创建复杂布局或者展示汇总数据时非常有用。 实现这些功能时,需要在`MecGrid`的数据提供程序中进行相应的配置。这...

Global site tag (gtag.js) - Google Analytics