Пустая таблица, созданная с помощью Handsontable в веб-компоненте Salesforce Lightning - PullRequest
0 голосов
/ 15 мая 2019

Я пытаюсь внедрить handsonTable в молниеносный веб-компонент Salesforce. Я понимаю, что аудитория здесь может не обладать знаниями 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 Components (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);
    }
}

и HTML-код LWC как

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

Применяя их, я получаю результат, приведенный ниже в Salesforce image

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>

Как вы можете видеть, структура DOM генерируется для handsonTable, но никакие данные или столбцы не генерируются. Я не вижу ошибок или предупреждений в консоли Chrome Dev Tools (кроме предупреждения о лицензии из таблицы handson)

Одно наблюдение, которое я обнаружил, заключается в том, что количество строк, кажется, отражает то, что мы видим на экране.

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

Мне удалось опубликовать реализацию на общедоступном URL-адресе. Вы можете получить доступ к моей реализации на https://sandbox -business-java-1763-16aaf9f33bb.cs6.force.com / Я добавил отладчик в начале функции initialiseHandsOnTable, чтобы помочь.

Любая помощь будет принята с благодарностью.

1 Ответ

0 голосов
/ 17 мая 2019

Проблема может быть связана с сервисом Salesforce Locker. Сервис Locker ограничивает область DOM-навигации и манипуляций, разрешенных компонентами.

При отладке скрипта мы обнаружили, что функция isVisible (elem) пыталась пройти весь путь до HTML-узла верхнего уровня (который был заблокирован службой блокировки). Ответ в 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;

Теперь решение работает.

...