lightning动态显示/隐藏列的数据表(三)

lightning动态显示/隐藏列的数据表(三)

今天， 我们将学习，如何显示具有列选项功能的自定义数据表，或者如何在salesforce lightning组件汇总动态显示/隐藏数据列表

1. 第一步，创建Apex Class :

tableWithManageCtrl

    public class tableWithManageCtrl {
    @AuraEnabled
    public static List < account > fetchAccount() {
        
        List < Account > returnList = new List < Account > ();
        
        for (Account acc: [select id, Name, Type, Industry, Phone, Fax from account LIMIT 10]) {
            returnList.add(acc);
        }
        return returnList;
    }
}

2. 创建子级 lightning组件：

auraIfContains.cmp

<aura:component >
    <aura:handler name="init" value="{!this}" access="global" action="{!c.doInit}" />
    <aura:attribute name="list" type="string[]" />
    <aura:attribute name="element" type="String" />
    <aura:attribute name="condition" type="Boolean" />
    <aura:handler name="change" value="{!v.list}" action="{!c.doInit}"/>
    
    <aura:if isTrue="{!v.condition}">
        {!v.body}
    </aura:if>
</aura:component>

auraIfContainsController.js

({
    doInit: function(component, event, helper) {
        var getList = component.get('v.list'); 
        var getElement = component.get('v.element');
        var getElementIndex = getList.indexOf(getElement);
        
        if(getElementIndex != -1){ 
            component.set('v.condition',true);
        }else{
            component.set('v.condition',false);
        }
    },
})
 

3. 创建父级lightning组件：

dataTableWithDynamicCol.cmp

<aura:component controller="tableWithManageCtrl" implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
     <aura:handler name="init" value="this" action="{!c.doInit}"/>
     <aura:attribute name="searchResult" type="List" description="use for store and display account list return from server"/>
     <aura:attribute name="options"
                      type="List"
                      default="[
                               {'label': 'Type', 'value': 'Type'},
                               {'label': 'Industry', 'value': 'Industry'},
                               {'label': 'Phone', 'value': 'Phone'},
                               {'label': 'Fax', 'value': 'Fax'},
                               ]"/>
    
    <aura:attribute name="selectedValues" type="List" default="Name"/>
    <aura:attribute name="isOpen" type="boolean" default="false"/>
        
  <!--Use aura:if tag to display Model Box, on the bese of conditions. [isOpen boolean attribute] -->   
    <aura:if isTrue="{!v.isOpen}">
   <!--###### MODAL BOX Start From Here ######--> 
      <div role="dialog" tabindex="-1" aria-labelledby="header99" class="slds-modal slds-fade-in-open ">
        <div class="slds-modal__container">
          <!-- ###### MODAL BOX HEADER Part Start From Here ######-->
          <div class="slds-modal__header">
            <button class="slds-button slds-modal__close slds-button--icon-inverse" title="Close" onclick="{!c.closeModel}">
              X
            <span class="slds-assistive-text">Close</span>
            </button>
            <h2 id="header99" class="slds-text-heading--medium">Manage Table Columns</h2>
          </div>
          <!--###### MODAL BOX BODY Part Start From Here ######-->
          <div class="slds-modal__content slds-p-around--medium">
              <div class="slds-p-around_medium">
                  <lightning:checkboxGroup aura:id="mygroup"
                                           name="checkboxGroup"
                                           label="Manage Cloumn"
                                           options="{! v.options }"
                                           value="{! v.selectedValues }"
                                           />
              </div>  
            </div>
          <!--###### MODAL BOX FOOTER Part Start From Here ######-->
          <div class="slds-modal__footer">
             <button class="slds-button slds-button--neutral" onclick="{!c.closeModel}" >Done</button>
          </div>
        </div>
      </div>
      <div class="slds-backdrop slds-backdrop--open"></div>
      <!--###### MODAL BOX Part END Here ######-->
 </aura:if>
    
    <div class="slds-m-around--large">  
        <!--###### lightning button icon for show/hide columns popup ######-->	
        <div class="slds-clearfix">
            <div class="slds-float_right">
               <lightning:buttonIcon size="large" onclick="{!c.openModel}" iconName="utility:matrix" variant="bare" title="manage table columns" alternativeText="Settings" iconClass="dark"/>
            </div>
        </div>
     
        <br/><br/> 
	  <!--###### lightning data table start ######-->		
      <table class="slds-table slds-table_bordered slds-table_cell-buffer">
         <thead>
            <tr class="slds-text-title_caps">
                <th scope="col">
                    <div class="slds-truncate" title="Account Name">Account Name</div>
                </th>                
				<!--###### the value of element attribute in child component must be same as checkboxGroup value  ######-->		 
                <c:auraIfContains list="{!v.selectedValues}"  element="Type"> 
                    <th scope="col"><div class="slds-truncate" title="Type">Type</div></th>
                </c:auraIfContains>
                <c:auraIfContains list="{!v.selectedValues}"  element="Industry">
                    <th scope="col"><div class="slds-truncate" title="Industry">Industry</div></th>
                </c:auraIfContains>
                <c:auraIfContains list="{!v.selectedValues}"  element="Phone">
                    <th scope="col"><div class="slds-truncate" title="Phone">Phone</div></th>
                </c:auraIfContains>
                <c:auraIfContains list="{!v.selectedValues}"  element="Fax">
                    <th scope="col"><div class="slds-truncate" title="Fax">Fax</div></th>
                </c:auraIfContains>
            </tr>
         </thead>
         <tbody>
        
            <!--### display all records of searchResult attribute by aura:iteration ###-->
            <aura:iteration items="{!v.searchResult}" var="acc">
               <tr>
                
                 <td><div class="slds-truncate">{!acc.Name}</div></td>
                 <c:auraIfContains list="{!v.selectedValues}"  element="Type">  
                   <td><div class="slds-truncate">{!acc.Type}</div></td>
                 </c:auraIfContains>
                 <c:auraIfContains list="{!v.selectedValues}"  element="Industry"> 
                   <td><div class="slds-truncate">{!acc.Industry}</div></td>
                 </c:auraIfContains>
                 <c:auraIfContains list="{!v.selectedValues}"  element="Phone"> 
                   <td><div class="slds-truncate">{!acc.Phone}</div></td>
                 </c:auraIfContains>
                 <c:auraIfContains list="{!v.selectedValues}"  element="Fax">   
                   <td><div class="slds-truncate">{!acc.Fax}</div></td>
                 </c:auraIfContains>
               </tr>
            </aura:iteration>
         </tbody>
      </table>
   </div>
 
</aura:component>

dataTableWithDynamicColController.js

({
    doInit: function(component, event, helper) {
        var action = component.get("c.fetchAccount");
        action.setCallback(this, function(response) {
            var state = response.getState(); 
            if (state === "SUCCESS") {
                var storeResponse = response.getReturnValue();
                // 设置searchResult列表与返回值从服务器。
                component.set("v.searchResult", storeResponse);
            }
            
        });
        $A.enqueueAction(action);
    },
    openModel: function(component, event, helper) {
        // 对于显示模型，将“isOpen”属性设置为“true”
        component.set("v.isOpen", true);
    },
    
    closeModel: function(component, event, helper) {
        // 对于隐藏/关闭模型，将“isOpen”属性设置为“Fasle”
        component.set("v.isOpen", false);
    },
})

4. 创建用于测试的Lightning应用程序：

test.app

<aura:application extends="force:slds">
    <!-- 这里c:是org。默认名称空间前缀-->
    <c:dataTableWithDynamicCol/>
</aura:application>
 

显示