Я пытаюсь внедрить 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
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, чтобы помочь.
Любая помощь будет принята с благодарностью.