老赵头 发表于 2024-10-25 15:18:23

tablesheet自定义行操作iconSelector无法获取item值

本帖最后由 老赵头 于 2024-10-25 17:18 编辑

自定义行操作Check,option对象内iconSelector(item: any, index)方法内为undefined,导致勾选状态无法写入。


请查看93行和123行的打印值

const initSpread = function (spread) {
    spreadEntity = spread;
    spread.suspendPaint();
    spread.clearSheets();
    spread.options.autoFitType = GC.Spread.Sheets.AutoFitType.cellWithHeader; // 列宽自适应

    // init a data manager
    const dataManager = spread.dataManager();
    spread.options.allowDynamicArray = true; // 是否启用动态数组
    const myTable = dataManager.addTable('myTable', {
      batch: false,
      autoSync: false,
      data:[
    {
      empNo: 'DE001',
      Id: 1,
      stringType: 'Jone',
      numberType: 90.012,
      currencyType: 8.5,
      urlLink: 'http://www.baidu.com',
      phone: '(123)555-0100',
      selectType: 1,
      dateType: '2019-07-04',
      credit: '30,25',
      createTimeType: null,
      isFinished: 'Yes',
      isEncouraged: 'True',
      checkboxType: true,
      buttonList: undefined,
      radioButtonList: 0,
    },
    {
      empNo: 'DE002',
      Id: 2,
      stringType: 'Tom',
      numberType: 90.012,
      currencyType: 8.5,
      urlLink: 'http://www.baidu.com',
      phone: '(123)555-0101',
      selectType: 2,
      dateType: '2019-07-04',
      credit: '30,25',
      createTimeType: null,
      isFinished: 'Yes',
      isEncouraged: 'True',
      checkboxType: false,
      checkboxTypeButton: false,
    },
    {
      empNo: 'DE003',
      Id: 3,
      stringType: 'Kotas',
      numberType: 90.012,
      currencyType: 8.5,
      urlLink: 'http://www.baidu.com',
      phone: '(123)555-0101',
      selectType: 1,
      dateType: '2019-07-04',
      credit: '30,25',
      createTimeType: null,
      isFinished: 'No',
      isEncouraged: 'False',
      checkboxType: true,
      checkboxTypeButton: true,
    }
],
      schema: {},
    });

    // init a table sheet
    const sheet = spread.addSheetTab(
      0,
      config.sheetName || 'Sheet1',
      GC.Spread.Sheets.SheetType.tableSheet,
    );

    // actions
    const rowActions = GC.Spread.Sheets.TableSheet.BuiltInRowActions;
    const options = sheet.rowActionOptions();
    if (config.allowDelete) {
      options.push(rowActions.removeRow);
    }
    if (config.allowChecked) {
      options.push({
      name: 'check',
      icons: [
          'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iMTIiIHZpZXdCb3g9IjAgMCAxMiAxMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjEyIiBoZWlnaHQ9IjEyIiBmaWxsPSJ0cmFuc3BhcmVudCIvPgo8cmVjdCB3aWR0aD0iMTIiIGhlaWdodD0iMTIiIGZpbGw9InRyYW5zcGFyZW50Ii8+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMTIgMEgwVjEySDEyVjBaTTEgMTFWMUgxMVYxMUgxWiIgZmlsbD0iIzY2NjY2NiIvPgo8L3N2Zz4K',
          'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iMTIiIHZpZXdCb3g9IjAgMCAxMiAxMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjEyIiBoZWlnaHQ9IjEyIiBmaWxsPSJ0cmFuc3BhcmVudCIvPgo8cmVjdCB3aWR0aD0iMTIiIGhlaWdodD0iMTIiIGZpbGw9InRyYW5zcGFyZW50Ii8+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMTIgMEgwVjEySDEyVjBaTTEgMTFWMUgxMVYxMUgxWiIgZmlsbD0iIzY2NjY2NiIvPgo8cGF0aCBkPSJNNS4yNSA5TDIgNS42MTI5TDMuMDA3MTQgNC41NjMyOEw1LjI1IDYuODkzM0w4Ljk4NTcxIDNMMTAgNC4wNDk2M0w1LjI1IDlINS4yNVoiIGZpbGw9IiM2NjY2NjYiLz4KPC9zdmc+Cg==',
      ],
      tooltip: 'Check/Uncheck',
      iconSelector(item, index) {

          console.log('item:', item, 'item.Id:', item.Id); // item: {YTi: currentIndex} item.Id:undefined

          return !!checkMap;
      },
      command: CheckRow,
      });
    }

    sheet.rowActionOptions(options);

    // bind a view to the table sheet
    myTable.fetch().then(function () {
      const view = myTable.addView('myView', tableViewTransfer(config.columns));
      sheet.setDataView(view);
    });

    spread.resumePaint();
};



......


const registerCommands = () => {
    const { Commands } = GC.Spread.Sheets;
    Commands = {
      canUndo: false,
      execute(context, options) {
      const id = options.item.Id;
      console.log('options.item.Id:', options.item.Id); // options.item.Id: 1、2、3
      checkMap = !checkMap;

      return true;
      },
    };
};





Joestar.Xu 发表于 2024-10-28 10:29:10

您好,需要和您明确一下,您目前想要实现的效果是什么样子的?

另外,我尝试在本地运行您的代码,但是发现您提供的代码中没有关于config的定义。

老赵头 发表于 2024-10-29 11:19:01

本帖最后由 老赵头 于 2024-10-29 11:41 编辑

Joestar.Xu 发表于 2024-10-28 10:29
您好,需要和您明确一下,您目前想要实现的效果是什么样子的?

另外,我尝试在本地运行您的代码,但是发 ...
想要实现的效果是可自定义操作实现行数据的勾选与反选,并实时变量保存已勾选的完整行数待批量操作。基于https://demo.grapecity.com.cn/spreadjs/SpreadJSTutorial/features/table-sheet/row-action/custom/react 实现。

完整代码已上传,请替换LicenseKey后运行。


Joestar.Xu 发表于 2024-10-29 17:30:03

您提供的Demo无法直接运行,我将其中部分代码整合到之前的代码中后测试了一下,没有发现明显的问题,勾选功能什么的都是正常的。


如果你希望在删除了行以后checkMap和checkedList中的对应行也删除,需要您重写rowActions.removeRow的逻辑来实现。

老赵头 发表于 2024-10-30 10:06:55

本帖最后由 老赵头 于 2024-10-30 10:10 编辑

Joestar.Xu 发表于 2024-10-29 17:30
您提供的Demo无法直接运行,我将其中部分代码整合到之前的代码中后测试了一下,没有发现明显的问题,勾选功 ...我新建了个可本地运行的模板工程已上传,问题仍可复现:options对象内iconSelector(item: any, index)方法里打印为undefined,点击勾选框不能切换为选中状态。

“如果你希望在删除了行以后checkMap和checkedList中的对应行也删除,需要您重写rowActions.removeRow的逻辑来实现”-- ok

Joestar.Xu 发表于 2024-10-30 16:02:55

您好,这个Demo我下载下来后运行发现有这个报错,可以请您确认一下吗?

老赵头 发表于 2024-10-30 16:07:27

Joestar.Xu 发表于 2024-10-30 16:02
您好,这个Demo我下载下来后运行发现有这个报错,可以请您确认一下吗?

要替换LicenseKey

Joestar.Xu 发表于 2024-10-30 16:53:23

您好,我这边测试了一下,要实现选中的效果:

1、升级版本至17.1.7

2、将注册命令提前到initSpread最前面

请参考附件。

老赵头 发表于 2024-10-30 16:54:57

Joestar.Xu 发表于 2024-10-30 16:53
您好,我这边测试了一下,要实现选中的效果:

1、升级版本至17.1.7


您好,我们这边只购买了16版本的版权,请问16版本有什么方法实现吗?

Joestar.Xu 发表于 2024-10-31 09:52:50

您好,我这边在V16版本中测了一下,没有找到相关的方案实现,猜测是一个旧版本的Bug,只能通过升级来修复。
页: [1] 2
查看完整版本: tablesheet自定义行操作iconSelector无法获取item值