删除数据网格行

您可以在几分钟内向数据网格添加删除功能。

您可以向连接到任何 REST API 的数据网格添加删除按钮，如下所示

添加删除查询

1. 首先，我们必须添加一个查询来删除行。对于此示例，我们使用一个 API，该 API 允许向 /customers/id 发送 DELETE 请求，因此我们可以继续创建 HTTP 请求查询。

2. 由于这是一个破坏性操作，因此务必将此查询的模式设置为手动。在模式菜单中选择仅在手动操作时获取。

3. 要在请求 URL 中添加 id，您可以向查询添加一个 id 参数，并将其绑定到以下 JavaScript 表达式

   dataGrid.selection?.['ID'];
   

   复制已复制（或 $keyC）

   dataGrid.selection 包含运行时选定的行，并且“ID”字段包含端点中需要传递的 id

4. 然后，您可以将请求 URL 绑定到以下 JavaScript 表达式

   `https://<API-BASE-URL>/customers/${parameters.id}`;
   

   复制已复制（或 $keyC）

   其中 <API-BASE-URL> 是我们 API 的基本路径。

5. 这就是配置删除查询的全部内容

调用删除查询

1. 添加一个按钮，将其标记为“删除订单”，然后打开其 onClick 事件的绑定编辑器。

2. 使用以下 JavaScript 表达式操作在此事件上调用删除查询

   deleteOrder.call();
   

   复制已复制（或 $keyC）

添加刷新按钮

1. 我们希望能够在执行删除操作后刷新我们的订单数据。

2. 假设我们有一个 getOrders 查询来获取订单，创建另一个标记为“刷新”的按钮

3. 您可以通过每个设置为自动模式的查询对象上可用的 refetch 函数，重新获取设置为自动模式的查询。

4. 将“刷新”按钮的 onClick 事件绑定到以下 JavaScript 表达式操作

   getOrders.refetch();
   

   复制已复制（或 $keyC）

配置加载状态（可选）

1. 如果我们想在查询运行时向用户显示一些反馈，我们可以将查询的 isLoading 和 isFetching 状态绑定到按钮的 loading 属性。例如，

2. 这会在查询运行时向按钮添加加载状态。

总结

如果一切顺利，这就是我们的应用程序应该表现的方式