如下当点击Link名称时，如何实现迁移到详细画面
1.首先在Apex中添加画面迁移用的项目【idLink】
MC_ContactListViewController.cls
代码语言：javascript复制public with sharing class MC_ContactListViewController {
@AuraEnabled(cacheable=true)
public static List<ContactWrapper> getContactListView(Boolean refreshFlag){
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.id = con.Id;
wapper.idLink = '/contact/' con.Id;
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;
}
}2.columns变量实现项目link化
变更前:
代码语言：javascript复制{ label: 'Name', fieldName: 'name', type: 'text', sortable: true },变更后:
代码语言：javascript复制{ label: 'Name', fieldName: 'idLink', type: 'url', sortable: true,
typeAttributes: { label: { fieldName: 'name' }, target: '_self' }, initialWidth: 300 },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> </span>
</lightning-layout-item>
<lightning-layout-item padding="around-small" size="5" 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>
<span> </span>
<a style="background-color: #333333; color: white; padding: 10px; display: inline;" onclick={handleDeleteClick}>
<lightning-icon class="slds-button__icon
slds-icon-utility-down slds-icon_container forceIcon" icon-name="utility:delete" size="x-small">
</lightning-icon>
</a>
<span> </span>
<a style="background-color: #333333; color: white; padding: 10px; display: inline;" onclick={handleCreateClick}>
<lightning-icon class="slds-button__icon
slds-icon-utility-down slds-icon_container forceIcon" icon-name="utility:add" size="x-small">
</lightning-icon>
</a>
</lightning-layout-item>
</lightning-layout>
</div>
<div style="height: 300px;">
<lightning-datatable
show-row-number-column
max-row-selection="1"
onrowselection={handelSelection}
key-field="id"
data={records}
columns={columns}
default-sort-direction={defaultSortDirection}
sorted-direction={sortDirection}
sorted-by={sortedBy}
onsort={onHandleSort}>
</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';
import { deleteRecord } from 'lightning/uiRecordApi';
const columns = [
//{ label: 'Name', fieldName: 'name', type: 'text', sortable: true },
{ label: 'Name', fieldName: 'idLink', type: 'url', sortable: true,
typeAttributes: { label: { fieldName: 'name' }, target: '_self' }, initialWidth: 300 },
{ label: 'Email', fieldName: 'email', type: 'text', sortable: true },
{ label: 'Phone', fieldName: 'phone', type: 'text', sortable: true },
{ label: 'OwnerName', fieldName: 'ownerName', type: 'text', sortable: true },
{ label: 'Birthdate', fieldName: 'birthdate', type: 'date', sortable: true },
];
export default class BasicDatatable extends LightningElement {
columns = columns;
@track refreshFlag = false;
@track wiredRecordList = [];
@track records;
@track recordLength;
@track selectedRecord;
renderedCallback() {
Promise.all([
loadStyle(this, COMMON_STATIC '/mcCommon.css')
]);
}
// eslint-disable-next-line @lwc/lwc/no-async-await
async connectedCallback() {
}
@wire(getContactListView, {refreshFlag : '$refreshFlag'})
wireRecords(result) {
console.log('>>>>>result>>' JSON.stringify(result));
this.refreshFlag = false;
this.wiredRecordList = result;
if (result.data) {
this.records = result.data;
this.recordLength = result.data.length;
} else if (result.error) {
// エラー
}
}
// refresh
refresh() {
refreshApex(this.wiredRecordList);
}
handelSelection(event) {
if (event.detail.selectedRows.length > 0) {
this.selectedRecord = event.detail.selectedRows[0].id;
}
}
handleDeleteClick() {
deleteRecord(this.selectedRecord)
.then(() => {
refreshApex(this.wiredRecordList);
})
.catch(error => {
})
}
handleCreateClick() {
let __self = this;
let openUrl = '/s/contactcreatedata';
let target = '_blank';
let w = 680;
let h = 580;
let newWindow = window.open(openUrl, target, 'width=' w ',height=' h)
let iv = window.setInterval(function () {
if (newWindow.closed) {
refreshApex(__self.wiredRecordList);
clearInterval(iv);
}
}, 1000);
}
@track defaultSortDirection = 'asc';
@track sortDirection = 'asc';
@track sortedBy;
onHandleSort(event) {
const { fieldName: sortedBy, sortDirection } = event.detail;
let fields = new Map();
fields.set('idLink', 'name');
let sortByField = '';
if (fields.has(sortedBy) ) {
sortByField = fields.get(sortedBy);
} else {
sortByField = sortedBy;
}
const cloneData = [...this.records];
cloneData.sort(this.sortBy(sortByField, sortDirection === 'asc' ? 1 : -1));
console.log('>>cloneData>>:' cloneData);
this.records = cloneData;
this.sortDirection = sortDirection;
this.sortedBy = sortedBy;
}
sortBy(field, reverse, primer) {
const key = primer
? function (x) {
return primer(x[field]);
}
: function (x) {
return x[field];
};
return function (a, b) {
a = key(a);
b = key(b);
return reverse * ((a > b) - (b > a));
};
}
}
3.效果展示：
