如何通过jQuery实现Kendo Grid导入并追加Excel文件数据？

这个需求完全可行，你的代码问题出在后续错误的数据源重置操作上，以下是修正方案和完整实现思路：

你的代码错误分析 #

你在循环中使用grid.dataSource.add(dataItem)其实已经在正确追加数据，但后面的这两行代码直接清空并破坏了数据源结构：

$("#grid").data("kendoGrid").dataSource.data([]); // 清空原有所有数据
$("#grid").data("kendoGrid").dataSource.data([griddataSource]); // 把原数据数组错误包装成二维数组传入

dataSource.add()方法本身会自动将新数据追加到现有数据源中，网格也会自动更新视图，不需要手动清空或重新赋值。

修正后的核心代码 #

假设你已经成功读取Excel文件并拿到了rows二维数组（第一行为表头，从第2行开始是数据），直接执行以下代码即可完成追加：

var grid = $("#grid").data("kendoGrid");
var dataSource = grid.dataSource;

// 遍历Excel数据行（跳过表头行）
for (var i = 1; i < rows.length; i++) {
  var row = rows[i];
  // 跳过空行
  if (!row || row.every(cell => !cell)) continue;
  
  var dataItem = {
    ProductID: row[0],
    ProductName: row[1],
    Price: row[2]
  };
  
  // 追加到现有数据源，网格自动刷新
  dataSource.add(dataItem);
}

完整Excel读取+数据追加实现 #

推荐使用SheetJS（xlsx库）读取Excel文件，比HTML表格方法更可靠，步骤如下：

1. 引入SheetJS库：

<script src="https://cdn.jsdelivr.net/npm/xlsx@0.18.5/dist/xlsx.full.min.js"></script>

2. 添加文件选择器和处理逻辑：

<input type="file" id="excelFile" accept=".xlsx,.xls">

document.getElementById('excelFile').addEventListener('change', handleExcelUpload);

function handleExcelUpload(e) {
  var file = e.target.files[0];
  if (!file || !file.name.match(/\.(xlsx|xls)$/)) {
    alert('请选择有效的Excel文件');
    return;
  }

  var reader = new FileReader();
  reader.onload = function(e) {
    try {
      var data = new Uint8Array(e.target.result);
      var workbook = XLSX.read(data, { type: 'array' });
      var firstSheet = workbook.Sheets[workbook.SheetNames[0]];
      // 将工作表转换为二维数组，header:1表示第一行作为表头
      var rows = XLSX.utils.sheet_to_json(firstSheet, { header: 1 });
      
      // 调用追加数据函数
      appendToGrid(rows);
      alert('数据追加成功');
    } catch (err) {
      alert('读取Excel文件失败：' + err.message);
    }
  };
  reader.readAsArrayBuffer(file);
}

function appendToGrid(rows) {
  var grid = $("#grid").data("kendoGrid");
  var dataSource = grid.dataSource;

  // 跳过表头行，从第二行开始处理数据
  for (var i = 1; i < rows.length; i++) {
    var row = rows[i];
    if (!row || row.length < 3) continue; // 跳过无效行

    var dataItem = {
      ProductID: row[0],
      ProductName: row[1],
      Price: row[2]
    };
    
    dataSource.add(dataItem);
  }
}

注意事项 #

• 确保Excel文件的列顺序和网格数据源的字段顺序一致（ProductID、ProductName、Price）；
• 如果你的Kendo Grid使用的是远程数据源（比如绑定到API），需要调用dataSource.sync()将新增数据同步到后端；
• dataSource.add()会自动触发网格的刷新，不需要手动调用grid.refresh()。

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