使用數據源加載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 function例如：

$.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 
       }); 
      } 
});