请选择 进入手机版 | 继续访问电脑版
 找回密码
 立即注册

QQ登录

只需一步，快速开始

AI搜索
首页 › SpreadJS & GcExcel专区 › 求助中心 › 查看内容
发新帖

aaaaaaaaaaaaa

注册会员

1

主题

2

帖子

17

积分

注册会员

积分
17
  • 46

    金币

  • 1

    主题

  • 2

    帖子

最新发帖

[处理中] SpreadJS18 在甘特图中，怎么添加自定义的单元格类型

aaaaaaaaaaaaa
注册会员   /  发表于：2025-11-28 09:42  /   查看：60  /  回复：3
1金币
本帖最后由 Wilson.Zhang 于 2025-12-4 14:01 编辑

产品：SpreadJS
版本：18
调研编号：GCNSJS-28105
Last Review：2025-12-04
当前进展：调研中。

在甘特图中，怎么添加自定义的单元格类型。如上没有生效是什么问题？
  1. let view = myTable1.addView("ganttView", [
  2.     // { value: "innerId", caption: "innerId", width: 50,style:{vAlign:'center',hAlign:'center'}},
  3.     { value: "taskNumber", caption: "NO", width: 50, style: { vAlign: 'center', hAlign: 'center' } },
  4.     { value: "name", caption: "Task Name", width: "3*", required: true, style: { wordWrap: true } },
  5.     { value: "duration", caption: "Duration", width: 90 },
  6.     { value: "start", caption: "startTime", width: 200 },
  7.     { value: "finishTime", caption: "finishTime", width: 200 },
  8.     { value: "predecessors", caption: "Predecessors", width: 50 },
  9.     {
  10.         value: "result", caption: "Result",
  11.         style: {
  12.             cellType: cellType2
  13.         }
  14.     },
  15.     {
  16.         value: "aaa",
  17.         caption: "aaa",
  18.         style: {
  19.             cellType: new MySelector() // 自定义的
  20.         }
  21.     },
  22.     {
  23.         value: "person", caption: "person", width: 200,
  24.         style: {
  25.             dropDowns: [{
  26.                 type: GC.Spread.Sheets.DropDownType.list,
  27.                 option: {
  28.                     items: [{ text: '选项1', value: '1' }, { text: '选项2', value: '2' }, { text: '选项3', value: '3' }],
  29.                     multiSelect: true
  30.                 }
  31.             }],
  32.             cellButtons: [{
  33.                 imageType: GC.Spread.Sheets.ButtonImageType.dropdown,
  34.                 command: 'openList',
  35.                 useButtonStyle: false,
  36.                 hoverBackColor: '#E2F3FE',
  37.             }
  38.             ]
  39.         }
  40.     }
  41. ]);

  43. ========================== MySelector ==========================
  44. import * as GC from "@grapecity-software/spread-sheets";
  45. function MySelector() {
  46.     this.typeName = 'MySelector';
  47. }

  49. MySelector.prototype = new GC.Spread.Sheets.CellTypes.Base();
  50. MySelector.prototype.paint = function (ctx, value, x, y, w, h, style, options) {
  51.     if (value) {
  52.         console.log('paint, value: ', value);
  53.     }
  54.     GC.Spread.Sheets.CellTypes.Base.prototype.paint.apply(this, [ctx, value.value, x, y, w, h, style, options]);
  55. }
  56. MySelector.prototype.updateEditor = function (editorContext, cellStyle, cellRect) {
  57.     console.log('updateEditor: ', editorContext);
  58.     if (editorContext) {
  59.         editorContext.style.width = cellRect.width + 'px';
  60.         editorContext.style.height = 200;
  61.         return { height: 200 };
  62.     }
  63. }
  64. MySelector.prototype.createEditorElement = function () {
  65.     console.log("======= createEditorElement =======");
  66.     console.log('this.typeName: ', this.typeName);
  67.     //  容器以排布输入框和选择器
  68.     var container = document.createElement('div');
  69.     container.setAttribute('gcUIElement', 'gcEditingInput');
  70.     container.setAttribute('id', 'MySelector');
  71.     container.style.backgroundColor = 'white';
  72.     container.style.overflow = 'hidden';
  73.     container.style.display = 'flex';
  74.     container.style.minHeight = "200px"
  75.     container.style.flexDirection = 'column';

  77.     //  输入框，显示或输入检索数据
  78.     var searchInput = document.createElement('input');
  79.     searchInput.placeholder = '请输入';
  80.     container.appendChild(searchInput);

  82.     //  选择器，列举各选项
  83.     var list = document.createElement('select');
  84.     list.multiple = true;
  85.     // list.overflow = 'auto';
  86.     var listItems = [
  87.         { text: '苹果', value: 'apple' },
  88.         { text: '香蕉', value: 'banana' },
  89.         { text: '橙子', value: 'orange' },
  90.         { text: '樱桃', value: 'cherry' },
  91.         { text: '西瓜', value: 'watermelon' },
  92.         { text: '葡萄', value: 'grape' },
  93.         { text: '桃子', value: 'peach' },
  94.         { text: '其他水果', value: 'ogan' }
  95.     ];
  96.     listItems.forEach(item => {
  97.         var listItem = document.createElement('option');
  98.         listItem.textContent = item.text;
  99.         listItem.value = item.value;
  100.         list.appendChild(listItem);
  101.     })
  102.     list.style.flex = "1"
  103.     list.style.minHeight = '100px';
  104.     container.appendChild(list);

  106.     // 输入框输入事件处理，实现模糊搜索
  107.     searchInput.addEventListener('input', function () {
  108.         const searchValue = this.value.toLowerCase();
  109.         console.log('search value: ', searchValue);
  110.         const options = list.options;
  111.         console.log('options: ', options);
  112.         for (let i = 0; i < options.length; i++) {
  113.             const optionText = options.textContent.toLowerCase();
  114.             if (optionText.includes(searchValue)) {
  115.                 console.log('included: ', optionText, ', ', searchValue);
  116.                 options.style.display = 'block';
  117.             } else {
  118.                 options.style.display = 'none';
  119.             }
  120.         }
  121.     });

  123.     list.addEventListener('change', function () {
  124.         const selectedOptions = Array.from(this.selectedOptions);
  125.         const selectedTexts = [];
  126.         console.log('...selectedOptions: ', selectedOptions);
  127.         selectedOptions.forEach(option => {
  128.             const item = document.createElement('span');
  129.             item.textContent = option.textContent;
  130.             selectedTexts.push(option.value);
  131.         });
  132.         console.log('selectedTexts: ', selectedTexts);
  133.         searchInput.value = selectedTexts.join(', ');
  134.     });

  136.     return container;
  137. }
  138. MySelector.prototype.getEditorValue = function (editorContext) {
  139.     console.log('getEditorValue: ', editorContext);
  140.     console.log('getEditorValue, value: ', editorContext.children[0].value);

  142.     return { value: editorContext.children[0].value };
  143. }
  144. MySelector.prototype.setEditorValue = function (editorContext, value) {
  145.     console.log('setEditorValue: ', editorContext, ', value: ', value);
  146.     editorContext.children[0].value = value ? value.value : null;
  147.     //  获取input输入框中的数据，对被选中项设置selected属性为true
  148.     if (value && value.value) {
  149.         var inputContent = value.value.split(', ');
  150.         console.log('input content: ', inputContent);
  151.         var selectList = editorContext.children[1];
  152.         Array.from(selectList.options).forEach(item => {
  153.             if (inputContent.includes(item.value)) {
  154.                 item.selected = true;
  155.             }
  156.         });
  157.     }
  158. }
  159. MySelector.prototype.isReservedKey = function (e) {
  160.     return (e.keyCode === GC.Spread.Commands.Key.tab && !e.ctrlKey && !e.shiftKey && !e.altKey);
  161. }

  163. export default MySelector;
复制代码

3 个回复

Matthew.Xue
超级版主   /  发表于：2025-11-28 11:44:05
沙发
本帖最后由 Matthew.Xue 于 2025-11-28 15:54 编辑

您好，甘特图列具体支持的属性可以参考如下文档：
https://demo.grapecity.com.cn/sp ... C.Data#styleoptions
关于自定义单元格是否支持，目前仍需调研，请耐心等待
回复 使用道具 举报
aaaaaaaaaaaaa
注册会员   /  发表于：2025-11-28 13:42:47
板凳
Matthew.Xue 发表于 2025-11-28 11:44
您好，甘特图的列不支持设置cellType，具体支持的属性可以参考如下文档：
https://demo.grapecity.com.cn/ ...

那该怎么自定义这种类型呢？
回复 使用道具 举报
Matthew.Xue
超级版主   /  发表于：2025-11-28 15:54:33
地板
aaaaaaaaaaaaa 发表于 2025-11-28 13:42
那该怎么自定义这种类型呢？

请耐心等待，我还需要调研一下这个问题，有结果了会和您及时同步
回复 使用道具 举报
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册
返回顶部