Salesforce Lightning数据表动态创建 - 添加onrowselection事件问题

时间:2018-05-01 12:42:10

标签: salesforce-lightning

我的要求是动态构建闪电数据。 我能够动态创建和查看闪电数据表。但是,只要我添加"onrowselection":component.getReference("c.getSelectedRecord")行,数据表就是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>

0 个答案:

没有答案