2

When "button1" receives 2 pieces of data returned by "APEX", "table" will have 2 lines and contain 2 'sync' buttons. Question: How do I add click events to these 2 rows of data? In JS, I can use [i] or [this], but I am not quite sure about it in LWC.

HTML

<template>
    <button class="slds-button slds-button_neutral slds-size_1-of-4 slds-text-heading_small" onclick={button1}>Display Data</button>
    <table class="slds-table slds-table_cell-buffer slds-table_bordered slds-table_col-bordered">
        <thead>
            <tr class="slds-line-height_reset">
                <th class="" scope="col">
                    <div class="slds-truncate" title="头像">头像</div>
                </th>
                <th class="" scope="col">
                    <div class="slds-truncate" title="账号名称">账号名称</div>
                </th>
                <th class="" scope="col">
                    <div class="slds-truncate" title="账户会员数">账户会员数</div>
                </th>
                <th class="" scope="col">
                    <div class="slds-truncate" title="数据库内会员数">数据库内会员数</div>
                </th>
                <th class="" scope="col">
                    <div class="slds-truncate" title="手动同步">手动同步</div>
                </th>
                <th class="" scope="col">
                    <div class="slds-truncate" title="同步进度">备注</div>
                </th>
            </tr>
        </thead>
        <tbody for:each={datatableList} for:item="dtl" key={dtl.id}>
            <tr class="slds-hint-parent">
                <th scope="row">
                    <lightning-avatar variant="circle" src={dtl.qrcodeurl} initials="WeChat" fallback-icon-name="standard:person_account" alternative-text="WeChat" class="slds-m-right_small"></lightning-avatar>
                </th>
                <td >
                    <div class="slds-truncate" >{dtl.name}</div>
                </td>
                <td >
                    <div class="slds-truncate" >{dtl.total}</div>
                </td>
                <td >
                    <div class="slds-truncate" >{dtl.localTotal}</div>
                </td>
                <td>
                    <button class="slds-button" onclick={syncBtn} if:false={showload}> 同 步 </button>
                    <lightning-avatar variant="circle" src="https://www.opet.com.tr/assets/images/loading_3.gif" initials="loading" fallback-icon-name="standard:person_account" alternative-text="loading" class="slds-m-right_small" if:true={showload}></lightning-avatar>
                </td>
                <td >
                    <div class="slds-truncate" >本次同步时间,大约耗时:<strong>{dtl.time}</strong></div>
                </td>
            </tr>
        </tbody>
    </table>
</template>

JS

import { LightningElement, track} from 'lwc';
import { ShowToastEvent } from 'lightning/platformShowToastEvent'
import getWeChatList from '@salesforce/apex/cpcs_getWeChatFansServers.getWeChatList';

export default class SystemSetup extends LightningElement {

    @track datatableList = [];
    @track showload = false;

    //get apex return value
    button1() {    

        getWeChatList()
            .then(result => {

                var responseCode = JSON.parse(result).code;
                var responseMsg = JSON.parse(result).msg;
                var responseData = JSON.parse(result).data;

                if(responseCode === 0){
                    this.datatableList = JSON.parse(result).data;
                }else{
                    const event = new ShowToastEvent({
                        title: '获取公众号列表失败',
                        message: '获取公众号列表失败,请联系管理员,失败原因:' + responseMsg,
                        variant: 'error',
                        mode: 'dismissible'
                    });
                    this.dispatchEvent(event);
                }
            })
            .catch(error => {
                this.error = error;
            });

    }

    syncBtn() {
        console.log();
        this.showload = true;
        syncWeChatFans()
            .then(result => {

                var responseCode = JSON.parse(result).code;
                var responseMsg = JSON.parse(result).msg;

                if(responseCode === '0'){
                    const event1 = new ShowToastEvent({
                        title: '同步理成功',
                        message: '同步粉丝数据处理已完成',
                        variant: 'success',
                        mode: 'dismissible'
                    });
                    this.dispatchEvent(event1);
                    this.showload = false;
                }else{
                    const event1 = new ShowToastEvent({
                        title: '同步失败',
                        message: '同步粉丝接口失败,失败原因:' + responseMsg,
                        variant: 'error',
                        mode: 'dismissible'
                    });
                    this.dispatchEvent(event1);
                    this.showload = false;
                }
            })
            .catch(error => {
                this.error = error;
            });
    }
}
1
  • What do you mean by adding click event? Do you wanna dtermine which sync button was clicked or you want onclick listner to whole rows of data? – Pranay Jaiswal Aug 19 '19 at 10:43
3

Provide a dataset attribute to your sync button like

<button class="slds-button" onclick={syncBtn} if:false={showload} data-whichrow={dtl.id} >

then in your js syncBtn method access which whichrow and see which row was clicked.

syncBtn(event){
        console.log('Sync callled for element : '+ event.currentTarget.dataset.whichrow);
    }

Playground-link : https://developer.salesforce.com/docs/component-library/tools/playground/soo_ZHji3/1/edit

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.