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

收藏

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

自定义行操作Check，option对象内iconSelector(item: any, index)方法内[item.Id]为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[item.Id];
},
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[CheckRow] = {
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[id] = !checkMap[id];
return true;
},
};
};

复制代码

Joestar.Xu · Joestar.Xu

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

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

老赵头 · 老赵头

本帖最后由老赵头于 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 · Joestar.Xu

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

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

老赵头 · 老赵头

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

Joestar.Xu 发表于 2024-10-29 17:30
您提供的Demo无法直接运行，我将其中部分代码整合到之前的代码中后测试了一下，没有发现明显的问题，勾选功 ...

我新建了个可本地运行的模板工程已上传，问题仍可复现：options对象内iconSelector(item: any, index)方法里打印[item.Id]为undefined，点击勾选框不能切换为选中状态。

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

Joestar.Xu · Joestar.Xu

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

image.png342064513.png

老赵头 · 老赵头

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

要替换LicenseKey

Joestar.Xu · Joestar.Xu

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

1、升级版本至17.1.7

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

请参考附件。

老赵头 · 老赵头

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

1、升级版本至17.1.7

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

Joestar.Xu · Joestar.Xu

您好，我这边在V16版本中测了一下，没有找到相关的方案实现，猜测是一个旧版本的Bug，只能通过升级来修复。

		自动登录	找回密码
密码			立即注册

[处理中] tablesheet自定义行操作iconSelector无法获取item值

9 个回复

SpreadJS 认证

SpreadJS 高级认证