数据表树网格 - Salesforce LWC

发布于 2025-02-07 17:38:48 字数 2923 浏览 4 评论 0原文

我是这个LWC的新手,我试图在数据表树网格中显示数据 我将包装班与Apex类一起使用。 我似乎无法找到问题,因为数据不会在表中显示。 要做的

<template>
    <lightning-card title="Skills Tree">
        <lightning-tree-grid
            key-field="Id"
            columns={columns}
            data={skillList}
            hide-checkbox-column
        ></lightning-tree-grid>
    </lightning-card>
  </template>

我能够在控制台上看到,所以将其放在桌子上就是

import { LightningElement, wire, track, api } from "lwc";
import getSkillsInventory from "@salesforce/apex/dataTableClass.getSkillsInventory";

export default class DataTableTreeGrid extends LightningElement {
  error;
  @track skillList;
  @track expandedRows = [];
  @track wiredskillListData;
  @track contactId;
  @api recordId;

  @wire(getSkillsInventory, { contactId: "$recordId" })
    wiredskillListData(result) { 
      
      if(result.data){
        console.log('this is data')
        console.log(result.data)
        this.skillList = result.data;
      }else if(result.error){
        console.log('error # ' + result.error);
      }
    } 

  
  constructor() {
    super();
    this.columns = [
      {
        type: "text",
        fieldName: "skillName",
        label: "Skills Name",
        _children: [
          {
            type: "text",
            fieldName: "subskills",
          }
        ],
      },
      {
        type: "text",
        fieldName: "skillProficiency",
        //fieldName: "Name",
        label: "Proficiency"
      },

      { type: "action", typeAttributes: { rowActions: this.getRowActions } }
    ];
  }

  get expandedRowItems() {
    return this.expandedRows;
  }
  getRowActions(row, doneCallback) {
    const actions = [];
    actions.push({
      label: "Edit",
      name: "edit"
    });
    actions.push({
      label: "Delete",
      name: "delete"
    });
    doneCallback(actions);
  }
}

public class SkillMatrixWrapper {
    @AuraEnabled
    public List<SkillL1> skillInfoList {get;set;}
    
    public class SkillDetails{
        @AuraEnabled
        public String skillName         {get;set;}

        @AuraEnabled
        public String skillProficiency  {get;set;}
    }
            
    public class SkillL3{
        @AuraEnabled
        public SkillDetails skillInfo {get;set;}
    }
    
    public class SkillL2{
        @AuraEnabled
        public SkillDetails skillInfo {get;set;}

        @AuraEnabled
        public List<SkillL3> subskills {get;set;}
    }
    
    public class SkillL1{
        @AuraEnabled
        public SkillDetails skillInfo {get;set;}

        @AuraEnabled
        public List<SkillL2> subskills {get;set;}
           
        public SkillL1(SkillDetails skillInfoDetails){
            skillInfo = skillInfoDetails;
            subskills = new List<SkillL2>{};
        }
        
    }
    
    
}

I'm new to this LWC and im trying to get the data be displayed in a data table tree grid
where i used a wrapper class together with my Apex Class.
i cant seem to find the problem as the data wont show in the table..
im able to see in the console so just putting it in the table is what im trying to do..

Below is my Html

<template>
    <lightning-card title="Skills Tree">
        <lightning-tree-grid
            key-field="Id"
            columns={columns}
            data={skillList}
            hide-checkbox-column
        ></lightning-tree-grid>
    </lightning-card>
  </template>

Javascript

import { LightningElement, wire, track, api } from "lwc";
import getSkillsInventory from "@salesforce/apex/dataTableClass.getSkillsInventory";

export default class DataTableTreeGrid extends LightningElement {
  error;
  @track skillList;
  @track expandedRows = [];
  @track wiredskillListData;
  @track contactId;
  @api recordId;

  @wire(getSkillsInventory, { contactId: "$recordId" })
    wiredskillListData(result) { 
      
      if(result.data){
        console.log('this is data')
        console.log(result.data)
        this.skillList = result.data;
      }else if(result.error){
        console.log('error # ' + result.error);
      }
    } 

  
  constructor() {
    super();
    this.columns = [
      {
        type: "text",
        fieldName: "skillName",
        label: "Skills Name",
        _children: [
          {
            type: "text",
            fieldName: "subskills",
          }
        ],
      },
      {
        type: "text",
        fieldName: "skillProficiency",
        //fieldName: "Name",
        label: "Proficiency"
      },

      { type: "action", typeAttributes: { rowActions: this.getRowActions } }
    ];
  }

  get expandedRowItems() {
    return this.expandedRows;
  }
  getRowActions(row, doneCallback) {
    const actions = [];
    actions.push({
      label: "Edit",
      name: "edit"
    });
    actions.push({
      label: "Delete",
      name: "delete"
    });
    doneCallback(actions);
  }
}

WRAPPER CLASS;

public class SkillMatrixWrapper {
    @AuraEnabled
    public List<SkillL1> skillInfoList {get;set;}
    
    public class SkillDetails{
        @AuraEnabled
        public String skillName         {get;set;}

        @AuraEnabled
        public String skillProficiency  {get;set;}
    }
            
    public class SkillL3{
        @AuraEnabled
        public SkillDetails skillInfo {get;set;}
    }
    
    public class SkillL2{
        @AuraEnabled
        public SkillDetails skillInfo {get;set;}

        @AuraEnabled
        public List<SkillL3> subskills {get;set;}
    }
    
    public class SkillL1{
        @AuraEnabled
        public SkillDetails skillInfo {get;set;}

        @AuraEnabled
        public List<SkillL2> subskills {get;set;}
           
        public SkillL1(SkillDetails skillInfoDetails){
            skillInfo = skillInfoDetails;
            subskills = new List<SkillL2>{};
        }
        
    }
    
    
}

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文