问题描述
我有一个要求,我需要显示客户记录列表,并且每个客户记录都应保留其联系记录,并且每个联系记录在下面的单独行中还将包含一些其他信息。 我想在每个帐户记录上都有一个可协作的buttonicon并联系reocrds。当我单击“客户记录可折叠”按钮时,它应该显示或隐藏其联系人,类似地,当我单击联系人的可折叠图标时,它应该显示或隐藏其下方的一些联系人。 这是我的示例代码。
<aura:component implements="flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId" controller="Accountcon" access="global" >
<aura:attribute name="accounts" type="Account[]"></aura:attribute>
<aura:handler name="init" value="{!this}" action="{!c.doInit}"></aura:handler>
<table class="slds-table slds-table_cell-buffer slds-table_bordered">
<tr class="slds-line-height_reset">
<tr class="slds-truncate" ><b>Show</b></tr>
<td class="slds-truncate" ><b>Name</b></td>
<td class="slds-truncate" ><b>Type</b></td>
</tr>
<aura:iteration items="{!v.accounts}" var="ac" indexVar="myLocindex">
<tr class="slds-hint-parent">
<td> <lightning:buttonIcon value="{!myLocindex}" iconName="{!ac.expanded?'utility:chevronright':'utility:chevrondown'}" onclick="{!c.toggle}" ></lightning:buttonIcon>
</td>
<td class="slds-truncate">{!ac.Name}</td>
<td class="slds-truncate">{!ac.Type}</td>
</tr>
<aura:if isTrue="{!ac.expanded}">
<tr class="slds-line-height_reset">
<td class="slds-truncate" ><b>show</b></td>
<td class="slds-truncate" ><b>Last Name</b></td>
<td class="slds-truncate" ><b>Email</b></td>
</tr>
<b>Contact details</b>
<aura:iteration items="{!ac.Contacts}" var="con">
<tr class="slds-hint-parent">
<td> <lightning:buttonIcon value="{!myLocindex}" iconName="{!ac.expanded?'utility:chevronright':'utility:chevrondown'}" onclick="{!c.toggle}" ></lightning:buttonIcon>
</td>
<td class="slds-truncate">
{!con.LastName}</td>
<td class="slds-truncate">{!con.email}</td>
</tr>
<tr>this section should be shown or hidden onclick of collapsible button on the contact record </tr>
</aura:iteration>
</aura:if>
</aura:iteration>
</table>
</aura:component>
Controller.js
({
doInit : function(component,event,helper) {
var action = component.get("c.getacct");
action.setCallback(this,function(action){
component.set("v.accounts",action.getReturnValue());
});
$A.enqueueAction(action);
},toggle :function(component,helper){
var items = component.get("v.accounts");
var index = event.getSource().get("v.value");
items[index].expanded = !items[index].expanded;
component.set("v.accounts",items);
}
})
Apex class:
public class AccountsController {
@AuraEnabled
public static List <Account> getAccounts() {
return [SELECT Id,name,industry,Type,NumberOfEmployees,TickerSymbol,Phone,(select name,email,phone from contacts) FROM Account ORDER BY createdDate ASC limit 10];
}
}
在我的代码中,当我单击联系人中的可折叠图标时,它会隐藏整个联系人部分。任何帮助,将不胜感激。 谢谢。
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)