动态剑道网格冻结答案

【问题标题】：dynamic Kendo grid freeze动态剑道网格冻结
【发布时间】：2015-09-10 09:17:17
【问题描述】：
我正在动态填充网格，如下面的链接所述。
是否有任何现成的功能可以冻结第一列？
【问题讨论】：
标签： dynamic kendo-ui telerik grid kendo-grid
【解决方案1】：
请尝试以下代码 sn-p。
<!DOCTYPE html>
<html>
<head>
    <base href="http://demos.telerik.com/kendo-ui/dropdownlist/angular">
    <style>
        html {
            font-size: 14px;
            font-family: Arial, Helvetica, sans-serif;
        }
    </style>
    <title></title>
    <link rel="stylesheet" href="//kendo.cdn.telerik.com/2015.2.805/styles/kendo.common.min.css" />
    <link rel="stylesheet" href="//kendo.cdn.telerik.com/2015.2.805/styles/kendo.default.min.css" />

    <script src="//kendo.cdn.telerik.com/2015.2.805/js/jquery.min.js"></script>
    <script src="//kendo.cdn.telerik.com/2015.2.805/js/angular.min.js"></script>
    <script src="//kendo.cdn.telerik.com/2015.2.805/js/kendo.all.min.js"></script>
</head>
<body>
    <div id="grid"></div>

    <script type="text/javascript">

        //example data received from remote source via jQuery ajax merthod
        var data = [{
            "Name": "daya",
            "Role": "Developer",
            "Dept": "Dev",
            "Date": "\/Date(836438400000)\/",
            "Balance": 23
        }, {
            "Name": "siva",
            "Role": "Developer",
            "Dept": "Dev",
            "Date": "\/Date(836438400000)\/",
            "Balance": 23
        }, {
            "Name": "sivadaya",
            "Role": "Developer",
            "Dept": "Dev",
            "Date": "\/Date(836438400000)\/",
            "Balance": 23
        }, {
            "Name": "dayasiva",
            "Role": "Developer",
            "Dept": "Dev",
            "Date": "\/Date(836438400000)\/",
            "Balance": 23
        }];

        //in the success handler of the ajax method call the function below with the received data:
        var dateFields = [];
        generateGrid(data)

        function generateGrid(gridData) {

            var model = generateModel(gridData[0]);

            var parseFunction;
            if (dateFields.length > 0) {
                parseFunction = function (response) {
                    for (var i = 0; i < response.length; i++) {
                        for (var fieldIndex = 0; fieldIndex < dateFields.length; fieldIndex++) {
                            var record = response[i];
                            record[dateFields[fieldIndex]] = kendo.parseDate(record[dateFields[fieldIndex]]);
                        }
                    }
                    return response;
                };
            }

            var grid = $("#grid").kendoGrid({
                dataSource: {
                    data: gridData,
                    schema: {
                        model: model,
                        parse: parseFunction
                    }
                },
                toolbar: ["create", "save"],
                columns: getenerateColumn(model),
                editable: true,
                sortable: true
            });

        }

        function getenerateColumn(gridData) {
            var datas = gridData;
            var columnArray = [];
            var IsFirstColumn = true;

            for (var i in datas.fields) {
                if (IsFirstColumn) {
                    columnArray.push({ field: i, sortable: false, title: i, locked: true, width: 150 });
                    IsFirstColumn = false;
                }
                else {
                    columnArray.push({ field: i, sortable: false, title: i, width: 500 });
                }

            }
            return columnArray;
        }

        function generateModel(gridData) {
            var model = {};
            model.id = "ID";
            var fields = {};
            for (var property in gridData) {
                var propType = typeof gridData[property];

                if (propType == "number") {
                    fields[property] = {
                        type: "number",
                        validation: {
                            required: true
                        }
                    };
                } else if (propType == "boolean") {
                    fields[property] = {
                        type: "boolean",
                        validation: {
                            required: true
                        }
                    };
                } else if (propType == "string") {
                    var parsedDate = kendo.parseDate(gridData[property]);
                    if (parsedDate) {
                        fields[property] = {
                            type: "date",
                            validation: {
                                required: true
                            }
                        };
                        dateFields.push(property);
                    } else {
                        fields[property] = {
                            validation: {
                                required: true
                            }
                        };
                    }
                } else {
                    fields[property] = {
                        validation: {
                            required: true
                        }
                    };
                }

            }
            model.fields = fields;

            return model;
        }

    </script>
</body>
</html>
如果有任何问题，请告诉我。
【讨论】：