【发布时间】：2018-08-08 00:58:40
【问题描述】：
我正在尝试在我的网格上使用自定义行模板，这样我就可以为网格中的各个单元格提供各种类声明。
无论我在哪里声明，我试图调用以返回 css 类的字符串的函数始终是未定义的。
这是我的网格声明文件的代码：
(function(){
'use strict';
var logPrefix = 'sampleRequestTrackingGrid --> ';
var rowTemplateString =
'<tr data-uid="#= uid #">' +
'<td>#: requestedBy #</td>' +
'<td>#: site #</td>' +
'<td>#: sampleLot#</td>' +
'<td>#: sampleProcess #</td>' +
'<td>#: workOrderId #</td>' +
'<td>#: equipmentId #</td>' +
'<td>#: area #</td>' +
'<td>#: cell #</td>' +
'<td>#: station #</td>' +
'<td>#: testMethods #</td>' +
'<td>#: requestedDate #</td>' +
'<td class="#: getStatus(requestStatus) #">#: requestStatus #</td>' +
'<td>#: requestStatusMsg #</td>' +
'<td>#: requestId #</td>' +
'</tr';
function getStatus(requestStatus){
if(requestStatus === 'In Queue'){
return 'inQueue';
}
else if(requestStatus === 'In Progress'){
return 'inProgress';
}
else if(requestStatus === 'Complete'){
return 'complete';
}
else if(requestStatus === 'Failed'){
return 'failed';
}
}
angular.module('wm.sampleRequestTracking')
.constant('SampleRequestTrackingGrid', {
options: function(model){
return {
dataBound: model.onGridDataBound,
dataSource: {
data: model.gridData,
schema: {
model: {
id: "requestSysI",
fields: {
requestSysI: {editable: false},
requestedBy: {editable: false},
site: {editable: false},
sampleLot: {editable: false},
sampleProcess: {editable: false},
workOrderId: {editable: false},
equipmentId: {editable: false},
area: {editable: false},
cell: {editable: false},
station: {editable: false},
testMethods: {editable: false},
requestedDate: {editable: false, type: "datetime"},
requestStatus: {editable: false},
requestStatusMsg: {editable: false},
requestId: {editable: false}
}
}
},
pageSize: 200
},
scrollable: true,
resizable: true,
reorderable: true,
pageable: true,
groupable:true,
filterable: true,
autobind: false,
columnMenu: true,
navigatable: true,
selectable: true,
sortable: {mode: "multiple"},
columns: [
{field: "requestedBy", title: "Requested By", width: "100px", hidden: false},
{field: "site", title: "Site", width: "100px", hidden: false},
{field: "sampleLot", title: "Lot", width: "100px", hidden: false},
{field: "sampleProcess", title: "Process", width: "100px", hidden: false},
{field: "workOrderId", title: "Work Order", width: "100px", hidden: false},
{field: "equipmentId", title: "Equipment", width: "100px", hidden: false},
{field: "area", title: "Request Area", width: "100px", hidden: false},
{field: "cell", title: "Request Cell", width: "100px", hidden: false},
{field: "station", title: "Request Station", width: "100px", hidden: false},
{field: "testMethods", title: "Test Methods", width: "100px", hidden: false},
{field: "requestedDate", title: "Request Date", width: "100px", hidden: false},
{field: "requestStatus", title: "Request Status", width: "100px", template: "<span id='reqStatus'>#=requestStatus#</span>"},
{field: "requestId", title: "Request Id", width: "100px", hidden: false}
],
rowTemplate: rowTemplateString
};
}
});
})();
假设一切正常，我将使用 .less 文件中的以下 CSS 更改类的背景颜色
.inQueue {
background-color: white;
}
.inProgress {
background-color: #fda;
}
.complete {
background-color: #ced;
}
.failed {
background-color: #fdd;
}
但是，每次我运行代码并尝试加载网格时，我都会收到一条错误消息，告诉我 getStatus() 函数未定义。
谁能提供一些帮助来弄清楚我在这里做错了什么？
供参考：我关注的 Telerik 文章是 https://docs.telerik.com/kendo-ui/controls/data-management/grid/how-to/Layout/style-rows-cells-based-on-data-item-values
【问题讨论】：
-
不确定这是否会伤害您，但您的结束 tr 标签缺少 >
-
我已经解决了，谢谢。但这不是问题所在。我尝试通过将其放置在那里并使用
$scope.getStatus = getStatus;将其添加到控制器内的全局范围中，但这也无济于事 -
您是否尝试将
getStatus函数放在 IIFE 之外？
标签： css angularjs kendo-ui kendo-grid