DevExtreme DataGrid with Angular：編輯後刪除自動保存

Question

我正在爲Angular應用程序使用dataGrid小部件（來自DevExtreme lib）。

dataGrid工作正常，任何編輯操作都會自動保存。

我想取消此自動保存操作，取而代之的是：

• 一個簡單的按鈕點擊時做了保存。

下面是代碼：

app.component.ts

import { NgModule, Component, enableProdMode } from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser'; 
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 
import { DxDataGridModule } from 'devextreme-angular'; 
import { Customer, Service } from './app.service'; 

if(!/localhost/.test(document.location.host)) { 
    enableProdMode(); 
} 

@Component({ 
    styleUrls: ['app/app.component.css'], 
    selector: 'demo-app', 
    templateUrl: 'app/app.component.html', 
    providers: [Service] 
}) 
export class AppComponent { 
    customers: Customer[]; 

    constructor(service: Service) { 
     this.customers = service.getCustomers(); 
    } 
} 

app.component.html

<dx-data-grid 
    id="gridContainer" 
    [dataSource]="customers" 
    [columns]="['CompanyName', 'City', 'State', 'Phone', 'Fax']"> 
</dx-data-grid> 

app.service.ts

import { Injectable } from '@angular/core'; 

export class Customer { 
    ID: number; 
    CompanyName: string; 
    Address: string; 
    City: string; 
    State: string; 
    Zipcode: number; 
    Phone: string; 
    Fax: string; 
    Website: string; 
} 

let customers: Customer[] = [{ 
    "ID": 1, 
    "CompanyName": "Super Mart of the West", 
    "Address": "702 SW 8th Street", 
    "City": "Bentonville", 
    "State": "Arkansas", 
    "Zipcode": 72716, 
    "Phone": "(800) 555-2797", 
    "Fax": "(800) 555-2171", 
    "Website": "http://www.nowebsitesupermart.com" 
}, { 
    "ID": 2, 
    "CompanyName": "Electronics Depot", 
    "Address": "2455 Paces Ferry Road NW", 
    "City": "Atlanta", 
    "State": "Georgia", 
    "Zipcode": 30339, 
    "Phone": "(800) 595-3232", 
    "Fax": "(800) 595-3231", 
    "Website": "http://www.nowebsitedepot.com" 
}, { 
    "ID": 3, 
    "CompanyName": "K&S Music", 
    "Address": "1000 Nicllet Mall", 
    "City": "Minneapolis", 
    "State": "Minnesota", 
    "Zipcode": 55403, 
    "Phone": "(612) 304-6073", 
    "Fax": "(612) 304-6074", 
    "Website": "http://www.nowebsitemusic.com" 
}, { 
    "ID": 4, 
    "CompanyName": "Tom's Club", 
    "Address": "999 Lake Drive", 
    "City": "Issaquah", 
    "State": "Washington", 
    "Zipcode": 98027, 
    "Phone": "(800) 955-2292", 
    "Fax": "(800) 955-2293", 
    "Website": "http://www.nowebsitetomsclub.com" 
}, { 
    "ID": 5, 
    "CompanyName": "E-Mart", 
    "Address": "3333 Beverly Rd", 
    "City": "Hoffman Estates", 
    "State": "Illinois", 
    "Zipcode": 60179, 
    "Phone": "(847) 286-2500", 
    "Fax": "(847) 286-2501", 
    "Website": "http://www.nowebsiteemart.com" 
}, { 
    "ID": 6, 
    "CompanyName": "Walters", 
    "Address": "200 Wilmot Rd", 
    "City": "Deerfield", 
    "State": "Illinois", 
    "Zipcode": 60015, 
    "Phone": "(847) 940-2500", 
    "Fax": "(847) 940-2501", 
    "Website": "http://www.nowebsitewalters.com" 
}, { 
    "ID": 7, 
    "CompanyName": "StereoShack", 
    "Address": "400 Commerce S", 
    "City": "Fort Worth", 
    "State": "Texas", 
    "Zipcode": 76102, 
    "Phone": "(817) 820-0741", 
    "Fax": "(817) 820-0742", 
    "Website": "http://www.nowebsiteshack.com" 
}, { 
    "ID": 8, 
    "CompanyName": "Circuit Town", 
    "Address": "2200 Kensington Court", 
    "City": "Oak Brook", 
    "State": "Illinois", 
    "Zipcode": 60523, 
    "Phone": "(800) 955-2929", 
    "Fax": "(800) 955-9392", 
    "Website": "http://www.nowebsitecircuittown.com" 
}, { 
    "ID": 9, 
    "CompanyName": "Premier Buy", 
    "Address": "7601 Penn Avenue South", 
    "City": "Richfield", 
    "State": "Minnesota", 
    "Zipcode": 55423, 
    "Phone": "(612) 291-1000", 
    "Fax": "(612) 291-2001", 
    "Website": "http://www.nowebsitepremierbuy.com" 
}, { 
    "ID": 10, 
    "CompanyName": "ElectrixMax", 
    "Address": "263 Shuman Blvd", 
    "City": "Naperville", 
    "State": "Illinois", 
    "Zipcode": 60563, 
    "Phone": "(630) 438-7800", 
    "Fax": "(630) 438-7801", 
    "Website": "http://www.nowebsiteelectrixmax.com" 
}, { 
    "ID": 11, 
    "CompanyName": "Video Emporium", 
    "Address": "1201 Elm Street", 
    "City": "Dallas", 
    "State": "Texas", 
    "Zipcode": 75270, 
    "Phone": "(214) 854-3000", 
    "Fax": "(214) 854-3001", 
    "Website": "http://www.nowebsitevideoemporium.com" 
}, { 
    "ID": 12, 
    "CompanyName": "Screen Shop", 
    "Address": "1000 Lowes Blvd", 
    "City": "Mooresville", 
    "State": "North Carolina", 
    "Zipcode": 28117, 
    "Phone": "(800) 445-6937", 
    "Fax": "(800) 445-6938", 
    "Website": "http://www.nowebsitescreenshop.com" 
}]; 

@Injectable() 
export class Service { 
    getCustomers() { 
     return customers; 
    } 
} 

有什麼建議嗎？

Answer 1

批量修改
如果希望用戶編輯多行，然後保存所有修改在一起，你可以使用「批量編輯」中DevExtreme功能。 Official Documentaion
添加dxo-editing標籤這裏

<dx-data-grid 
    id="gridContainer" 
    [dataSource]="customers" 
    [columns]="['CompanyName', 'City', 'State', 'Phone', 'Fax']"> 

     <dxo-editing 
      mode="batch" 
      [allowUpdating]="true"> 
     </dxo-editing> 

</dx-data-grid> 

逐行編輯
所示。如果希望用戶只一次編輯一行，您可以使用「行編輯」功能在DevExtreme。 Official Documentation
添加dxo-editing標籤，如下所示

<dx-data-grid 
    id="gridContainer" 
    [dataSource]="customers" 
    [columns]="['CompanyName', 'City', 'State', 'Phone', 'Fax']"> 

     <dxo-editing 
      mode="row" 
      [allowUpdating]="true"> 
     </dxo-editing> 

</dx-data-grid>