合并单元格的数据无法清除
本帖最后由 dllyzs 于 2020-11-27 10:45 编辑合并后的单元格的数据可以修改，但是无法清除。
输出了一下结果，如果数据修改了，那么被合并的列的数据都会变成一样的数据，为什么不能清除呢？
是需要做其他的设置么？
或者有没有动态显示或隐藏一行的某些列的方案。
譬如一行有A~G列，
A是1时，B-G列合并显示，或者显示H列，隐藏B-G列
A是2时，B-G单独显示，或者显示B-G列，隐藏H列
使用的例子是下面地址的例子
https://demo.grapecity.com.cn/wijmo/demos/Grid/Merging/CustomMerging/purejs
代码如下
import 'bootstrap.css';
import '@grapecity/wijmo.styles/wijmo.css';
import './styles.css';
import * as wjGrid from '@grapecity/wijmo.grid';
import * as wjCore from '@grapecity/wijmo';
export class CustomMergeManager extends wjGrid.MergeManager {
constructor(flexGrid) {
super(flexGrid);
}
getMergedRange(panel, r, c, clip = true) {
// create basic cell range
var rg = new wjGrid.CellRange(r, c);
// expand left/right
for (var i = rg.col; i < panel.columns.length - 1; i++) {
if (panel.getCellData(rg.row, i, true) != panel.getCellData(rg.row, i + 1, true))
break;
rg.col2 = i + 1;
}
for (var i = rg.col; i > 0; i--) {
if (panel.getCellData(rg.row, i, true) != panel.getCellData(rg.row, i - 1, true))
break;
rg.col = i - 1;
}
// expand up/down
for (var i = rg.row; i < panel.rows.length - 1; i++) {
if (panel.getCellData(i, rg.col, true) != panel.getCellData(i + 1, rg.col, true))
break;
rg.row2 = i + 1;
}
for (var i = rg.row; i > 0; i--) {
if (panel.getCellData(i, rg.col, true) != panel.getCellData(i - 1, rg.col, true))
break;
rg.row = i - 1;
}
// done
return rg;
}
}
function setData(p, r, cells) {
if (p.cellType == wjGrid.CellType.Cell) {
p.grid.rowHeaders.setCellData(r, 0, cells);
}
for (var i = 1; i < cells.length; i++) {
p.setCellData(r, i - 1, cells);
}
}
function centerCell(s, e) {
if (e.cell.children.length == 0) {
e.cell.innerHTML = '<div>' + e.cell.innerHTML + '</div>';
wjCore.setCss(e.cell, {
display: 'table',
tableLayout: 'fixed'
});
wjCore.setCss(e.cell.children, {
display: 'table-cell',
textAlign: 'center',
verticalAlign: 'middle'
});
}
}
//
document.readyState === 'complete' ? init() : window.onload = init;
//
function init() {
// create an unbound grid with 5 rows and 7 columns
var theGrid = new wjGrid.FlexGrid('#theGrid');
while (theGrid.columns.length < 7) {
theGrid.columns.push(new wjGrid.Column({isReadOnly:false}));
}
while (theGrid.rows.length < 5) {
theGrid.rows.push(new wjGrid.Row());
}
// configure the grid
theGrid.mergeManager = new CustomMergeManager(theGrid);
theGrid.formatItem.addHandler(centerCell);
theGrid.rowHeaders.columns.width = 80;
theGrid.rows.defaultSize = 40;
theGrid.alternatingRowStep = 0;
theGrid.isReadOnly = false;
// populate the grid
setData(theGrid.columnHeaders, 0, ',Monday,Tuesday,Wednesday,Thursday,Friday,Saturday,Sunday'.split(','));
setData(theGrid.cells, 0, '12:00,Walker,Morning Show,Morning Show,Sport,Weather,N/A,N/A'.split(','));
setData(theGrid.cells, 1, '13:00,Today Show,Today Show,Sesame Street,Football,Market Watch,N/A,N/A'.split(','));
setData(theGrid.cells, 2, '14:00,Today Show,Today Show,Kid Zone,Football,Soap Opera,N/A,N/A'.split(','));
setData(theGrid.cells, 3, '15:00,News,News,News,News,News,N/A,N/A'.split(','));
setData(theGrid.cells, 4, '16:00,News,News,News,News,News,N/A,N/A'.split(','));
}
您好，无法删除数据是因为默认column配置了isRequired属性，给这个属性设置false即可。
参考代码：
theGrid.columns.forEach(function(col){
col.isRequired = false;
})
参考文章：
https://gcdn.grapecity.com.cn/forum.php?mod=viewthread&tid=79249&extra=page%3D1
============================================
关于合并策略，都在getMergedRange方法里定义了，在此可以根据具体业务逻辑生成合并单元格。 合并后的单元格的数据在修改后都会变成一样的，可以只修改其中一个字段么？ 您好，这个确实不支持。Wijmo的FlexGrid严格说来实际上是一个有行列逻辑依赖的传统Grid表格，展示层能实现自定义合并单元格已经是比较“非常规”操作了，如果再涉及填报，肯定会导致绑定数据关系失效。
针对您这个需求，实际上更合适的产品是SpreadJS，SpreadJs用类似Excel这种散列表的形式组织架构起来的，对数据绑定、样式控制包括单元格合并等操作都更灵活、更方便。参考：
https://demo.grapecity.com.cn/spreadjs/SpreadJSTutorial/features/cells/cell-span/purejs 感谢回答。 感谢反馈，本贴结帖了，有新的问题欢迎发新帖交流~
页:
[1]