【发布时间】：2017-09-22 15:08:17
【问题描述】：
我有一个 Kendo Grid，我将它动态绑定到 JSON 对象。
在generateColumns函数中，我想调用getKendoColor函数。但是，我需要传递列单元格值。在下面的代码中，我强制使用“RED”来显示它应该如何工作。
如何将列值传递给这个 getKendoColor 函数？
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Kendo UI Snippet</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.913/styles/kendo.common.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.913/styles/kendo.rtl.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.913/styles/kendo.silver.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.913/styles/kendo.mobile.all.min.css"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2017.3.913/js/kendo.all.min.js"></script>
</head>
<body>
<div id="grid" style="width:1000px;"></div>
<script>
var isDateField =[];
var isTaskField =[];
$.ajax({
url: "http://www.mocky.io/v2/59c4dd1e4000005400b25ba7",
dataType: "jsonp",
success: function(result) {
generateGrid(result);
}
});
function generateGrid(response) {
var model = generateModel(response);
var columns = generateColumns(response);
var grid = $("#grid").kendoGrid({
dataSource: {
transport:{
read: function(options){
options.success(response.Table);
}
},
pageSize: 5,
schema: {
model: model
}
},
columns: columns,
pageable: true,
editable:false
});
}
function generateColumns(response) {
var columnNames = response["columns"];
return columnNames.map(function (name) {
if (isTaskField[name]) {
return { field: name, template: '#= getKendoColor("RED") #', format: (isDateField[name] ? "{0:D}" : "") };
}
else
return { field: name, format: (isDateField[name] ? "{0:D}" : "") };
})
}
function generateModel(response) {
var sampleDataItem = response["Table"][0];
var model = {};
var fields = {};
for (var property in sampleDataItem) {
var itemValue = sampleDataItem[property];
if (property.indexOf("ID") !== -1) {
model["id"] = property;
}
var propType = typeof sampleDataItem[property];
if (propType === "number") {
fields[property] = {
type: "number",
validation: {
required: true
}
};
if (model.id === property) {
fields[property].editable = false;
fields[property].validation.required = false;
}
} else if (propType === "boolean") {
fields[property] = {
type: "boolean"
};
} else if (propType === "string") {
var parsedDate = kendo.parseDate(sampleDataItem[property]);
if (parsedDate) {
fields[property] = {
type: "date",
validation: {
required: true
}
};
isDateField[property] = true;
} else {
fields[property] = {
validation: {
required: true
}
};
if ((property !== "Entity") && (property !== "Period") && (property !== "Level"))
{
isTaskField[property] = true;
}
}
} else {
fields[property] = {
validation: {
required: true
}
};
}
}
model.fields = fields;
return model;
}
function getKendoColor(OverallStatus) {
OverallStatus = OverallStatus.toUpperCase();
//alert(OverallStatus);
var htmlRed = kendo.format('<div class="text-center"><div style="color:red"> <i class="fa fa-circle fa-lg"></i> </div> </div>');
var htmlGreen = kendo.format('<div class="text-center"><div style="color:green"> <i class="fa fa-circle fa-lg"></i> </div> </div>');
var htmlOrange = kendo.format('<div class="text-center"><div style="color:orange"> <i class="fa fa-circle fa-lg"></i> </div> </div>');
var htmlYellow = kendo.format('<div class="text-center"><div style="color:yellow"> <i class="fa fa-circle fa-lg"></i> </div> </div>');
switch (OverallStatus) {
case "RED":
return htmlRed;
case "GREEN":
return htmlGreen;
case "ORANGE":
return htmlOrange;
case "YELLOW":
return htmlYellow;
case "CREATED":
return htmlRed;
case "APPROVED":
return htmlGreen;
}
}
</script>
</body>
</html>【问题讨论】：
标签： kendo-ui kendo-grid kendo-template