找回密码
 立即注册

QQ登录

只需一步,快速开始

dllyzs

注册会员

11

主题

26

帖子

109

积分

注册会员

积分
109
dllyzs
注册会员   /  发表于:2020-11-26 14:55  /   查看:5399  /  回复:5
5金币
本帖最后由 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

代码如下
  1. import 'bootstrap.css';
  2. import '@grapecity/wijmo.styles/wijmo.css';
  3. import './styles.css';
  4. import * as wjGrid from '@grapecity/wijmo.grid';
  5. import * as wjCore from '@grapecity/wijmo';
  6. export class CustomMergeManager extends wjGrid.MergeManager {
  7.     constructor(flexGrid) {
  8.         super(flexGrid);
  9.     }
  10.     getMergedRange(panel, r, c, clip = true) {
  11.         // create basic cell range
  12.         var rg = new wjGrid.CellRange(r, c);
  13.         // expand left/right
  14.         for (var i = rg.col; i < panel.columns.length - 1; i++) {
  15.             if (panel.getCellData(rg.row, i, true) != panel.getCellData(rg.row, i + 1, true))
  16.                 break;
  17.             rg.col2 = i + 1;
  18.         }
  19.         for (var i = rg.col; i > 0; i--) {
  20.             if (panel.getCellData(rg.row, i, true) != panel.getCellData(rg.row, i - 1, true))
  21.                 break;
  22.             rg.col = i - 1;
  23.         }
  24.         // expand up/down
  25.         for (var i = rg.row; i < panel.rows.length - 1; i++) {
  26.             if (panel.getCellData(i, rg.col, true) != panel.getCellData(i + 1, rg.col, true))
  27.                 break;
  28.             rg.row2 = i + 1;
  29.         }
  30.         for (var i = rg.row; i > 0; i--) {
  31.             if (panel.getCellData(i, rg.col, true) != panel.getCellData(i - 1, rg.col, true))
  32.                 break;
  33.             rg.row = i - 1;
  34.         }
  35.         // done
  36.         return rg;
  37.     }
  38. }
  39. function setData(p, r, cells) {
  40.     if (p.cellType == wjGrid.CellType.Cell) {
  41.         p.grid.rowHeaders.setCellData(r, 0, cells[0]);
  42.     }
  43.     for (var i = 1; i < cells.length; i++) {
  44.         p.setCellData(r, i - 1, cells[i]);
  45.     }
  46. }
  47. function centerCell(s, e) {
  48.     if (e.cell.children.length == 0) {
  49.         e.cell.innerHTML = '<div>' + e.cell.innerHTML + '</div>';
  50.         wjCore.setCss(e.cell, {
  51.             display: 'table',
  52.             tableLayout: 'fixed'
  53.         });
  54.         wjCore.setCss(e.cell.children[0], {
  55.             display: 'table-cell',
  56.             textAlign: 'center',
  57.             verticalAlign: 'middle'
  58.         });
  59.     }
  60. }
  61. //
  62. document.readyState === 'complete' ? init() : window.onload = init;
  63. //
  64. function init() {
  65.     // create an unbound grid with 5 rows and 7 columns
  66.     var theGrid = new wjGrid.FlexGrid('#theGrid');
  67.     while (theGrid.columns.length < 7) {
  68.         theGrid.columns.push(new wjGrid.Column({isReadOnly:false}));
  69.     }
  70.     while (theGrid.rows.length < 5) {
  71.         theGrid.rows.push(new wjGrid.Row());
  72.     }
  73.     // configure the grid
  74.     theGrid.mergeManager = new CustomMergeManager(theGrid);
  75.     theGrid.formatItem.addHandler(centerCell);
  76.     theGrid.rowHeaders.columns[0].width = 80;
  77.     theGrid.rows.defaultSize = 40;
  78.     theGrid.alternatingRowStep = 0;
  79.     theGrid.isReadOnly = false;
  80.     // populate the grid
  81.     setData(theGrid.columnHeaders, 0, ',Monday,Tuesday,Wednesday,Thursday,Friday,Saturday,Sunday'.split(','));
  82.     setData(theGrid.cells, 0, '12:00,Walker,Morning Show,Morning Show,Sport,Weather,N/A,N/A'.split(','));
  83.     setData(theGrid.cells, 1, '13:00,Today Show,Today Show,Sesame Street,Football,Market Watch,N/A,N/A'.split(','));
  84.     setData(theGrid.cells, 2, '14:00,Today Show,Today Show,Kid Zone,Football,Soap Opera,N/A,N/A'.split(','));
  85.     setData(theGrid.cells, 3, '15:00,News,News,News,News,News,N/A,N/A'.split(','));
  86.     setData(theGrid.cells, 4, '16:00,News,News,News,News,News,N/A,N/A'.split(','));
  87. }
复制代码


最佳答案

查看完整内容

您好,无法删除数据是因为默认column配置了isRequired属性,给这个属性设置false即可。 参考代码: 参考文章: https://gcdn.grapecity.com.cn/forum.php?mod=viewthread&tid=79249&extra=page%3D1 ============================================ 关于合并策略,都在getMergedRange方法里定义了,在此可以根据具体业务逻辑生成合并单元格。

5 个回复

倒序浏览
最佳答案
最佳答案
KevinChen讲师达人认证 悬赏达人认证 SpreadJS 开发认证
论坛元老   /  发表于:2020-11-26 14:55:02
来自 2#
您好,无法删除数据是因为默认column配置了isRequired属性,给这个属性设置false即可。
参考代码:
  1. theGrid.columns.forEach(function(col){
  2.         col.isRequired = false;
  3.     })
复制代码


参考文章:
https://gcdn.grapecity.com.cn/fo ... &extra=page%3D1

============================================

关于合并策略,都在getMergedRange方法里定义了,在此可以根据具体业务逻辑生成合并单元格。
回复 使用道具 举报
dllyzs
注册会员   /  发表于:2020-11-27 08:53:36
3#
合并后的单元格的数据在修改后都会变成一样的,可以只修改其中一个字段么?
回复 使用道具 举报
KevinChen讲师达人认证 悬赏达人认证 SpreadJS 开发认证
论坛元老   /  发表于:2020-11-27 10:15:29
4#
您好,这个确实不支持。Wijmo的FlexGrid严格说来实际上是一个有行列逻辑依赖的传统Grid表格,展示层能实现自定义合并单元格已经是比较“非常规”操作了,如果再涉及填报,肯定会导致绑定数据关系失效。

针对您这个需求,实际上更合适的产品是SpreadJS,SpreadJs用类似Excel这种散列表的形式组织架构起来的,对数据绑定、样式控制包括单元格合并等操作都更灵活、更方便。参考:
https://demo.grapecity.com.cn/sp ... ls/cell-span/purejs
回复 使用道具 举报
dllyzs
注册会员   /  发表于:2020-11-27 10:45:04
5#
感谢回答。
回复 使用道具 举报
KevinChen讲师达人认证 悬赏达人认证 SpreadJS 开发认证
论坛元老   /  发表于:2020-11-27 11:08:27
6#
感谢反馈,本贴结帖了,有新的问题欢迎发新帖交流~
回复 使用道具 举报
您需要登录后才可以回帖 登录 | 立即注册
返回顶部