合并的效果图
代码:
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
分享到:
相关推荐
本项目提供了一个解决方案,它支持合并单元格和合并行,无需依赖Microsoft Office,这对于那些无法安装Office环境或者希望在服务器端执行此操作的用户来说,具有很高的实用价值。 首先,我们要理解HTML表格...
"JS固定表头和左边列(支持合并单元格)v1.6"是一个专门为解决这个问题而设计的JavaScript库。这个库由原生JavaScript编写,意味着它无需依赖其他大型框架,如jQuery,使得它更轻量级且易于集成到项目中。 表头固定...
通常,我们会使用一些库或API,如` SheetJS `(也称为` xlsx `),这是一个流行的JavaScript库,能够读写多种电子表格格式,包括Excel的`.xlsx`和`.xls`。在项目中,你需要安装这个库,通过运行`npm install xlsx`...
在本项目中,"vue+elementUI实现动态表格合并单元格.zip" 提供了一个使用 Vue.js 框架和 Element UI 组件库构建的动态表格应用。Vue.js 是一款轻量级的前端JavaScript框架,它提供了响应式的数据绑定和组件化功能,...
本文将详细讨论如何使用 Bootstrap Table 实现单元格的合并功能。 首先,我们需要了解 `mergeCells` 这个方法。`mergeCells` 是 Bootstrap Table 提供的一个功能,用于合并指定的单元格。在提供的代码示例中,可以...
本文将深入探讨如何使用JavaScript库`Export2Excel.js`和`Blob.js`来实现将数据导出为表格(Excel)格式。这两个库提供了一种便捷的方式,使用户能够在前端直接处理数据并生成可下载的Excel文件,无需后端服务器的...
- 使用SpreadJS API设置合并的列头,这可能涉及到对工作表的修改和单元格的合并操作。 - 实现数据绑定,确保当数据源更改时,电子表格会自动更新,反之亦然。 - 使用图表模块创建图表,以便直观地呈现数据。 - 通过...
merge 合并多个单元格 MergeTable.merge(); splitH 横拆单元格MergeTable.splitH(); splitV 竖拆单元格MergeTable.splitV(); deleteCol 删除列MergeTable.deleteCol(); deleteRow 删除行MergeTable.deleteRow(); ...
JXL是一个广泛使用的Java库,它允许开发者方便地读写Excel文件,而无需依赖Microsoft Office。 标题中的“用jxl实现java对Excel表格的增删改查”指的是使用JXL库来完成对Excel文件的基本操作:增加数据(Add)、...
- 对于Excel导出,可以选择不依赖特定浏览器特性的库,如使用FileSaver.js库实现文件保存,而不是依赖于特定浏览器的download属性。 5. **最佳实践**: - 在导出Excel时,确保数据格式正确且一致,避免因数据类型...
在本文中,我们将深入探讨如何在ExtJS框架中实现表格单元格的合并,以及解决不同浏览器间盒模型差异带来的布局问题。ExtJS是一款强大的JavaScript库,用于构建富客户端应用程序,其表格组件是功能丰富的数据展示工具...
bootstrap table实现合并单元格效果,切换第二页也合并单元格效果,需要依赖于bootstrap-table.js,bootstrap table.css
"导入Excel,处理合并表头、多行/复杂表头"这个主题涉及到的是如何有效地读取和解析那些具有非标准布局的Excel文件,尤其是那些包含合并单元格或多层次表头的文件。下面将详细介绍这一知识点。 首先,我们需要理解...
在网页开发中,jQuery是一个非常流行的JavaScript库,它简化了DOM操作、事件处理以及动画制作。在这个"jquery行列合并例子"中,我们关注的是如何利用jQuery来实现HTML表格中的行和列合并,这对于数据展示或者创建...
在Element UI的2.15.12版本中,开发团队可能针对这个功能进行了性能优化,确保在合并单元格时,系统的稳定性和效率得到提升。 表格合并功能的实现通常涉及到计算单元格的合并范围,这需要精确的逻辑来确定哪些...
在这个实例中,`export-docx.js`可能是一个用于创建docx文件的JavaScript库,如`docxtemplater`,它允许我们使用模板语法插入动态数据并支持插入图片。这意味着前端开发者可以利用这个库在用户浏览器中生成包含文本...
在实际应用中,可能还需要处理更复杂的情况,比如格式化单元格、合并单元格、设置样式等。js-xlsx提供了丰富的API来处理这些问题,如`XLSX.utils.format_cell()`、`XLSX.utils.aoa_to_sheet()`等,可以根据需求灵活...
它的API提供了丰富的功能,例如读取文件、写入文件、合并单元格、格式化数据等。 在“readExcelXlsx.js”文件中,我们可以预期代码会包含以下关键步骤: 1. **安装依赖**:首先,开发者需要在项目中安装"xlsx"库。...
Thymeleaf可以通过Maven或Gradle等构建工具添加依赖到项目中。在Spring Boot项目中,只需在pom.xml或build.gradle中引入相应的Thymeleaf Starter,框架会自动配置好Thymeleaf的相关设置。 2. **基本语法** ...
- **合并单元格**:将多个单元格合并为一个单元格。 - **冻结行列与可视区域**:固定某一行或某一列使其始终保持可见。 - **获取与设置数据**:读取和更新单元格中的数据。 - **公式**:利用内置的公式引擎执行计算...