剑道树视图的 JQuery 和 ASP.NET MVC json 输出
Posted
技术标签:
【中文标题】剑道树视图的 JQuery 和 ASP.NET MVC json 输出【英文标题】：JQuery and ASP.NET MVC json output for kendo treeview 【发布时间】：2021-07-14 22:44:40 【问题描述】：大家好，我在使用 ASP.net MVC 的 Kendo UI 时遇到问题，其中混合了用于数据检索的 jQuery。
我当前的 treeview 如下所示：
但是，我希望它看起来更像这样：
我必须使用的 JSON 结构如下所示：
"meta":
"total_results": 193,
"offset": 0,
"total_pages": 1
,
"object_list": [
"Name": "facebook",
"Description": null,
"Id": "eb8cb0c8c32d1201bff30cf54S4f30889abb23f92b1f7",
"DocumentType": null,
"ProviderId": 2,
"Cat": "Social Networks"
,
"Name": "twitter",
"Description": null,
"Id": "732fe66cce4365bc5074384f09b34e787f3f3efe8b55",
"DocumentType": null,
"ProviderId": 2,
"Cat": "Social Networks"
,
"Name": "Google",
"Description": null,
"Id": "8b11d6f7b74bf71a7ddbc62dcfead27087e0f3e047e",
"DocumentType": null,
"ProviderId": 2,
"Cat": "Search Engines"
,
...ETC...
这看起来需要被格式化为如下所示：
$("#treeview").kendoTreeView(
checkboxes:
checkChildren: true
,
check: onCheck,
dataSource: [
id: 1, text: "Categories", expanded: true, spriteCssClass: "rootfolder", items:
[
id: 2, text: "Social Networks", expanded: true, spriteCssClass: "folder",
items: [
id: 3, text: "facebook", spriteCssClass: "html" ,
id: 4, text: "twitter", spriteCssClass: "html" ,
id: 5, text: "WhatsApp", spriteCssClass: "image" ,
id: 6, text: "instagram", spriteCssClass: "image" ,
id: 7, text: "wechat", spriteCssClass: "image"
],
id: 8, text: "Search Engines", expanded: true, spriteCssClass: "folder",
items: [
id: 9, text: "Google", spriteCssClass: "image" ,
id: 10, text: "Yahoo!", spriteCssClass: "pdf"
]
]
]
);
所以我的问题 - 由于我无法修改发送给我的 JSON，如何将其转换为正确的 treeview 结构格式？以太解决方案（JQuery 或 ASP.net MVC）就可以了。
任何帮助都会很棒！
更新
【问题讨论】：
【参考方案1】：好消息是您实际上可以使用 dataSource.schema.parse 事件更改 Api 数据：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.1.330/styles/kendo.common.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.1.330/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.1.330/styles/kendo.default.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.1.330/styles/kendo.mobile.all.min.css">
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2021.1.330/js/angular.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2021.1.330/js/jszip.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2021.1.330/js/kendo.all.min.js"></script></head>
<body>
<div id="treeview"></div>
<script>
let apiData =
"meta":
"total_results": 193,
"offset": 0,
"total_pages": 1
,
"object_list": [
"Name": "facebook",
"Description": null,
"Id": "eb8cb0c8c32d1201bff30cf54S4f30889abb23f92b1f7",
"DocumentType": null,
"ProviderId": 2,
"Cat": "Social Networks"
,
"Name": "twitter",
"Description": null,
"Id": "732fe66cce4365bc5074384f09b34e787f3f3efe8b55",
"DocumentType": null,
"ProviderId": 2,
"Cat": "Social Networks"
,
"Name": "Google",
"Description": null,
"Id": "8b11d6f7b74bf71a7ddbc62dcfead27087e0f3e047e",
"DocumentType": null,
"ProviderId": 2,
"Cat": "Search Engines"
]
;
$("#treeview").kendoTreeView(
checkboxes:
checkChildren: true
,
dataSource:
data: apiData,
schema:
model:
children: 'items'
,
parse: (data) =>
// The new data array to be used by treeview
let newData = [];
data.object_list.forEach(item =>
// Look for an already created parent for that categoty
let parent = newData.find(parentItem => parentItem.text === item.Cat);
// If not found...
if (!parent)
// ... create a new one...
parent =
id: 2,
text: item.Cat,
expanded: true,
items: [],
spriteCssClass: "folder"
;
// ... and add it to the final data array.
newData.push(parent);
// Add the new item to the parent
parent.items.push(
id: 3,
text: item.Name,
spriteCssClass: "image"
);
);
// Return the root object with its new child items
return [
id: 1,
text: 'Categories',
expanded: true,
spriteCssClass: "rootfolder",
items: newData
];
);
</script>
</body>
</html>Dojo
【讨论】：
非常感谢！但是，在运行我的代码时，它似乎有错误 Cannot read property 'forEach' of undefined 由于 "object_list": 不存在于内部的最终 JSON 中数据解析。查看我的 OP，了解我的 JSON 在执行 console.log(data) 时的样子。以上是关于剑道树视图的 JQuery 和 ASP.NET MVC json 输出的主要内容，如果未能解决你的问题，请参考以下文章
用于 jQuery Mobile 控件的 Asp.Net MVC Razor 标记