Salesforce How To Refresh Page Data in Lightning Web Component(一)

Lightning Web组件中通常使用wire取得数据，当条件发生变更时才会刷新，JS中提供另一种方法【refreshApex()】来刷新页面。

代码语言：javascript复制

import { refreshApex } from '@salesforce/apex';

下边例子，在使用wire取得的数据保存在变量【wiredRecordList 】中，通过点击刷新按钮，调用以下方法进行数据刷新

数据取得(wire)

代码语言：javascript复制

@wire(getContactListView, {refreshFlag : '$refreshFlag'})
 wireRecords(result) {
     this.wiredRecordList = result;
 }

刷新按钮(refresh)

代码语言：javascript复制

refresh() {
    refreshApex(this.wiredRecordList);
}

------------------------------------------------------------------------------------------------------

MC_ContactListViewController.cls

代码语言：javascript复制

public with sharing class MC_ContactListViewController {
    @AuraEnabled(cacheable=true)
    public static List<ContactWrapper> getContactListView(){
        List<ContactWrapper> wappers = new List<ContactWrapper>();
        List<Contact> resultList = [SELECT Id,Name,Email,Phone,Birthdate,Owner.Name
                        FROM Contact
                        WHERE OwnerId != :UserInfo.getUserId()
                        LIMIT 100];

        if (resultList!=null && resultList.size() > 0) {
            for (Contact con : resultList) {
                ContactWrapper wapper = new ContactWrapper();
                wapper.name = con.Name;
                wapper.email = con.Email;
                wapper.phone = con.Phone;
                wapper.ownerName = con.Owner.Name;
                wapper.birthdate = con.Birthdate;
                wappers.add(wapper);
            }
        }
        return wappers;
    }

    public class ContactWrapper {
        @AuraEnabled
        public String id;
        @AuraEnabled
        public String idLink;
        @AuraEnabled
        public String name;
        @AuraEnabled
        public String email;
        @AuraEnabled
        public String ownerName;
        @AuraEnabled
        public String phone;
        @AuraEnabled
        public Date birthdate;
    }
}

basicDatatable.html

代码语言：javascript复制

<template>
    <div style="background-color: white; border-bottom-style:double;">
        <lightning-layout multiple-rows="true" horizontal-align="center" vertical-align="center">
            <lightning-layout-item padding="around-small" size="5" style="position: absolute; left: 0%;">
                <span class="slds-var-p-right_x-small" style="font-size: 16px; font-weight: bold;">担当者</span>
                <span class="slds-var-p-right_x-small" style="font-size: 32px; font-weight: bold;">{recordLength}</span>
                <span class="slds-var-p-right_x-small" style="font-size: 16px; font-weight: bold;">件</span>
            </lightning-layout-item>
            <lightning-layout-item padding="around-small" size="2">
                <span>&nbsp;</span>
            </lightning-layout-item>
            <lightning-layout-item padding="around-small" size="3" style="position: absolute; left: 80%;">
                <a style="background-color: #333333; color: white; padding: 10px; display: inline;" onclick={refresh}>
                    <lightning-icon class="slds-button__icon
                    slds-icon-utility-down slds-icon_container forceIcon" icon-name="utility:refresh" size="x-small">
                    </lightning-icon>
                </a>
            </lightning-layout-item>
        </lightning-layout>
    </div>
    <div style="height: 300px;">
        <lightning-datatable
                show-row-number-column
                hide-checkbox-column
                key-field="id"
                data={records}
                columns={columns}>
        </lightning-datatable>
    </div>
</template>

basicDatatable.js

代码语言：javascript复制

import { LightningElement, wire, track } from 'lwc';
import getContactListView from '@salesforce/apex/MC_ContactListViewController.getContactListView';
import { loadStyle } from 'lightning/platformResourceLoader';
import COMMON_STATIC from '@salesforce/resourceUrl/common_sfdc_css';
import { refreshApex } from '@salesforce/apex';
const columns = [
    { label: 'Name', fieldName: 'name', type: 'text' },
    { label: 'Email', fieldName: 'email', type: 'text' },
    { label: 'Phone', fieldName: 'phone', type: 'text' },
    { label: 'OwnerName', fieldName: 'ownerName', type: 'text' },
    { label: 'Birthdate', fieldName: 'birthdate', type: 'date' },
];

export default class BasicDatatable extends LightningElement {
    columns = columns;
    @track refreshFlag = false;
    @track wiredRecordList = [];
    @track records;
    @track recordLength;

    renderedCallback() {
        Promise.all([
            loadStyle(this, COMMON_STATIC   '/mcCommon.css')
        ]);
    }
    // eslint-disable-next-line @lwc/lwc/no-async-await
    async connectedCallback() {
    }

    @wire(getContactListView)
    wireRecords(result) {
        console.log('>>>>>result>>' JSON.stringify(result));
        this.wiredRecordList = result;
        if (result.data) {
            this.records = result.data;
            this.recordLength = result.data.length;
        } else if (result.error) {
            // エラー
        }
    }
    // refresh
    refresh() {
        refreshApex(this.wiredRecordList);
    }

}

------------------------------------------------------------------------------------------------------

效果展示：

html image png refresh web

0 人点赞