Kendo UI 重新加载树视图答案

【问题标题】：Kendo UI reload treeviewKendo UI 重新加载树视图
【发布时间】：2013-07-24 07:13:23
【问题描述】：

我通过 ajax 使用 kendo ui 加载了一个复杂的树视图，因为我需要通过一个请求加载树（工作正常）：

$(document).ready(function() {    
    buildTree();        
});

function buildTree(){
    $.getJSON("admin_get_treedata.php", function (data) {
        $("#treeview").kendoTreeView({
            select: function(item) { editTreeElement(item,'tree'); },
            dataSource: data
        });
    })
}

如果我在通过 ajax 更改一些数据后尝试重新加载完整的树，那么新的构建树将无法正常工作并且不会更新文本。

  $.ajax({
        type: 'POST',
        url: 'ajax/ajax_update_layer.php',
        data: {
            layerid:id,
            ...
        },
        success: function(data){
                      buildTree();
                }
        });

我能做什么？谢谢斯文

【问题讨论】：

很有趣，我正在尝试做同样的事情。我从树中删除了一些节点，然后我尝试调用构建它的函数，但它没有按预期工作。不幸的是，stackoverflow 在 KendoUI 技能方面缺乏。

标签： kendo-ui

【解决方案1】：

在 ajax 成功回调上试试这个

var data = $("#treeView").data('kendoTreeView');
    data.dataSource.read();

【讨论】：

【解决方案2】：

我让我的工作。

这就是我所做的：

创建树视图的函数：

function CreateNotificationTree(userId)
{
    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 $item = this.dataItem(e.node);
        window.open($item.NotificationLink, "_self");
    }
}

修改&数据源刷新：

$('#btnDelete').on('click', function()
{
    var treeView = $("#treeview").data("kendoTreeView");
    var userId = $('#user_id').val();

    $('#treeview').find('input:checkbox:checked').each(function()
    {
        var li = $(this).closest(".k-item")[0];
        var notificationId = treeView.dataSource.getByUid(li.getAttribute('data-uid')).ID;

        if (notificationId == "undefined")
        {
            alert('No ID was found for one or more notifications selected. These notifications will not be deleted. Please contact IT about this issue.');
        }
        else
        {
            $.ajax(
                {
                    url: '../api/notifications/deleteNotification?userId=' + userId + '&notificationId=' + notificationId,
                    type: 'DELETE',
                    success: function()
                    {
                        CreateNotificationTree(userId);
                        alert('Delete successful.');

                    },
                    failure: function()
                    {
                        alert('Delete failed.');
                    }
                });
            treeView.remove($(this).closest('.k-item'));
        }
    });
});

希望对您有所帮助。

【讨论】：