`
hite
  • 浏览: 51764 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
文章分类
社区版块
存档分类
最新评论

使用js,左依赖合并单元格

阅读更多

 

合并的效果图提示

 

代码:

 

 

	render: function(){
		/**
		 * landmark = y ,diffs = x
		 */
		var iterateMerge = function(landmark,diffs){
			
			if(diffs.length<1 || landmark.length<1){
				return ;//exit
			}
			//目前是先合并行,再循环列
			
			var last =false;//上一行是被合并的吗
			var firstRow  = landmark[0];
			var colsindex = rows[firstRow].cells.length-diffs[0];
			var mergeCell = $(rows[firstRow].cells[colsindex]);
			var counter = 2;
			var landmark_2 = $A(landmark);
			for(var j=1;j<landmark.length;j++){
				var rowindex = landmark[j];
				/*
				 * 前依赖的行合并,需要考虑前面列合并后,后面列序号变化的事实
				 * 观察得,z左依赖,右计数
				 */
				colsindex = rows[rowindex].cells.length-diffs[0];
				var tempCell = $(rows[rowindex].cells[colsindex]);
				
				if(mergeCell.innerHTML == tempCell.innerHTML){
					//do sth
					tempCell.destroy();
					mergeCell.addClass("crossCell");
					mergeCell.set("rowspan", counter++);
					last=true;
					//
					if(j==landmark.length-1){//the last merged one
						iterateMerge(landmark_2,diffs.slice(1));
					            return ;
} }else{ mergeCell = tempCell; if(!last){ landmark_2.erase(landmark[j-1]); }else{//last one was merged,but this not var offset = landmark_2.indexOf(landmark[j]); iterateMerge(landmark_2.slice(0,offset),diffs.slice(1)); iterateMerge(landmark_2.slice(offset),diffs); return ;
} } } } // iterateMerge end var landmark = new Array(); var rows = this.container.rows; var cellsLength = rows[0].cells.length; for(var k=0;k<10;k++){ landmark.push(k); } var sorted = this.columns.sort(function(a,b){return a-b;}); var diffs = new Array(); for(var x = 0,l= sorted.length;x<l;x++){ diffs.push(cellsLength-sorted[x]); } iterateMerge(landmark,diffs); }

  这实现的关键在:

1.左依赖,需要递归,需要分组

2.右计数(原因见注释)


代码使用了mootools的基础库。

landmark值要合并的行的数组

 this.columns是需要合并列的数组。

 diffs是使用右计数的this.columns的对应差数组

 

明白这个后其实就可以做右依赖了。

 

其实这个是典型的汉诺塔问题。

稍微有点变形而已。

假设:

问题为:F

[A-G] 为landmark数组[1-10]为列数组

 

那么

 

F =function([A-G],[1-10]){

    //do sth

    F([x-D],[1-10]);

    F([E-G],[2-10]) ;

}

问题就转为为如何确定x的值。

 

 

 

  • 大小: 15.3 KB
分享到:
评论

相关推荐

    将HtmlTable 导出为Execl文件,支持合并单元格、合并行,无需Office支持

    本项目提供了一个解决方案,它支持合并单元格和合并行,无需依赖Microsoft Office,这对于那些无法安装Office环境或者希望在服务器端执行此操作的用户来说,具有很高的实用价值。 首先,我们要理解HTML表格...

    JS固定表头和左边列(支持合并单元格)v1.6

    "JS固定表头和左边列(支持合并单元格)v1.6"是一个专门为解决这个问题而设计的JavaScript库。这个库由原生JavaScript编写,意味着它无需依赖其他大型框架,如jQuery,使得它更轻量级且易于集成到项目中。 表头固定...

    前端导出 excel ,设置字体,列宽,行高,对其方式,合并单元格等效果

    通常,我们会使用一些库或API,如` SheetJS `(也称为` xlsx `),这是一个流行的JavaScript库,能够读写多种电子表格格式,包括Excel的`.xlsx`和`.xls`。在项目中,你需要安装这个库,通过运行`npm install xlsx`...

    vue+elementUI实现动态表格合并单元格.zip

    在本项目中,"vue+elementUI实现动态表格合并单元格.zip" 提供了一个使用 Vue.js 框架和 Element UI 组件库构建的动态表格应用。Vue.js 是一款轻量级的前端JavaScript框架,它提供了响应式的数据绑定和组件化功能,...

    bootstrap table实现合并单元格效果

    本文将详细讨论如何使用 Bootstrap Table 实现单元格的合并功能。 首先,我们需要了解 `mergeCells` 这个方法。`mergeCells` 是 Bootstrap Table 提供的一个功能,用于合并指定的单元格。在提供的代码示例中,可以...

    Export2Excel.js+Blob导出为表格数据

    本文将深入探讨如何使用JavaScript库`Export2Excel.js`和`Blob.js`来实现将数据导出为表格(Excel)格式。这两个库提供了一种便捷的方式,使用户能够在前端直接处理数据并生成可下载的Excel文件,无需后端服务器的...

    spreadjs_包含合并列头的数据绑定-demo (1).zip

    - 使用SpreadJS API设置合并的列头,这可能涉及到对工作表的修改和单元格的合并操作。 - 实现数据绑定,确保当数据源更改时,电子表格会自动更新,反之亦然。 - 使用图表模块创建图表,以便直观地呈现数据。 - 通过...

    merge-table:对HTML表格进行合并拆分操作

    merge 合并多个单元格 MergeTable.merge(); splitH 横拆单元格MergeTable.splitH(); splitV 竖拆单元格MergeTable.splitV(); deleteCol 删除列MergeTable.deleteCol(); deleteRow 删除行MergeTable.deleteRow(); ...

    用jxl实现java对Excel表格的增删改查

    JXL是一个广泛使用的Java库,它允许开发者方便地读写Excel文件,而无需依赖Microsoft Office。 标题中的“用jxl实现java对Excel表格的增删改查”指的是使用JXL库来完成对Excel文件的基本操作:增加数据(Add)、...

    excel导出表格内容.zip

    - 对于Excel导出,可以选择不依赖特定浏览器特性的库,如使用FileSaver.js库实现文件保存,而不是依赖于特定浏览器的download属性。 5. **最佳实践**: - 在导出Excel时,确保数据格式正确且一致,避免因数据类型...

    Extjs表格合并代码

    在本文中,我们将深入探讨如何在ExtJS框架中实现表格单元格的合并,以及解决不同浏览器间盒模型差异带来的布局问题。ExtJS是一款强大的JavaScript库,用于构建富客户端应用程序,其表格组件是功能丰富的数据展示工具...

    bootstrap-table-merge-cells.js

    bootstrap table实现合并单元格效果,切换第二页也合并单元格效果,需要依赖于bootstrap-table.js,bootstrap table.css

    导入excel,处理合并表头、多行/复杂表头

    "导入Excel,处理合并表头、多行/复杂表头"这个主题涉及到的是如何有效地读取和解析那些具有非标准布局的Excel文件,尤其是那些包含合并单元格或多层次表头的文件。下面将详细介绍这一知识点。 首先,我们需要理解...

    jquery行列合并例子

    在网页开发中,jQuery是一个非常流行的JavaScript库,它简化了DOM操作、事件处理以及动画制作。在这个"jquery行列合并例子"中,我们关注的是如何利用jQuery来实现HTML表格中的行和列合并,这对于数据展示或者创建...

    element-ui版本号2.15.12的包

    在Element UI的2.15.12版本中,开发团队可能针对这个功能进行了性能优化,确保在合并单元格时,系统的稳定性和效率得到提升。 表格合并功能的实现通常涉及到计算单元格的合并范围,这需要精确的逻辑来确定哪些...

    docx和xlsx的前端生成完整实例代码 report-js.rar

    在这个实例中,`export-docx.js`可能是一个用于创建docx文件的JavaScript库,如`docxtemplater`,它允许我们使用模板语法插入动态数据并支持插入图片。这意味着前端开发者可以利用这个库在用户浏览器中生成包含文本...

    JS操作Excel:使用js-xlsx实现前端导出Excel文件

    在实际应用中,可能还需要处理更复杂的情况,比如格式化单元格、合并单元格、设置样式等。js-xlsx提供了丰富的API来处理这些问题,如`XLSX.utils.format_cell()`、`XLSX.utils.aoa_to_sheet()`等,可以根据需求灵活...

    readExcelXlsx_Node.js_js_

    它的API提供了丰富的功能,例如读取文件、写入文件、合并单元格、格式化数据等。 在“readExcelXlsx.js”文件中,我们可以预期代码会包含以下关键步骤: 1. **安装依赖**:首先,开发者需要在项目中安装"xlsx"库。...

    Thymeleaf 基本用法总结文档

    Thymeleaf可以通过Maven或Gradle等构建工具添加依赖到项目中。在Spring Boot项目中,只需在pom.xml或build.gradle中引入相应的Thymeleaf Starter,框架会自动配置好Thymeleaf的相关设置。 2. **基本语法** ...

    SpreadJS 8.1 中文核心特性使用指南

    - **合并单元格**:将多个单元格合并为一个单元格。 - **冻结行列与可视区域**:固定某一行或某一列使其始终保持可见。 - **获取与设置数据**:读取和更新单元格中的数据。 - **公式**:利用内置的公式引擎执行计算...

Global site tag (gtag.js) - Google Analytics