如何使用Kendo UI treeView基于远程数据生成树视图

How do I generate a treeView based on remote data using Kendo UI TreeView?

本文关键字：于远程 数据 生成树 视图 treeView 何使用 Kendo UI      更新时间：2023-09-26

我已经阅读了所有关于这方面的文档，但我仍然无法使其发挥作用。

我有一个Web API，它提供了一个JSON对象。这是一份22件事的清单。只有22行文字。

我想把这些做成一个树视图。这22个字符串中的每个字符串下面都有项目，但我只想让第一部分发挥作用。

我的第一个问题是，如何从API中提取数据并用它填充树视图？

在我的主页上，我有这样的：

<div id="treeView"></div>

在我的JavaScript文件上，我有这样的：

$("#treeView").kendoTreeView({
    checkboxes: true,
    dataSource: {
        transport: {
            read: {
                url: "http://...",
                dataType: "json"
            }
        }
    }
});

当我尝试运行页面时，我得到"请求失败"。[重试]

如果我打开浏览器并转到这个URL，数据会以JSON对象的形式返回。

我在这里做错了什么？

编辑-

返回JSON:的代码

public List<string> getNotificationByUser(int id)
{
      List<string> notificationTitles = new List<string>();
      foreach (var notification in notifications)
      {
          notificationTitles.Add(notification.ToString());
      }
      return notificationTitles;
}

好！我已经能够重现你的错误。问题是22行文本不是有效的JSON。

返回类似以下内容：

This
is
a
test

不是有效的JSON。

但是一个有效的JSON是不够的，您应该返回如下内容：

[
    { "text": "This" },
    { "text": "is" },
    { "text": "a" },
    { "text": "test" }
]

即：结果应该是一个对象数组，其中每个对象都有一个text字段。

注意我知道它不必称为text，但为了简单起见，我使用了它，因为它是默认值。

我找到了所有的答案：

function CreateNotificationTree(userId)
{
    debugger;
    var data = new kendo.data.HierarchicalDataSource({
        transport: {
            read: {
                url: "../api/notifications/byuserid/" + userId,
                contentType: "application/json"
            }
        },
        schema: {
            model: {
                children: "notifications"
            }
        }
    });
    $("#treeview").kendoTreeView({
        dataSource: data,
        loadOnDemand: true,
        dataUrlField: "LinksTo",
        checkboxes: {
            checkChildren: true
        },
        dataTextField: ["notificationType", "NotificationDesc"],
        select: treeviewSelect
    });
    function treeviewSelect(e)
    {
        var node = this.dataItem(e.node);
        window.open(node.NotificationLink, "_self");
    }
}
[HttpGet]
public List<Node> getNotifications(int id)
{
    var bo = new HomeBO();
    var list = bo.GetNotificationsForUser(id);
    var notificationTreeNodes = (from GBLNotifications n in list
                                 where n.NotificationCount != 0
                                 select new NotificationTreeNode(n)).ToList();
    var li = notificationTreeNodes.Select(no => new Node
    {
            notificationType = no.NotificationNode.NotificationType + " " + "(" + no.NotificationNode.NotificationCount + ")", notifications = bo.GetNotificationsForUser(id, no.NotificationNode.NotificationTypeId).Cast<GBLNotifications>().Select(item => new Notification
            {
                    ID = item.NotificationId, NotificationDesc = item.NotificationDescription, Params = new List<NotificationParam>
                    {
                            new NotificationParam
                            {
                                    ParamName = item.Param1, ParamVal = item.ParamValue1
                            },
                            new NotificationParam
                            {
                                    ParamName = item.Param2, ParamVal = item.ParamValue2
                            },
                            new NotificationParam
                            {
                                    ParamName = item.Param3, ParamVal = item.ParamValue3
                            },
                            new NotificationParam
                            {
                                    ParamName = item.Param4, ParamVal = item.ParamValue4
                            },
                            new NotificationParam
                            {
                                    ParamName = item.Param5, ParamVal = item.ParamValue5
                            },
                    },
                    ActionPageName = item.ActionPageName
            }).ToList()
    }).ToList();
    li.ForEach(i => i.notifications.ForEach(x => x.SetNotificationLink()));
    return li;
}
相关文章：