kendo UI动态行转列C#

如何实现列的动态展示。
首先我们需要了解一个原理，行转列，是把行的值转换成列名，在把行的值赋值到，每一列上，我这边使用的是DataTable做的

  //生成dataTable存放数据
            DataTable dt = new DataTable();
            dt.Columns.Add("SampleId", typeof(string));
            dt.Columns.Add("Code", typeof(string));
            dt.Columns.Add("SamplingTime", typeof(string));
            dt.Columns.Add("SampleTypeName", typeof(string));
            //添加项目列
            foreach (var analysisItem in RndtPaListDistinct)
            {
                dt.Columns.Add(analysisItem, typeof(string));
            }

这段的意思呢，就是把行的数据distinct之后插入到我的datatabel中
这样列名就有了，如果我们想要一些特殊固定的列名，那么就在循环前把这些都加上

 //添加数据
            foreach (var sample in RndtScList)
            {
                DataRow dr = dt.NewRow();
                dr["SampleId"] = sample.SC;
                dr["Code"] = sample.SC_VALUE;
                dr["SamplingTime"] =sample.SAMPLING_DATE?.ToString("yyyy-MM-dd HH:mm:ss");
                dr["SampleTypeName"] = sample.DESCRIPTION;
                //添加项目结果
                foreach (var paraItem in RndtPaListDistinct)
                {
                    if (RndtScPaList.Any(p => p.SC == sample.SC && p.DESCRIPTION ==  paraItem))
                    {
                        var paraData = RndtScPaList.Where(p => p.SC == sample.SC && p.DESCRIPTION ==  paraItem).First().VALUE_S;
                        dr[paraItem] = paraData;
                    }
                    else
                    {
                        dr[paraItem] = "--";
                    }
                }
                dt.Rows.Add(dr);
                }

这是循环我们的实例列对应的去找每一列对应我们的实例是否有值，有的话就加上，没有就用–代替

  DataSet ds = new DataSet();
            ds.Tables.Add(dt);


            DataTable dtCount = new DataTable();
            dtCount.Columns.Add("Total", typeof(int));
            DataRow drCount = dtCount.NewRow();
            drCount["Total"] = totalCount;
            dtCount.Rows.Add(drCount);
            ds.Tables.Add(dtCount);

            DataTableCollection datatable = ds.Tables;
            return datatable;

这是格式化Datable，目的是为了前台的显示

然后是前台的处理，用ajax获取到了这个datable，我们需要去生成这个Grid，那我们的Grid是动态生成的如下

  //执行查询
    function KeySamplePointSearchGenerateGrid(gridData, pageIndex) {
        var columns
        $("#KeySamplePointSearch_Grid").children().remove();
        if (gridData.Total == 0) {
            columns = [];
            $("#KeySamplePointSearch_Grid").kendoGrid({
                filterable: false,
                sortable: false,
                pageable: true,
                resizable: true,
                noRecords: true,
                messages: {
                    noRecords: "无"
                },
                //dataBound: KeySamplePointSearchGridDataBound,
                columns: []
            });
        }
        else {
            columns = KeySamplePointSearchGenerateColumns($.parseJSON(gridData.Data)[0]);

            $("#KeySamplePointSearch_Grid").kendoGrid({

                excel: {
                    fileName: "统计分析.xlsx",
                    filterable: true
                },

                dataSource: {
                    data: $.parseJSON(gridData.Data),
                    serverPaging: true,
                    serverFiltering: true,
                    pageSize: KEYSAMPLEPOINTSELECPAGESIZE,
                    page: pageIndex,

                    sort: [{
                        field: "SamplingTime", dir: "asc"
                    }],
                    schema: {
                        total: function () {
                            return gridData.Total;
                        },
                        model: {
                            id: 'Code'
                        }
                    }
                },
                columns: columns,
                selectable: "cell",
                pageable: true,
                resizable: true,
                encoded: false,
                messages: {
                    noRecords: "无"
                },
                //dataBound: KeySamplePointSearchGridDataBound
            });

            KEYSAMPLEPOINTSEARCHGRID = $("#KeySamplePointSearch_Grid").data("kendoGrid");
            debugger

            $("#KeySamplePointSearch_Grid select").bind("change", function (e) {
                KEYSAMPLEPOINTSELECPAGESIZE = $(this).val();
                KeySamplePointSearchData();
            })
            //group无法使用，移除点击事件
            $("#KeySamplePointSearch_Grid").find('.k-i-collapse').hide();
        }

    }

那么我们可以看到这个的定义是简单的定义，但是columns是有方法的，那么我们看columns是如何得到的

       debugger
        var columns = [];
        for (var dataItem in gridData) {
            var cellClass = "cell-normal";
            var locked = false;
            var hidden = false;
            var width = '100px';
            if (dataItem.indexOf("RQII_") == -1 && dataItem.indexOf("RQAU_") == -1 && dataItem.indexOf("SCAU_") == -1 && dataItem != "SampleId") {
                var columnName;
                switch (dataItem) {
                    case "SamplingTime":
                        columnName = '采样时间';
                        locked = true;
                        width = '180px';
                        break;
                    case "Code":
                        columnName = '编号';
                        locked = true;
                        width = '150px';
                        break;
                    case "SampleTypeName":
                        columnName = '样品类型';
                        locked = true;
                        width = '150px';
                        break;
                    case "SamplePointCode":
                        columnName = '采样位号';
                        locked = true;
                        width = '150px';
                        break;
                    case "SamplePointName":
                        columnName = '取样位置';
                        locked = true;
                        width = '150px';
                        break;
                    case "LocationName":
                        columnName = '@Html.Lang("Model_Sample_Location")';
                        locked = true;
                        width = '150px';
                        break;
                    case "SampleMLP":
                        columnName = '指标';
                        locked = true;
                        hidden = true;
                        width = '150px';
                        break;
                    case "Description":
                        columnName = '@Html.Lang("Model_Sample_Description")';
                        width = '250px';
                        break;
                    case "resultEntry":
                        columnName = '分析人员';
                        width = '120px';
                        break;
                    case "review":
                        columnName = '复核人员';
                        width = '120px';
                        break;
                    case "authorise":
                        columnName = '审核人员';
                        width = '120px';
                        break;
                    case "approval":
                        columnName = '终审人员';
                        width = '120px';
                        break;
                    case "SampleIsPass":
                        columnName = '判定结果';
                        width = '120px';
                        break;
                    default:
                        columnName = dataItem;
                        cellClass = "cell-value";
                        if (dataItem.indexOf("_") == -1) {
                            width = '150px';
                        };
                        break;
                }

                if (columnName == "指标") {
                    var column = {
                        field: dataItem,
                        title: columnName,
                        locked: locked,
                        lockable: false,
                        width: width,
                        hidden: hidden,
                        groupHeaderTemplate: "指标：#= value  #"
                    };
                }
                else {
                    var column = {
                        field: "['" + dataItem + "']",
                        title: columnName.replace("Text_", "").replace("_", "<br/>"),
                        locked: locked,
                        lockable: false,
                        width: width,
                        hidden: hidden,
                        attributes: {
                            class: cellClass
                        },
                    };
                }
                columns.push(column);
            }
        }
        return columns;

这是会根据gridData生成对应的列。那么我们接下去需要做数据绑定

   dataSource: {
                    data: $.parseJSON(gridData.Data),
                    serverPaging: true,
                    serverFiltering: true,
                    pageSize: KEYSAMPLEPOINTSELECPAGESIZE,
                    page: pageIndex,

                    sort: [{
                        field: "SamplingTime", dir: "asc"
                    }],
                    schema: {
                        total: function () {
                            return gridData.Total;
                        },
                        model: {
                            id: 'Code'
                        }
                    }
                },

通过dataSource的方式，我们就把数据给绑定到Grid上了，一个简单的行专列就实现了