Kendo 网格未根据 API 请求填充
Kendo grid doesnt populate from API request
我正在使用 Kendo UI，特别是 kendo 网格和 kendo 数据源。
我正在从本地 API 获取数据。数据正在正确检索（在邮递员中检查）。我将此获取结果保存（或试图保存）在 kendo 数据源中。
然后我在创建网格时将此数据源作为参数传递。不幸的是，网格没有显示任何结果...
代码如下：
<script>
var inputLe = localStorage.getItem("storageLe");
$(document).ready(function () {
var gridDataSource = new kendo.data.DataSource({
transport: {
read:{
url: "http://localhost:3000/api/reg",
dataType: "jsonp",
type: "GET",
}
},
schema:{
//data: "data",
model:{
// id: "id",
fields:{
id: { type: "number" },
Number: { type: "string" },
Date: { type: "date" },
Amout: { type: "number" },
Net: { type: "number" },
Category: { type: "string" },
Commen: { type: "string" },
Entity: { type: "string" },
Quart: { type: "string" },
Confirmed: { type: "boolean" },
Stat: { type: "boolean" }
}
}
},
//serverFiltering : true,
//filter : [
// {field: "Legal_Entity", operator: "eq", value: "3800" },
//]
});
$("#grid").kendoGrid({
dataSource: gridDataSource,
height: 700,
editable: "incell",
groupable: true,
sortable: true,
toolbar: ["excel", "pdf", "search",{name:'new', text:'Create Comment', iconClass:"k-icon k-i-plus"}],
dataBound: onDataBound,
pageable: {
refresh: true,
pageSizes: true,
buttonCount: 5
},
columns: [
{
field: "Number",
title: "Number"
}, {
field: "Date",
title: "Date",
format: "{0:dd/MM/yyyy}"
}, {
field: "Amout",
title: "Amount"
}, {
field: "Net",
title: "Net"
}, {
field: "Category",
title: "Category"
}, {
field: "Commen",
title: "Comment",
width: 300
}, {
field: "Entity",
title: "Entity"
}, {
field: "Quart",
title: "Quarter"
}, {
field: "Confirmed",
title: "Confirmed",
}, {
field: "Stat",
title: "Status",
}
]
});
});
window.localStorage.removeItem("storageLe");
//edit to fetch in the comment drodown the categories
function clinetCategoryEditor(container, options) {
$('<input required name="Commen">')
.appendTo(container)
.kendoDropDownList({
autoBind: false,
dataTextField: "CategoryName",
dataValueField: "CategoryID",
dataSource: {
data: categories
}
});
}
//function that set the boolean status of Stat and show matched or unmatched with colors
function onDataBound(e){
var grid = this;
grid.table.find("tr").each(function(){
var dataItem = grid.dataItem(this);
var themeColor = dataItem.Stat ? 'success' : 'error';
var text = dataItem.Stat ? 'Matched' : 'Unmatched';
$(this).find(".badgeTemplate").kendoBadge({
themeColor: themeColor,
text: text,
});
});
}
</script>
<!DOCTYPE html>
<html>
<head>
<title>Grid</title>
<link rel="stylesheet" href="styles/kendo.common.min.css">
<link rel="stylesheet" href="styles/kendo.default.min.css">
<link rel="stylesheet" href="styles/kendo.default.mobile.min.css">
<link rel="stylesheet" href="styles/kendo.rtl.min.css">
<link rel="stylesheet" href="styles/kendo.silver.min.css">
<script src="js/jquery.min.js"></script>
<script src="js/kendo.all.min.js"></script>
<script src="js/pako_deflate.min.js"></script>
<script src="js/jszip.min.js"></script>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/estilo.css">
<link rel="stylesheet" href="css/daterangepicker.css">
</head>
<body>
<div>
<p>
<h1>Some</h1>
</p>
</div>
<div id="container">
<div id="grid"></div>
</div>
这里是 json return 来自 API:
的示例
{
“编号”：512，
"数": "00000",
“日期”：“2000-05-01T03：00：00.000Z”，
“金额”：-999.99，
“净”：0，
“类别”：“00”，
"Commen": "一些评论",
“实体”：“1234”，
"夸脱": "2",
“确认”：1，
“统计”：1
}
提前致谢。
Edit1：将所有函数放在代码段上。
Edit2：控制台和网络选项卡的打印屏幕。
Edit3：新打印屏幕使用 json 而不是 jsonp（CORS 错误）
这是一个根据您的示例填充数据的网格示例。根据我的评论“你试过 data:[...]”，你回答说没有数据。在此示例中，网格显示数据。这意味着问题不在于您的网格。它必须在 transport 中。您的本地主机 api 是否返回一个数组？由于您的示例代码不清楚并且不是最低限度的可重现工作示例，我希望下面的示例可以帮助您查明问题。在 Telerik DOJO 或任何你喜欢的地方试试。
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.2.616/styles/kendo.default-v2.min.css" />
<script src="https://kendo.cdn.telerik.com/2021.2.616/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2021.2.616/js/kendo.all.min.js"></script>
</head>
<body>
<div id="grid"></div>
<script>
$(document).ready(function () {
var gridDataSource = new kendo.data.DataSource({
data: [{ "id": 512, "Number": "00000", "Date": "2000-05-01T03:00:00.000Z", "Amout": -999.99, "Net": 0, "Category": "00", "Commen": "Some comment", "Entity": "1234", "Quart": "2", "Confirmed": 1, "Stat": 1 } ],
});
$("#grid").kendoGrid({
dataSource: gridDataSource,
height: 700,
editable: "incell",
groupable: true,
sortable: true,
toolbar: ["excel", "pdf", "search",{name:'new', text:'Create Comment', iconClass:"k-icon k-i-plus"}],
//dataBound: onDataBound,
pageable: {
refresh: true,
pageSizes: true,
buttonCount: 5
},
columns: [
{
field: "Number",
title: "Number"
}, {
field: "Date",
title: "Date",
format: "{0:dd/MM/yyyy}"
}, {
field: "Amout",
title: "Amount"
}, {
field: "Net",
title: "Net"
}, {
field: "Category",
title: "Category"
}, {
field: "Commen",
title: "Comment",
width: 300
}, {
field: "Entity",
title: "Entity"
}, {
field: "Quart",
title: "Quarter"
}, {
field: "Confirmed",
title: "Confirmed",
}, {
field: "Stat",
title: "Status",
}]
});
});
</script>
<style>
</style>
</div>
</body>
</html>
@jpllosa 的回答帮助我找到问题所在。只是添加这个答案来更好地解释我是如何解决这个问题的。
我正在使用 node express 后端与我的 MySQL 数据库通信，这里我必须允许使用 cors（如果你不熟悉 cors，我推荐这个 link：https://www.section.io/engineering-education/how-to-use-cors-in-nodejs-with-express/)
所以我的主要问题是当我的数据是“JSON”时，我正在等待“JSONP”。使用“JSON”类型时，我收到了 CORS 错误消息，正如您在我上一张来自原始 post.
的图片中看到的那样
为了允许 cors，我在 server.js 文件中使用了以下代码：
const cors = require('cors');
app.use(cors({
origin: '*'
}));
在提到的 link 中，您可以了解如何将特定域添加到 API 或使用所有带“*”字符的域。
再次感谢@jpllosa 的回答和花时间在这里帮助我。
我正在使用 Kendo UI，特别是 kendo 网格和 kendo 数据源。
我正在从本地 API 获取数据。数据正在正确检索（在邮递员中检查）。我将此获取结果保存（或试图保存）在 kendo 数据源中。
然后我在创建网格时将此数据源作为参数传递。不幸的是，网格没有显示任何结果...
代码如下：
<script>
var inputLe = localStorage.getItem("storageLe");
$(document).ready(function () {
var gridDataSource = new kendo.data.DataSource({
transport: {
read:{
url: "http://localhost:3000/api/reg",
dataType: "jsonp",
type: "GET",
}
},
schema:{
//data: "data",
model:{
// id: "id",
fields:{
id: { type: "number" },
Number: { type: "string" },
Date: { type: "date" },
Amout: { type: "number" },
Net: { type: "number" },
Category: { type: "string" },
Commen: { type: "string" },
Entity: { type: "string" },
Quart: { type: "string" },
Confirmed: { type: "boolean" },
Stat: { type: "boolean" }
}
}
},
//serverFiltering : true,
//filter : [
// {field: "Legal_Entity", operator: "eq", value: "3800" },
//]
});
$("#grid").kendoGrid({
dataSource: gridDataSource,
height: 700,
editable: "incell",
groupable: true,
sortable: true,
toolbar: ["excel", "pdf", "search",{name:'new', text:'Create Comment', iconClass:"k-icon k-i-plus"}],
dataBound: onDataBound,
pageable: {
refresh: true,
pageSizes: true,
buttonCount: 5
},
columns: [
{
field: "Number",
title: "Number"
}, {
field: "Date",
title: "Date",
format: "{0:dd/MM/yyyy}"
}, {
field: "Amout",
title: "Amount"
}, {
field: "Net",
title: "Net"
}, {
field: "Category",
title: "Category"
}, {
field: "Commen",
title: "Comment",
width: 300
}, {
field: "Entity",
title: "Entity"
}, {
field: "Quart",
title: "Quarter"
}, {
field: "Confirmed",
title: "Confirmed",
}, {
field: "Stat",
title: "Status",
}
]
});
});
window.localStorage.removeItem("storageLe");
//edit to fetch in the comment drodown the categories
function clinetCategoryEditor(container, options) {
$('<input required name="Commen">')
.appendTo(container)
.kendoDropDownList({
autoBind: false,
dataTextField: "CategoryName",
dataValueField: "CategoryID",
dataSource: {
data: categories
}
});
}
//function that set the boolean status of Stat and show matched or unmatched with colors
function onDataBound(e){
var grid = this;
grid.table.find("tr").each(function(){
var dataItem = grid.dataItem(this);
var themeColor = dataItem.Stat ? 'success' : 'error';
var text = dataItem.Stat ? 'Matched' : 'Unmatched';
$(this).find(".badgeTemplate").kendoBadge({
themeColor: themeColor,
text: text,
});
});
}
</script>
<!DOCTYPE html>
<html>
<head>
<title>Grid</title>
<link rel="stylesheet" href="styles/kendo.common.min.css">
<link rel="stylesheet" href="styles/kendo.default.min.css">
<link rel="stylesheet" href="styles/kendo.default.mobile.min.css">
<link rel="stylesheet" href="styles/kendo.rtl.min.css">
<link rel="stylesheet" href="styles/kendo.silver.min.css">
<script src="js/jquery.min.js"></script>
<script src="js/kendo.all.min.js"></script>
<script src="js/pako_deflate.min.js"></script>
<script src="js/jszip.min.js"></script>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/estilo.css">
<link rel="stylesheet" href="css/daterangepicker.css">
</head>
<body>
<div>
<p>
<h1>Some</h1>
</p>
</div>
<div id="container">
<div id="grid"></div>
</div>
这里是 json return 来自 API:
的示例{ “编号”：512， "数": "00000", “日期”：“2000-05-01T03：00：00.000Z”， “金额”：-999.99， “净”：0， “类别”：“00”， "Commen": "一些评论", “实体”：“1234”， "夸脱": "2", “确认”：1， “统计”：1 }
提前致谢。
Edit1：将所有函数放在代码段上。
Edit2：控制台和网络选项卡的打印屏幕。
Edit3：新打印屏幕使用 json 而不是 jsonp（CORS 错误）
这是一个根据您的示例填充数据的网格示例。根据我的评论“你试过 data:[...]”，你回答说没有数据。在此示例中，网格显示数据。这意味着问题不在于您的网格。它必须在 transport 中。您的本地主机 api 是否返回一个数组？由于您的示例代码不清楚并且不是最低限度的可重现工作示例，我希望下面的示例可以帮助您查明问题。在 Telerik DOJO 或任何你喜欢的地方试试。
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.2.616/styles/kendo.default-v2.min.css" />
<script src="https://kendo.cdn.telerik.com/2021.2.616/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2021.2.616/js/kendo.all.min.js"></script>
</head>
<body>
<div id="grid"></div>
<script>
$(document).ready(function () {
var gridDataSource = new kendo.data.DataSource({
data: [{ "id": 512, "Number": "00000", "Date": "2000-05-01T03:00:00.000Z", "Amout": -999.99, "Net": 0, "Category": "00", "Commen": "Some comment", "Entity": "1234", "Quart": "2", "Confirmed": 1, "Stat": 1 } ],
});
$("#grid").kendoGrid({
dataSource: gridDataSource,
height: 700,
editable: "incell",
groupable: true,
sortable: true,
toolbar: ["excel", "pdf", "search",{name:'new', text:'Create Comment', iconClass:"k-icon k-i-plus"}],
//dataBound: onDataBound,
pageable: {
refresh: true,
pageSizes: true,
buttonCount: 5
},
columns: [
{
field: "Number",
title: "Number"
}, {
field: "Date",
title: "Date",
format: "{0:dd/MM/yyyy}"
}, {
field: "Amout",
title: "Amount"
}, {
field: "Net",
title: "Net"
}, {
field: "Category",
title: "Category"
}, {
field: "Commen",
title: "Comment",
width: 300
}, {
field: "Entity",
title: "Entity"
}, {
field: "Quart",
title: "Quarter"
}, {
field: "Confirmed",
title: "Confirmed",
}, {
field: "Stat",
title: "Status",
}]
});
});
</script>
<style>
</style>
</div>
</body>
</html>
@jpllosa 的回答帮助我找到问题所在。只是添加这个答案来更好地解释我是如何解决这个问题的。
我正在使用 node express 后端与我的 MySQL 数据库通信，这里我必须允许使用 cors（如果你不熟悉 cors，我推荐这个 link：https://www.section.io/engineering-education/how-to-use-cors-in-nodejs-with-express/)
所以我的主要问题是当我的数据是“JSON”时，我正在等待“JSONP”。使用“JSON”类型时，我收到了 CORS 错误消息，正如您在我上一张来自原始 post.
的图片中看到的那样为了允许 cors，我在 server.js 文件中使用了以下代码：
const cors = require('cors');
app.use(cors({
origin: '*'
}));
在提到的 link 中，您可以了解如何将特定域添加到 API 或使用所有带“*”字符的域。
再次感谢@jpllosa 的回答和花时间在这里帮助我。