Динамическое создание Salesforce Lightning с возможностью создания и добавления события onrowselection - PullRequest
Новая
       8

Динамическое создание Salesforce Lightning с возможностью создания и добавления события onrowselection

0 голосов
/ 01 мая 2018

Мое требование - динамически создавать датируемые данные. Я могу в состоянии динамически создавать и просматривать таблицы данных молнии. Но как только я добавляю строку "onrowselection":component.getReference("c.getSelectedRecord"), datatable будет not rendering. Поэтому добавление этой строки вызывает проблему, но мне нужно подключить событие onrowselection.

Как правильно добавить onrowselection событие dynamically в мой динамически создаваемый объект данных?

Ошибка воспроизведения: Я подготовил демонстрационный код ниже.

Компонент: demoDynamicDataTable.cmp 

<aura:component controller="demoDynamicDataTableController">
    <aura:attribute name="returnList" type="Contact[]" access="public"/>
    <aura:attribute name="returnColumns" type="List" access="public"/>
    <aura:handler name="init" value="{!this}" action="{!c.doInit}" />

    <lightning:button label="Create Data Table" onclick="{!c.createDT}" variant="brand"/>

    <div aura:id="newDtPlaceholder">
        {!v.body}
    </div>
</aura:component>

Контроллер JS: demoDynamicDataTableController.js 

({
    doInit : function(component,event,helper) {
        console.log("doinit");
        //Column data for the table
        var columns = [
            {
                label:'Customer Name',
                fieldName:'Name',
                type:'text'
            },
            {
                label:'Phone#',
                fieldName:'Phone',
                type:'text'
            }
        ];
        //pass the column information
        component.set("v.returnColumns",columns);

        //recriving data from server
        helper.fetchData(component);
    },
    createDT : function(component, event, helper) {
        //Creating dynamic Lightning datatable

        var targetCmp=component.find("newDtPlaceholder");
        targetCmp.set("v.body",[]); //destroying existing one

        $A.createComponent(
            "lightning:datatable",
            {
                "data":component.get("v.returnList"),
                "columns":component.get("v.returnColumns"),
                "keyField":"Id",
                "maxRowSelection":"1",
                "onrowselection":component.getReference("c.getSelectedRecord") //adding this line is causing the issue. But I need to hookup onrowselection event
            },
            function(tbl,state,message)
            {
                console.log(state +" - " +message);
                var body=targetCmp.get("v.body");
                body.push(tbl);
                targetCmp.set("v.body",body);
            }
        );
    },
    getSelectedRecord: function(component, event, helper){ 
        var selectedRows = event.getParam('selectedRows');
        console.log(JSON.stringify(selectedRows[0]));
    }
})

Помощник: demoDynamicDataTableHelper.js 

({
    fetchData : function(cmp) {
        var action = cmp.get("c.getContact");

        action.setCallback(this,function(resp){
            var state = resp.getState();

            if(state === 'SUCCESS'){
                var records = resp.getReturnValue();
                //console.log(JSON.stringify(records));
                //pass the records to be displayed
                cmp.set("v.returnList",records);
            }
        });
        $A.enqueueAction(action);   
    }
})

Контроллер Apex: demoDynamicDataTableController.apxc 

public class demoDynamicDataTableController {
    @AuraEnabled
    public static List<Contact> getContact(){
        return [Select Id,Name,Phone from Contact];
    }
}

Приложение: demoDynamicDataTableApp.app 

<aura:application extends="force:slds">
    <c:demoDynamicDataTable/>
</aura:application>
...