jQuery版Kendo UI Grid顶部单元格值批量填充同列其他单元格需求咨询

首先说明你之前直接调用row.set()触发数据复原的核心原因：批量编辑模式下单次调用set会触发dataSource的change事件，频繁触发会导致Grid频繁重绘，若autoSync配置开启还会触发自动提交，提交失败时会自动回滚数据。

1. 基础配置调整 #

先调整Grid和数据源的基础配置，确保未提交修改可以暂存、回滚：

$("#grid").kendoGrid({
  dataSource: {
    batch: true, // 必须开启批量编辑模式
    autoSync: false, // 关闭自动同步，修改只会暂存在本地不会立即提交后端
    transport: {
      // 保留你原有read、update等接口配置
    },
    schema: {
      model: {
        id: "id", // 必须配置主键字段，用于脏数据识别
        fields: {
          // 保留你原有字段配置
        }
      }
    }
  },
  editable: true,
  toolbar: ["save", "cancel"], // 直接用Grid原生的保存、取消按钮，自带修改回滚、提交逻辑
  // 保留你其他原有Grid配置
})

2. 列选择复选框+首行输入位实现 #

在需要支持批量填充的列的表头模板中，添加复选框和输入控件：

columns: [
  // 示例字段配置，其他需要支持批量填充的列同理修改
  {
    field: "price",
    title: "商品价格",
    headerTemplate: `
      <div class="batch-fill-header">
        <label style="display:block;margin-bottom:4px;">
          <input type="checkbox" class="col-select-checkbox" data-field="price"> 启用批量填充
        </label>
        <input type="number" class="col-batch-input" data-field="price" placeholder="输入填充值" style="width:100%;">
      </div>
    `
  },
  // 其他原有列配置
]

3. 批量填充逻辑实现 #

修改时先临时解绑Grid的change事件避免频繁重绘，全部修改完成后再统一刷新视图，避免数据复原问题：

// 监听批量填充输入框的变更事件
$(document).on("change", ".col-batch-input", function() {
  const targetField = $(this).data("field");
  const fillValue = $(this).val();
  const isColSelected = $(this).prev().find(".col-select-checkbox").is(":checked");
  
  // 未勾选列或输入值为空时不执行逻辑
  if (!isColSelected || fillValue === "") return;

  const grid = $("#grid").data("kendoGrid");
  const allData = grid.dataSource.data();
  const originalChangeHandler = grid.events.change ? grid.events.change[0] : null;

  // 临时解绑change事件，避免单次修改触发重绘
  if (originalChangeHandler) grid.unbind("change", originalChangeHandler);

  // 批量修改所有行对应字段值
  for (let i = 0; i < allData.length; i++) {
    // 直接修改属性+手动标记脏数据，不会触发单独的change事件
    allData[i][targetField] = fillValue;
    allData[i].dirty = true;
  }

  // 统一刷新视图，重新绑定change事件
  grid.refresh();
  if (originalChangeHandler) grid.bind("change", originalChangeHandler);
})

4. 取消/保存逻辑说明 #

Grid原生的保存、取消按钮已经自带对应能力，无需额外开发：

• 点击取消按钮：自动调用dataSource.cancelChanges()，所有未提交的修改会直接恢复为原始值
• 点击保存按钮：自动收集所有标记为脏的数据，批量提交到你配置的transport.update接口

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