如何将List<string[]>及IOutPutReport数据绑定到Telerik Asp.NET MVC Grid？

刚好做过类似的动态列+动态数据的Telerik Grid场景，适配你这个IOutPutReport接口的结构，咱们一步步来实现：

1. 后端Action准备 #

首先确保你的后端ShowReport Action能正确返回序列化后的IOutPutReport数据，这里用JsonResult返回：

public ActionResult ShowReport()
{
    // 替换为你的实际业务逻辑获取IOutPutReport实例
    IOutPutReport report = new YourConcreteReportClass
    {
        S_ReportName = "月度销售报表",
        LiHeader = new[] { "产品编号", "产品名称", "销售数量", "销售额" },
        LiData = new List<string[]>
        {
            new[] { "PROD001", "无线耳机", "120", "24000" },
            new[] { "PROD002", "智能手表", "85", "34000" },
            new[] { "PROD003", "平板电脑", "40", "60000" }
        },
        I_Count = 3
    };

    return Json(report, JsonRequestBehavior.AllowGet);
}

2. 前端AJAX请求+Grid初始化 #

因为你的列名（LiHeader）和数据行（LiData）都是动态的，不能硬编码Grid列配置，所以需要在AJAX成功回调里动态生成列和转换数据格式：

首先在页面添加Grid容器：

<div id="reportGridContainer"></div>

然后编写JavaScript代码：

// 先清除旧的Grid容器（如果需要刷新报表）
$("#reportGridContainer").empty();

$.ajax({
    type: "POST",
    url: '@Url.Action("ShowReport", "Report")',
    traditional: true,
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function (reportData) {
        // 1. 动态生成Grid列配置
        var gridColumns = [];
        $.each(reportData.LiHeader, function (colIndex, headerName) {
            gridColumns.push({
                field: `column${colIndex}`, // 给每个列生成唯一字段名
                title: headerName,
                width: "150px", // 可根据需求调整，或者设为auto
                filterable: true // 开启列过滤，按需关闭
            });
        });

        // 2. 将LiData的string[]数组转换为Grid可识别的对象数组
        var gridDataSource = [];
        $.each(reportData.LiData, function (rowIndex, rowValues) {
            var rowObj = {};
            $.each(rowValues, function (colIndex, cellValue) {
                rowObj[`column${colIndex}`] = cellValue;
            });
            gridDataSource.push(rowObj);
        });

        // 3. 初始化Telerik Grid
        $("#reportGridContainer").kendoGrid({
            dataSource: {
                data: gridDataSource,
                pageSize: 10 // 开启分页，按需调整
            },
            columns: gridColumns,
            pageable: true,
            sortable: true,
            filterable: true,
            toolbar: [{ text: reportData.S_ReportName }], // 把报表名称放在工具栏
            noRecords: {
                template: "没有找到报表数据"
            }
        });
    },
    error: function (xhr, status, err) {
        console.error("报表加载失败:", err);
        alert("加载报表时发生错误，请稍后重试");
    }
});

关键注意点 #

• 数据格式转换：Telerik Grid需要绑定对象数组，而你的LiData是List<string[]>，所以必须把每一行的string[]转换成带属性的对象，用column0、column1这种命名作为临时字段是最直接的方式。
• 序列化问题：确保你的IOutPutReport实现类的所有属性都支持JSON序列化，如果有复杂类型，建议用专门的DTO类传递数据。
• 功能扩展：如果需要服务器端分页、排序或过滤，需要修改后端Action接收DataSourceRequest参数，并在后端处理数据后返回DataSourceResult，前端Grid的DataSource配置也要改成异步模式。

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