我刚好处理过类似的场景，给你分享几个实用的方案，核心思路就是监听网格数据的变化，根据数据行数动态切换表单的禁用状态，完美适配行编辑模式下的添加/删除操作。

方案一：原生JS直接操作实例 #

如果是用纯DevExtreme JS开发，我们可以通过绑定网格的关键事件，实时检查数据量并更新表单状态：

• 给DxDataGrid绑定onContentReady、onRowRemoved和onRowInserted事件，这三个事件分别覆盖了初始化加载、删除行、添加行保存后的场景
• 在事件处理函数中，获取网格数据源的当前数据长度
• 调用表单实例的option方法，设置disabled属性

示例代码：

// 先获取网格和表单的实例
const gridInstance = $("#dataGrid").dxDataGrid("instance");
const formInstance = $("#myForm").dxForm("instance");

// 通用的状态更新函数
function syncFormStatus() {
  const dataCount = gridInstance.getDataSource().items().length;
  // 当数据为空时禁用表单，否则启用
  formInstance.option("disabled", dataCount === 0);
}

// 初始化网格时绑定事件
$("#dataGrid").dxDataGrid({
  rowEditing: {
    mode: "row",
    allowUpdating: true,
    allowDeleting: true,
    allowAdding: true
  },
  // 其他网格配置（列、数据源等）
  onContentReady: syncFormStatus,
  onRowRemoved: syncFormStatus,
  onRowInserted: syncFormStatus
});

// 页面加载完成后先执行一次，确保初始状态正确
syncFormStatus();

方案二：MVVM框架（Vue/React/Angular）适配 #

如果是在Vue、React这类框架中使用，我们可以利用响应式数据特性来简化逻辑：
以Vue为例，通过监听网格数据源的变化，自动同步表单的禁用状态：

<template>
  <DxDataGrid
    :data-source="gridDataSource"
    :row-editing="{ mode: 'row', allowAdding: true, allowDeleting: true }"
    @row-removed="updateFormStatus"
    @row-inserted="updateFormStatus"
  >
    <!-- 列配置 -->
    <DxColumn data-field="name" />
    <DxColumn data-field="value" />
  </DxDataGrid>

  <DxForm ref="myFormRef" :disabled="isFormDisabled">
    <!-- 表单字段配置 -->
    <DxSimpleItem data-field="formField1" />
    <DxSimpleItem data-field="formField2" />
  </DxForm>
</template>

<script>
import { DxDataGrid, DxColumn } from "devextreme-vue/data-grid";
import { DxForm, DxSimpleItem } from "devextreme-vue/form";

export default {
  components: { DxDataGrid, DxColumn, DxForm, DxSimpleItem },
  data() {
    return {
      gridDataSource: [],
      isFormDisabled: true // 初始无数据时禁用表单
    };
  },
  methods: {
    updateFormStatus() {
      this.isFormDisabled = this.gridDataSource.length === 0;
    }
  },
  watch: {
    // 监听数据源变化，确保数据更新时同步状态
    gridDataSource() {
      this.updateFormStatus();
    }
  },
  mounted() {
    // 初始化时检查一次状态
    this.updateFormStatus();
  }
};
</script>

额外注意事项 #

• 如果使用远程数据源，记得要绑定onLoaded事件（网格数据源加载完成后触发），确保远程数据加载完成后能正确更新表单状态
• 如果你不需要禁用整个表单，只想禁用提交按钮这类特定控件，只需要把formInstance.option('disabled', ...)改成目标控件的option调用即可，逻辑完全一致
• 初始化时一定要手动执行一次状态检查，避免页面加载时表单状态和网格数据不匹配

内容的提问来源于stack exchange，提问作者pinale