Question

我有一个要求，我需要根据Object，从组件传递的字段以及在vf页面中显示的方式在闪电中显示动态表。

我尝试了以下代码：

应用

<aura:application access="GLOBAL" extends="ltng:outApp"    >
    <c:PMD_LightningHomepage object="Opportunity" fields="Id" limit="5" tableId="table1"/>
    <aura:dependency resource="c:PMD_LightningHomepage "  /> 
</aura:application>

组件

<aura:component controller="controller" implements="force:appHostable,flexipage:availableForAllPageTypes">
    <ltng:require styles="/resource/SDLC212/assets/styles/salesforce-lightning-design-system-vf.min.css" />
    <aura:attribute name="object" type="String" />
    <aura:attribute name="limit" type="String" default="5" />
    <aura:attribute type="sObject[]" name="latestRecords" />
    <aura:attribute name="fields" type="String[]" default="Id,Name" />
    <aura:attribute name="tableId" type="String"/>
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>

    <html xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">    
        <head>
        </head>    
        <body> 
            <div class="wrapperscoop">                
                <div class="slds-card__header slds-grid">
                    <div class="slds-media slds-mcate">
                        <div class="slds-media__figure">                           
                        </div>
                        <div class="slds-media__body">
                            <h2 class="slds-text-heading--small slds-truncate">Recently Viewed</h2>
                        </div>
                    </div>                   
                </div>
                <div class="slds-card__body">                    
                    <section class="slds-card__body">
                        <div class="slds-scrollable--x">
                            <table class="slds-table slds-table--bordered slds-max-medium-table--stacked-horizontal">
                                <thead>
                                    <tr class="slds-no-hover">
                                        <aura:iteration items="{!v.fields}" var="field" >
                                            <th class="slds-text-heading--label slds-size--1-of-6" scope="col">{!field}</th>
                                        </aura:iteration>
                                    </tr>
                                </thead>
                                <tbody id="{!v.tableId}">
                              </tbody>

                            </table>
                        </div>
                    </section>
                </div>
            </div>            
        </body>
    </html>
</aura:component>

JS-控制器

({
    doInit  : function(component, event, helper) {
        var action = component.get("c.getRecords");
        var fields = component.get("v.fields");  
        var tableId = component.get("v.tableId"); 
        action.setParams({
            ObjectName : component.get("v.object"),
            limits : component.get("v.limit"),
            //alert('Check1' + fields);
            fieldstoget : fields.join()
        });

        action.setCallback(this,function(response){
            var delayMillis = 1000;
            var state = response.getState();
            if(state === 'SUCCESS'){
                component.set("v.latestRecords",response.getReturnValue());
                var retRecords = response.getReturnValue();
                retRecords.forEach(function(s) {
                    var tableRow = document.createElement('tr');
                    fields.forEach(function(field){ 
                        var tableData = document.createElement('td');
                        var tableDataNode = document.createTextNode(s[field]);
                        tableData.appendChild(tableDataNode);
                        tableRow.appendChild(tableData);
                    });
                    // alert(tableId);
                    //alert('tableval' + document.getElementById(tableId) );
                    setTimeout(function() {

                        alert(document.getElementById(component.get("    {!v.tableId}")));
                   document.getElementById(component.get("{!v.tableId}")).appendChild(tableRow);
                 }, delayMillis);

                });
            }else if (state === "ERROR") {
                console.log('Error');
            }          
        });
       $A.enqueueAction(action);

    }
})

但是当我尝试从Vf页面调用它时，它无法获取div id并将其读取为null并因此显示以下错误：

错误：

此页面有错误。您可能只需要刷新它。错误 $ A.getCallback（）[无法读取null的属性'appendChild']回调失败：apex：// PMD_DispRecordsController / ACTION $ getRecords失败 descriptor：{markup：// c：PMD_LightningHomepage}

我做错了什么？

注意：当我不从Vf页面调用它时，此组件正常工作，即直接预览。

需要在闪电中创建动态表

0 个答案: