Молния: датируемая InfiniteLoading запускается по событию щелчка вместо прокрутки

Question

У меня есть молния:datatable, который мне нужен для загрузки данных, когда пользователь прокручивает. Я обнаружил, что событие onloadmore вызывается, когда пользователь щелкает строку таблицы, а не когда пользователь прокручивает таблицу.

Более того, как только onloadmore запущен, он продолжает вызывать до загрузки всех записей в базе данных.

Может кто-нибудь помочь мне понять, почему это и обходной путь? Любая помощь будет принята с благодарностью.

Чтобы проверить, как вызывается функция loadMoreData, откройте инспектор и проверьте консоль после нажатия на строку.

Вот пример:

testDataTable.cmp

<aura:component implements="flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId" access="global" controller="ContactController">
    <aura:attribute name="data" type="Object"/>
    <aura:attribute name="columns" type="List"/>
    
    <aura:attribute name="rowsToLoad" type="Integer" default="10"/>
    <aura:attribute name="enableInfiniteLoading" type="Boolean" default="false"/>
    <aura:attribute name="loadMoreOffset" type="Integer" default="5"/>
    <aura:attribute name="loadMoreStatus" type="String" default=""/>
    
    <!-- handlers-->
    <aura:handler name="init" value="{! this }" action="{! c.doInit }"/>
    
    <lightning:card title="testDataTableCard">
        <lightning:datatable
          keyField="Id"
          data="{! v.data }"
          columns="{! v.columns }"
          enableInfiniteLoading="{! v.enableInfiniteLoading }"
          onloadmore="{! c.loadMoreData }"/>
    </lightning:card>
</aura:component>

testDataTableController.js

({
 doInit : function(component, event, helper) {
  component.set('v.columns', [
            {label: 'Id', fieldName: 'Id', type: 'text'},
         {label: 'LastName', fieldName: 'LastName', type: 'text'}
        ]);
        
        helper.loadContacts(component, event, helper);
 },
    
    loadMoreData: function(component, event, helper) {
        console.log('loadMoreData called');
    }
})

testDataTableHelper.js

({
  loadContacts : function(component, event, helper) {
    var action = component.get("c.getContacts");
    action.setStorable();
    action.setCallback(this,function(response) {
        var state = response.getState();
        if (state === "SUCCESS") {
            var records = response.getReturnValue();
            component.set("v.data", records);
            component.set("v.enableInfiniteLoading", true);
        } else {
            console.log('ERROR');
        }
    });
    $A.enqueueAction(action);
  }
})

ContactController.class

public class ContactController {
  @AuraEnabled
  public static List<Contact> getContacts() {
      return[Select Id, LastName From Contact Limit 10];
  }
}

Библиотека компонентов Lightning: lightning: датируемая бесконечная загрузка

Answer 1

У меня была аналогичная проблема с моим DataTable, когда мне нужно было показать только несколько записей, возможно, это вам тоже поможет.

Когда я устанавливаю атрибут isLoading элемента DataTable, он показывает счетчик где-то внутри всех div, которые создает DataTable. Но высота счетчика была больше, чем высота элемента данных, используемого во внутреннем вычислении, следует ли запускать функцию обратного вызова loadMore, поэтому он отключает ее снова и снова...

Способ, которым он остановил бесконечный цикл для меня, заключался в том, чтобы постоянно держать isLoading на false. Вы можете реализовать свой собственный счетчик как наложение на всю таблицу, которое не будет инициировать пересчет высоты.

Опять же, это решение характерно для случаев, когда в таблице отображается только несколько элементов, поэтому изображение счетчика больше, чем таблица. Если вы используете модальное окно или какой-либо другой контейнер, попробуйте явно установить высоту, как предложил Андрей:

<div style="height:500px">
    <lightning:datatable
        data="{!v.data}"
        ...
        />
</div>

Вы можете найти список поддерживаемых атрибутов здесь

Answer 2

Для исправления бесконечности onloadmore вы должны обернуть свой datatable в div с фиксированной абсолютной высотой.