我正在尝试在网格上使用自定义行模板，以便为网格中的单个单元格提供各种类声明。
无论我在哪里声明，我试图调用以返回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
答案 0 :(得分：0)
我最终没有使用行模板，因为我意识到这对我需要的东西有点不必要而且太复杂了，于是修改了我的字段模板。
此外，正如@Soham所说，将getStatus函数放在IIFE之外确实有效。我以前曾经做过，但是也许是因为我以前在tr上打错了才失败。
(function(){
'use strict';
var logPrefix = 'sampleRequestTrackingGrid --> ';
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},
batteryId: {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: "batteryId", title: "Battery", width: "100px", hidden: false},
{field: "site", title: "Site", width: "100px", hidden: false},
{field: "sampleLot", title: "Lot", width: "150px", hidden: false},
{field: "sampleProcess", title: "Process", width: "150px", 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: "<div class='#=getStatus(requestStatus)#' id='reqStatus' style='text-align: center'>#=requestStatus#</div>"},
{field: "requestId", title: "Request Id", width: "100px", hidden: false}
]
};
}
});
})();
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';
}
}
最终结果是： screenshot of column
