本帖最后由 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[0]);
- }
- for (var i = 1; i < cells.length; i++) {
- p.setCellData(r, i - 1, cells[i]);
- }
- }
- 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[0], {
- 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[0].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(','));
- }
复制代码
|