我的要求是动态构建闪电数据。
我能够动态创建和查看闪电数据表。但是,只要我添加"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>