Dynamic 动态剑道格网冻结
我正在动态填充网格,如下面的链接所述Dynamic 动态剑道格网冻结,dynamic,kendo-ui,telerik,grid,kendo-grid,Dynamic,Kendo Ui,Telerik,Grid,Kendo Grid,我正在动态填充网格,如下面的链接所述 是否有任何现成的功能可以冻结第一列?请尝试使用下面的代码段 <!DOCTYPE html> <html> <head> <base href="http://demos.telerik.com/kendo-ui/dropdownlist/angular"> <style> html { font-size: 14px;
是否有任何现成的功能可以冻结第一列?请尝试使用下面的代码段
<!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>
如果有任何问题,请告诉我