在angular 4中添加和编辑DevExtreme网格时自定义弹出窗口

在Angular 4中，可以通过使用DevExtreme网格组件来实现添加和编辑功能，并自定义弹出窗口。

首先，确保已经安装了必要的依赖包。在项目根目录下运行以下命令：

npm install devextreme devextreme-angular

接下来，创建一个新的组件来包含DevExtreme网格和自定义弹出窗口。在命令行中运行以下命令：

ng generate component GridComponent

在GridComponent的HTML模板中，添加一个DevExtreme网格和一个自定义弹出窗口。示例代码如下：

<dx-data-grid [dataSource]="data" [editing]="{ allowAdding: true, allowUpdating: true }">
  <dxo-editing mode="popup" [popup]="{ title: 'Edit', showTitle: true, width: 700, height: 525 }"></dxo-editing>
  <dxi-column dataField="id" caption="ID"></dxi-column>
  <dxi-column dataField="name" caption="Name"></dxi-column>
  <dxi-column dataField="age" caption="Age"></dxi-column>
  <dxi-column dataField="email" caption="Email"></dxi-column>
  <dxi-column type="buttons" width="110">
    <dxi-button hint="Edit"></dxi-button>
    <dxi-button hint="Delete"></dxi-button>
  </dxi-column>
</dx-data-grid>

<div class="custom-popup">
  <h3>Add/Edit Item</h3>
  <form>
    <label>ID:</label>
    <input type="text" [(ngModel)]="currentItem.id" name="id">
    <label>Name:</label>
    <input type="text" [(ngModel)]="currentItem.name" name="name">
    <label>Age:</label>
    <input type="text" [(ngModel)]="currentItem.age" name="age">
    <label>Email:</label>
    <input type="text" [(ngModel)]="currentItem.email" name="email">
    <button (click)="saveItem()">Save</button>
  </form>
</div>

在GridComponent的组件类中，定义数据源和当前编辑的项目。示例代码如下：

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

@Component({
  selector: 'app-grid',
  templateUrl: './grid.component.html',
  styleUrls: ['./grid.component.css']
})
export class GridComponent {
  data: any[] = [
    { id: 1, name: 'John Doe', age: 25, email: 'john.doe@example.com' },
    { id: 2, name: 'Jane Smith', age: 30, email: 'jane.smith@example.com' },
    { id: 3, name: 'Bob Johnson', age: 35, email: 'bob.johnson@example.com' }
  ];

  currentItem: any = {};

  saveItem() {
    // 保存当前编辑的项目
  }
}

最后，在GridComponent的CSS文件中，定义自定义弹出窗口的样式。示例代码如下：

.custom-popup {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  padding: 20px;
  border: 1px solid #ccc;
}

.custom-popup.show {
  display: block;
}

现在，你可以在其他组件中使用GridComponent来展示和编辑DevExtreme网格，并自定义弹出窗口。

这里推荐使用腾讯云的云服务器（CVM）来部署和运行Angular 4应用程序。腾讯云的云服务器提供高性能、稳定可靠的计算资源，适用于各种规模的应用程序。你可以通过以下链接了解更多关于腾讯云云服务器的信息：

在angular 4中添加和编辑DevExtreme网格时自定义弹出窗口

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐