asp.net-mvc - 使用数据源加载 Kendo UI 面板栏

Question

我正在尝试使用数据源动态加载面板栏。实际上在文档中我只使用了 ajax 的信息，所以我已经实现了这样的，

    $.ajax({                        
                type: "POST",
                url: '/Home/GetPanelInfo',
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (json) {

                    $("#panelBar").kendoPanelBar({
                        expandMode: "single",
                        id: "usr_id",
                        dataSource: [{ text: json[0].groups_name, expand: true, contentUrl: "/Home/Index" },
                                     { text: json[1].groups_name, expand: true, contentUrl: "/Home/Index" },
                                     { text: json[3].groups_name, expand: true, contentUrl: "/Home/Index"}]
                    });
                }
});

但是这样我无法显示所有值，我认为这不是加载面板栏以显示所有值的正确方法，如何在面板栏中显示所有值

Answer 1

你应该迭代你的结果数组。您可以使用jQuery Map 函数，例如：

$.ajax({                        
            type: "POST",
            url: '/Home/GetPanelInfo',
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (json) {
                var dataSource = $.map(json, function(obj){
                    return {
                        text: obj.groups_name,
                        expand: true,
                        contentUrl: "/Home/Index" 
                    };
                });

                $("#panelBar").kendoPanelBar({
                    expandMode: "single",
                    id: "usr_id",
                    dataSource: dataSource 
                });
            }
});