javascript - 构建动态剑道网格时模板无效
问题描述
我正在构建一个带有动态列的动态 Kendo UI 网格。它无法将数据呈现到网格。
我正在使用 ASP.NET Core webAPI,它返回动态列及其数据。
我跟着这篇文章。
在我的 API 调用成功事件中,我执行以下逻辑:
onSuccess: function (readings) {
console.log(readings);
var myCoulmns = [];
var myFields = {}; // I am not using this
var model = generateModel(readings[0]);
readings.forEach(function (obj) {
for (key in obj) {
console.log(key + ': ' + obj[key]);
if (key === "Id") {
myCoulmns.push({
field: key,
title: key,
width: 240,
hidden: true
});
myFields["Id"] = { type: "number" };
}
else if (key === "RadioChannel") {
myCoulmns.push( {
field: "RadioChannel",
title: "Radio Channel",
width: 240
});
myFields["RadioChannel"]= { type: "string" };
}
else if (key === "Units") {
myCoulmns.push( {
field: "Units",
title: "Units",
width: 150
});
myFields["Units"] = { type: "string" };
} else {
myCoulmns.push( {
field: key,
title: getFormatedDate(key),
width: 200
//format: "{0:n}"
});
myFields[key] = { type: "number" };
}
}
});
$("#monitorReadingGrid").kendoGrid({
dataSource: {
schema: {
model: model
},
data: readings,
pageSize: 20
},
columns: myCoulmns,
height: 550,
scrollable: true,
sortable: false,
filterable: false,
//columMenu:true,
pageable: {
input: true,
numeric: false
}
});
//$("#montior-data").show();
}
其他功能
var isDateField = [];
function getFormatedDate(key) {
var day = key.substr(0, 2);
var month = key.substr(2, 3);
var year = key.substr(5, 4);
var hour = key.substr(9, 2);
var minute = key.substr(11, 2);
var tt = key.substr(13, 2);
return month + " " + day + ", " + year + " " + hour + ":" + minute + " " + tt;
}
function generateModel(dataItem) {
var model = {};
var fields = {};
for (var property in dataItem) {
if (property.indexOf("Id") !== -1) {
model["id"] = property;
}
var propType = typeof dataItem[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(dataItem[property]);
if (parsedDate) {
fields[property] = {
type: "date",
validation: {
required: true
}
};
isDateField[property] = true;
} else {
fields[property] = {
type: "string",
validation: {
required: true
}
};
}
} else {
fields[property] = {
validation: {
required: true
}
};
}
}
model.fields = fields;
return model;
}
这是从 webAPI 返回的数据:
[
{
"Id":1000,
"RadioChannel":"0D_A1",
"Units":"Gs",
"22May20190522PM":-367.25849333773,
"22May20190521PM":-367.25849333773,
"22May20190520PM":-368.24099331991,
"22May20190519PM":-367.84799332704,
"22May20190513PM":0.0,
"22May20190509PM":-367.84799332704,
"22May20190502PM":-367.45499333417,
"22May20190501PM":-367.25849333773,
"22May20190500PM":-366.37424335377,
"22May20190459PM":-367.94624332526
},
{
"Id":1010,
"RadioChannel":"0D_S1",
"Units":"uStrain",
"22May20190522PM":-236.57619777032,
"22May20190521PM":-235.62476990612,
"22May20190520PM":-235.66136328552,
"22May20190519PM":-239.68663501865,
"22May20190513PM":0.0,
"22May20190509PM":-239.39388798352,
"22May20190502PM":-237.56421901391,
"22May20190501PM":-239.0279541896,
"22May20190500PM":-237.27147197877,
"22May20190459PM":-237.63740577269
},
{
"Id":1020,
"RadioChannel":"Channel 0_Monitoring Temperature",
"Units":"Degree Farenheit",
"22May20190522PM":81.0,
"22May20190521PM":81.0,
"22May20190520PM":81.0,
"22May20190519PM":81.0,
"22May20190509PM":80.0,
"22May20190502PM":81.0,
"22May20190501PM":81.0,
"22May20190500PM":81.0,
"22May20190459PM":81.0
},
{
"Id":1030,
"RadioChannel":"Channel 1_Monitoring Temperature",
"Units":"Degree Farenheit",
"22May20190522PM":81.0,
"22May20190521PM":81.0,
"22May20190520PM":81.0,
"22May20190519PM":81.0,
"22May20190509PM":80.0,
"22May20190502PM":81.0,
"22May20190501PM":81.0,
"22May20190500PM":81.0,
"22May20190459PM":81.0
},
{
"Id":1040,
"RadioChannel":"AFE 0_Model and SN",
"Units":"General",
"22May20190522PM":16777219.0,
"22May20190521PM":16777219.0,
"22May20190520PM":16777219.0,
"22May20190519PM":16777219.0,
"22May20190509PM":16777219.0,
"22May20190502PM":16777219.0,
"22May20190501PM":16777219.0,
"22May20190500PM":16777219.0,
"22May20190459PM":16777219.0
},
{
"Id":1050,
"RadioChannel":"Ambient Temp",
"Units":"Degree Farenheit",
"22May20190522PM":79.0,
"22May20190521PM":79.0,
"22May20190520PM":79.0,
"22May20190519PM":79.0,
"22May20190513PM":0.0,
"22May20190509PM":79.0,
"22May20190502PM":79.0,
"22May20190501PM":79.0,
"22May20190500PM":79.0,
"22May20190459PM":79.0
},
{
"Id":1060,
"RadioChannel":"Core Temp",
"Units":"Degree Farenheit",
"22May20190522PM":79.0,
"22May20190521PM":79.0,
"22May20190520PM":79.0,
"22May20190519PM":79.0,
"22May20190513PM":0.0,
"22May20190509PM":79.0,
"22May20190502PM":79.0,
"22May20190501PM":79.0,
"22May20190500PM":79.0,
"22May20190459PM":79.0
}
]
我收到此错误:
VM48006:3 Uncaught SyntaxError: Invalid or unexpected token
at Function (<anonymous>)
at getter (kendo.all.js:2067)
at Object.<anonymous> (kendo.all.js:6082)
at each (jquery.js:360)
at new init (kendo.all.js:6068)
at new init (kendo.all.js:6384)
at Function.re.create (kendo.all.js:7990)
at init._dataSource (kendo.all.js:60997)
at new init (kendo.all.js:57304)
at HTMLDivElement.<anonymous> (kendo.all.js:2449)
如果我更改数据源(推荐模式),则会收到无效模板错误,但我没有在网格中使用任何模板。
dataSource: {
//schema: {
// model: model
//},
data: readings,
pageSize: 20
},
解决方案
问题在于您的 JSON 数据属性名称
[{"Id":1000,"RadioChannel":"0D_A1","Units":"Gs","22May20190522PM":-367.25849333773,"22May20190521PM":-367.25849333773,"22May20190520PM":-368.24099331991,"22May20190519PM":-367.84799332704,"22May20190513PM":0.0,"22May20190509PM":-367.84799332704,"22May20190502PM":-367.45499333417,"22May20190501PM":-367.25849333773,"22May20190500PM":-366.37424335377,"22May20190459PM":-367.94624332526}]
如果您将属性名称更改为以字符串而不是数字开头,那么您的所有代码都可以正常工作。
22May20190520PM => May2220190520PM
推荐阅读
- z3 - 如何通过 Z3 或 SMT-Lib 添加新逻辑?
- c# - 干净架构中的存储库模式不违反依赖倒置原则吗?
- javascript - 使用状态 React 动态更新样式属性
- android - 无法从网络安全配置 XML 中引用原始资源
- hyperledger-fabric - 当 peer admin 无权写入 orderer 时,如何创建通道?
- ajax - 来自 GIPHY API 上的异步回调的未定义响应
- kendo-ui - 为什么我的 Kendo ListBox TransferAll 不起作用
- django - 如何使用 django send_mail() 将电子邮件放入已发送文件夹?
- wpf - 成员“IsChecked”无法识别或无法访问。谁能帮我解决这个问题
- reactjs - 如何返回具有递增或递减值的 redux 状态?