在 Salesforce Lightning Web 组件中使用 Handsontable 生成的空 table

Question

我正在尝试在 salesforce lightning web 组件中实现 handsonTable。我知道在座的观众可能不了解Salesforce，但希望共同努力找出问题所在。

下面是从示例中提取的非常基本的实现，但极其简化。


<head>
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/handsontable@latest/dist/handsontable.full.min.css">
    <link rel="stylesheet" type="text/css" href="https://handsontable.com/static/css/main.css">
    <script src="https://cdn.jsdelivr.net/npm/handsontable@latest/dist/handsontable.full.min.js"></script>
</head>

<body>
    <div id="hot"></div>
    <script>
        var dataObject = [{
            id: 1,
            currency: 'Euro'
        }, {
            id: 2,
            currency: 'Japanese Yen'
        }];
        var hotElement = document.querySelector('#hot');
        var hotElementContainer = hotElement.parentNode;
        var hotSettings = {
            data: dataObject,
            columns: [{
                data: 'id',
                type: 'numeric',
                width: 40
            }, {
                data: 'currency',
                type: 'text'
            }],
            rowHeaders: true,
            colHeaders: [
                'ID',
                'Currency'
            ]
        };
        var hot = new Handsontable(hotElement, hotSettings);
    </script>
</body>

</html>

为了在 Salesforce Lightning Web 组件 (LWC) 中使用外部库，我使用了 https://developer.salesforce.com/docs/component-library/documentation/lwc/lwc.create_third_party_library

中提到的格式

将上面的 HTML 代码修改为提到的格式，我得到了 LWC JS 文件

import { LightningElement } from 'lwc';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
import { loadScript, loadStyle } from 'lightning/platformResourceLoader';
import handsonTableResource from '@salesforce/resourceUrl/handsonTable';

export default class handsonTable extends LightningElement {
    dataObject = [
        {
          id: 1,
          currency: 'Euro'
        },
        {
          id: 2,
          currency: 'Japanese Yen'
        }
    ];

    renderedCallback() {
        Promise.all([
            loadScript(this, handsonTableResource + '/handsontable.full.js'),
            loadStyle(this, handsonTableResource + '/handsontable.full.css')
        ])
        .then(() => {
            this.initialiseHandsOnTable();
        })
        .catch(error => {
            alert(error);
        });
    }

    hotElement;
    hotSettings;
    initialiseHandsOnTable() {
        this.hotElement = this.template.querySelector('div.hotElement');
        this.hotSettings = {
            data: this.dataObject,
            columns: [
                {
                    data: 'id',
                    type: 'numeric',
                    width: 40
                },
                {
                    data: 'currency',
                    type: 'text'
                }
            ],
            rowHeaders: true,
            colHeaders: [
                'ID',
                'Currency'
            ]
        };
        new Handsontable(this.hotElement, this.hotSettings);
    }
}

和 LWC html 作为

<template>
    <div class="slds-m-around_medium">
        <div class="hotElement" lwc:dom="manual"></div>
    </div>
</template>

应用这些，在 Salesforce 中得到如下结果
_{（来源：handsontable.com）}

生成的DOM如下

<c-handson-table data-data-rendering-service-uid="188" data-aura-rendered-by="322:0">
    <div class="slds-m-around_medium">
        <div class="hotElement handsontable htRowHeaders htColumnHeaders" id="ht_917e38abdce11495">
            <div class="ht_master handsontable" style="position: relative; overflow: visible;">
                <div class="wtHolder" style="position: relative; overflow: visible;">
                    <div class="wtHider">
                        <div class="wtSpreader" style="position: relative;">
                            <table class="htCore">
                                <colgroup></colgroup>
                                <thead>
                                    <tr></tr>
                                </thead>
                                <tbody></tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
            <div class="ht_clone_top handsontable" style="position: absolute; top: 0px; left: 0px; overflow: hidden;">
                <div class="wtHolder" style="position: relative;">
                    <div class="wtHider">
                        <div class="wtSpreader" style="position: relative;">
                            <table class="htCore">
                                <colgroup></colgroup>
                                <thead>
                                    <tr></tr>
                                </thead>
                                <tbody></tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
            <div class="ht_clone_bottom handsontable" style="position: absolute; top: 0px; left: 0px; overflow: hidden;">
                <div class="wtHolder" style="position: relative;">
                    <div class="wtHider">
                        <div class="wtSpreader" style="position: relative;">
                            <table class="htCore">
                                <colgroup></colgroup>
                                <thead>
                                    <tr></tr>
                                </thead>
                                <tbody></tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
            <div class="ht_clone_left handsontable" style="position: absolute; top: 0px; left: 0px; overflow: hidden;">
                <div class="wtHolder" style="position: relative;">
                    <div class="wtHider">
                        <div class="wtSpreader" style="position: relative;">
                            <table class="htCore">
                                <colgroup></colgroup>
                                <thead>
                                    <tr></tr>
                                </thead>
                                <tbody></tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
            <div class="ht_clone_top_left_corner handsontable" style="position: absolute; top: 0px; left: 0px; overflow: hidden;">
                <div class="wtHolder" style="position: relative;">
                    <div class="wtHider">
                        <div class="wtSpreader" style="position: relative;">
                            <table class="htCore">
                                <colgroup></colgroup>
                                <thead>
                                    <tr></tr>
                                </thead>
                                <tbody></tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div id="hot-display-license-info">The license key for Handsontable is missing. Use your purchased key to activate the product. Alternatively, you can activate Handsontable to use for non-commercial purposes by passing the key: 'non-commercial-and-evaluation'. <a target="_blank" href="https://handsontable.com/docs/tutorial-license-key.html">Read more</a> about it in the documentation or contact us at <a href="mailto:support@handsontable.com">support@handsontable.com</a>.</div>
    </div>
</c-handson-table>

如您所见，正在为 handsonTable 生成 DOM 结构，但正在生成数据或列的 none。我在 Chrome 开发工具控制台上没有看到任何错误或警告（除了来自 handson table 的许可警告）

我发现的一个观察结果是行数似乎反映了我们在屏幕上看到的内容。

a.countRows();
--> 2
a.countEmptyRows();
--> 0
a.countVisibleRows();
--> -1
a.countRenderedRows();
--> -1

我已经能够在面向 URL 的 public 上发布实现。您可以在 https://sandbox-business-java-1763-16aaf9f33bb.cs6.force.com/ 访问我的实现我在 initialiseHandsOnTable 函数的开头添加了一个调试器来提供帮助。

如有任何帮助，我们将不胜感激。

Answer 1

问题可能出在 Salesforce Locker Service 上。储物柜服务限制了组件允许的 DOM 导航和操作范围。

调试脚本我们发现 isVisible(elem) 函数试图一直导航到顶层 HTML 节点（被 Locker 服务阻止）。 https://forum.handsontable.com/t/handsontable-within-the-salesforce-locker-service/1014 的回答有助于解决这个问题。

我们更新了 isVisible(elem) 函数如下：

改变 next = next.parentNode; 至

if(next.parentNode != null)
 next = next.parentNode;
else
return true;

现在，解决方案有效了。

在 Salesforce Lightning Web 组件中使用 Handsontable 生成的空 table

Empty table generated with Handsontable in Salesforce Lightning Web component

salesforce

handsontable

salesforce-lightning