В этом блоге мы узнаем, как удалить выбранную запись (Массовое удаление) при нажатии кнопки в компоненте Salesforce Lightning.
Шаги:
Действия по добавлению пользовательской кнопки и выполнению массового удаления выбранной записи.
Шаг 1: Создайте компонент молнии и добавьте следующий код.
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes" access="global" controller="accListClass" > <aura:attribute name="account" type="List"></aura:attribute> <aura:handler name="init" value="{!this}" action="{!c.accountList}"></aura:handler> <div class="slds-grid"> <div class="slds-col slds-p-horizontal_small slds-size_1-of-2 slds-medium-size_5-of-6 slds-large-size_8-of-12"></div> <div class="slds-col slds-size_1-of-8 allBtn"><lightning:button label="Delete Selected" iconName="utility:delete" iconPosition="left" variant="destructive" onclick="{!c.deleteSlctd}"> </lightning:button></div> </div> <table class="slds-table slds-table--bordered slds-table--striped slds-table--cell-buffer slds-table--fixed-layout"> <thead> <tr class="slds-text-heading--label"> <th scope="row" style="width: 50px;" class="slds-text-align--right"><ui:inputCheckbox aura:id="cbox" class="cBox" change="{!c.selectAll}"/></th> <th scope="row"><div class="slds-truncate" title="ID">ID</div></th> <th scope="row"><div class="slds-truncate" titile="NAME">Name</div></th> <th scope="row"><div class="slds-truncate" title="INDUSTRY">Industry</div></th> <th scope="row"><div class="slds-truncate" title="PHONE">Phone</div></th> </tr> </thead> <tbody> <aura:iteration items="{!v.account}" var="a"> <tr> <td><ui:inputCheckbox aura:id="cboxRow" text="{!a.Id}" class="cBox" change="{!c.changeSelectAll}"/></td> <th><div class="slds-truncate">{!a.Id}</div></th> <td><div class="slds-truncate">{!a.Name}</div></td> <td><div class="slds-truncate">{!a.Industry}</div></td> <td><div class="slds-truncate">{!a.Phone}</div></td> </tr> </aura:iteration> </tbody> </table> </aura:component>
Шаг 2: Создайте клиентский контроллер вышеупомянутого компонента и добавьте следующий код.
({ accountList : function(component, event, helper) { helper.getAccountList(component); }, selectAll: function(component,event, helper){ var slctCheck = event.getSource().get("v.value"); var getCheckAllId = component.find("cboxRow"); if (slctCheck == true) { for (var i = 0; i < getCheckAllId.length; i++) { component.find("cboxRow")[i].set("v.value", true); } } else { for (var i = 0; i < getCheckAllId.length; i++) { component.find("cboxRow")[i].set("v.value", false); } } }, changeSelectAll:function(component,event, helper){ var slctCheckRow = event.getSource().get("v.value"); var getCheckAllId = component.find("cbox"); if(slctCheckRow == false) { component.find("cbox").set("v.value", false); } }, deleteSlctd : function(component,event,helper) { var getCheckAllId = component.find("cboxRow"); var selctedRec = []; for (var i = 0; i < getCheckAllId.length; i++) { if(getCheckAllId[i].get("v.value") == true ) { selctedRec.push(getCheckAllId[i].get("v.text")); } } helper.deleteSelected(component,event,selctedRec); } })
Шаг 3: Теперь создайте вспомогательный контроллер вышеупомянутого компонента и добавьте следующий код.
({ getAccountList : function(component) { var action = component.get("c.getAccounts"); var self = this; action.setCallback(this, function(actionResult){ component.set("v.account",actionResult.getReturnValue()); }); $A.enqueueAction(action); }, deleteSelected : function(component,event,selctedRec){ var action = component.get("c.delSlctRec"); action.setParams({ "slctRec": selctedRec }); action.setCallback(this, function(response){ var state = response.getState(); if(state == "SUCCESS") { component.set("v.account",response.getReturnValue()); console.log("Successfully Deleted.."); }else if (state=="ERROR") { console.log(action.getError()[0].message); }); $A.enqueueAction(action); } })
Шаг 4. На последнем шаге создайте имя класса apex accListClass и добавьте следующий код.
public class accListClass{ @AuraEnabled public List<Account> accList = new List<Account>(); @AuraEnabled public List<Account> delRec = new List<Account>(); @AuraEnabled public static List<Account> getAccounts(String query) { accListJsClass alc = new accListJsClass(); alc.accList = Database.query('SELECT Id,Name,Phone,Industry from Account'); return alc.accList; } @AuraEnabled public static List<Account> delSlctRec(List<String> slctRec) { accListJsClass alc = new accListJsClass(); alc.delRec = [SELECT Id FROM Account WHERE Id IN: slctRec ]; try{ delete alc.delRec; } catch(Exception ex) { throw new AuraHandledException(ex.getMessage()); } alc.accList = Database.query('SELECT Id,Name,Phone,Industry from Account'); return alc.accList; } }
Вывод
Выберите всю запись. Для реализации пагинации в компоненте Lightning Нажмите здесь
Нажмите на кнопку, чтобы удалить записи:
Мы реализовали эту функцию в WedgeCommerce-In-Built-eCommerce On Salesforce.
Поддержка
Это все, что касается реализации массового удаления в компоненте Lightning. Тем не менее, если у вас есть какие-либо дополнительные вопросы или вам нужна помощь, чтобы сделать ваши классические приложения Salesforce совместимыми с Lightning, не стесняйтесь добавлять билеты, мы будем рады вам помочь. https://webkul.uvdesk.com/ru/customer/create-ticket