Aura datatable 行内编辑

 cmp

<aura:component 
implements="flexipage:availableforallpagetypes,force:apphostable,force:hasRecordId,lightning:isUrlAddressable,force:hasRecordId,force:lightningquickactionwithoutheader"
access="global" controller="WeeklyReportApprovalController"
>

<c:lax context="{!this}"/>
<aura:attribute name="recordId" type="String"/>
<aura:attribute name="dataTableColumn" type="List"/>
<aura:attribute name="dataTableData" type="List"/>
<aura:attribute name="draftValues" type="List" default="[]"/>
<aura:handler name="init" value="{! this }" action="{!c.onInit }"/>

    <lightning:card variant="Weekly Report Item" title="Weekly Report Item"  iconName="standard:event" >
            <lightning:datatable
            hideCheckboxColumn="true"
            columns="{! v.dataTableColumn }"
            data="{! v.dataTableData }"
            keyField="id"
            draftValues="{! v.draftValues }"
            onsave="{! c.handleSaveEdition }"
            />

    </lightning:card>
</aura:component>

 

controller

({
    onInit: function(cmp, event, helper) {
        helper.initialDataTableColumns(cmp);
        helper.initialDataTableData(cmp);
      },
      handleSaveEdition: function (cmp, event, helper) {
        //var draftValues = event.getParam('draftValues');
        console.log(11111);
        helper.saveEdition(cmp,event, helper);
        window.location.reload();
    },
})

 

helper

({
  initialDataTableColumns: function (cmp) {
    cmp.set("v.dataTableColumn", [
      {
        label: "Item",
        editable: false,
        fieldName: "Id",
        type: "url",
        typeAttributes: { label: { fieldName: "Name" }, target: "_blank" }
      },
      {
        label: "Description",
        editable: false,
        fieldName: "Description__c",
        type: "Text"
      },
      {
        label: "Date",
        editable: false,
        fieldName: "Date__c",
        type: "Date"
      },
      {
        label: "Spent Hours",
        editable: false,
        fieldName: "Spent_Hours__c",
        type: "Number"
      },
      {
        label: "Recognized Hours",
        editable: true,
        fieldName: "Recognized_Hours__c",
        type: "Number"
      },
      {
        label: "Comments",
        editable: true,
        fieldName: "Comments__c",
        type: "Text"
      }
    ]);
  },
  initialDataTableData: function (cmp) {
    cmp.lax
      .enqueue("c.getWeeklyReportItems", {
        ApprovalId: cmp.get("v.recordId")
      })
      .then((res) => {
        res.map((item) => {
          item.Id = item.Id ? "/" + item.Id : "";
          item.Name = item.Name ? item.Name : "";
          item.Date__c = item.Date__c ? item.Date__c : "";
          item.Spent_Hours__c = item.Spent_Hours__c ? item.Spent_Hours__c : "";
          item.Recognized_Hours__c = item.Recognized_Hours__c ? item.Recognized_Hours__c : "";
          //item.comments__c = item.comments__c ? item.comments__c : "";
        });
        cmp.set("v.dataTableData", res);
      })
      .catch((err) => {
        console.error(err);
        var toastEvent = $A.get("e.force:showToast");
        toastEvent.setParams({
          title: err.name,
          type: "error",
          message: err.message
        });
        toastEvent.fire();
      });
  },
  saveEdition: function (cmp, event,helper) {
    let allData= cmp.get('v.dataTableData');
    let draftValues = event.getParam("draftValues");
    draftValues.map(item=>{
      item.Id=allData[item.id.split('-')[1]].Id.replace('/','');
      //console.log(item.Id);
      //console.log(item.RecognizedHours);
    });
    console.log(draftValues);
    const action = cmp.get("c.updateWeeklyReportItems");
    action.setParams({ weeklyReportItemData: JSON.stringify(draftValues) });
    action.setCallback(this, function (response) {
      let state = response.getState();
      $A.get("e.force:refreshView").fire();
    });
    
    $A.enqueueAction(action);
  }
});

Apex

public with sharing class WeeklyReportApprovalController{
	public WeeklyReportApprovalController(){
	}

	@AuraEnabled
	public static List<Object> getWeeklyReportItems(String ApprovalId){

        System.debug('--------->' + ApprovalId);
        ProcessInstanceWorkitem processInstanceWorkitem=  [SELECT ProcessInstanceId FROM ProcessInstanceWorkitem WHERE ID =:ApprovalId];
        ProcessInstance processInstance=[SELECT TargetObjectid  FROM ProcessInstance  WHERE ID=:processInstanceWorkitem.ProcessInstanceId];
        System.debug('--------->' + processInstance.TargetObjectid);

        List<Weekly_Report_Item__c> weeklyReportItems=[select
         id,name,Date__c,Recognized_Hours__c,Spent_Hours__c,comments__c,Description__c
         from Weekly_Report_Item__c 
         where weekly_Report__c=:processInstance.TargetObjectid];

        System.debug('--------->' +weeklyReportItems);

		return weeklyReportItems;
    }
    @AuraEnabled
	public static void updateWeeklyReportItems(String weeklyReportItemData){
        List<Weekly_Report_Item__c> weeklyReportItemList;
        if (weeklyReportItemData != null) {
            weeklyReportItemList =
            (List<Weekly_Report_Item__c>)JSON.deserialize(weeklyReportItemData, List<Weekly_Report_Item__c>.class);
        }
        System.debug('weeklyReportItemList---->'+ weeklyReportItemList);
        
       update weeklyReportItemList;
    }
}