使用HTTP POST通过Kendo tabstrip加载内容

时间:2016-08-05 20:11:27

标签: kendo-ui telerik http-post kendo-tabstrip

Kendo tabstrip接受通过HTTP GET将ContentUrl加载为ajax的内容,有没有办法通过POST加载此内容?

kendo tabstrip接受kendo.data.Datasource加载内容

请参阅http://dojo.telerik.com/EmECoy

$("#tabstrip").kendoTabStrip({
    dataTextField: "Name",
    dataContentUrlField: "ContentUrl",
    dataSource: [
      { Name: "Tab1", ContentUrl: "http://demos.telerik.com/kendo-ui/content/web/tabstrip/ajax/ajaxContent1.html" },
      { Name: "Tab2", ContentUrl: "http://demos.telerik.com/kendo-ui/content/web/tabstrip/ajax/ajaxContent2.html" }
    ]
});

kendo.data.DataSource有一个可用的READ 类型的“POST”,但我无法理解是否可以将此机制插入到tabtrip的内容加载中..或者我是否坚持使用一个AJAX GET调用来检索它?

1 个答案:

答案 0 :(得分:0)

以下是我的解决方案,可绕过用于加载内容的内置标签机制:http://dojo.telerik.com/omOre

标签定义中的空内容网址:

jQuery(function(){jQuery("#tabstrip").kendoTabStrip({"select":onselect,"activate":onactivate,"contentLoad":onContentLoad,"animation":false,"contentUrls":["","","",""]});});

//Track our content
var tabcontent = [{"contentloaded":true},{"url":"http://demos.telerik.com/kendo-ui/content/web/tabstrip/ajax/ajaxContent1.html"},{"url":"http://demos.telerik.com/kendo-ui/content/web/tabstrip/ajax/ajaxContent2.html"},{"url":"http://demos.telerik.com/kendo-ui/content/web/tabstrip/ajax/ajaxContent3.html"} ];

实施"选择"事件   - 确定我们是否应该通过AJAX加载选项卡(帖子)   - 跟踪选项卡是否已加载

//When selected, if ajax and not not loaded - load the content
  function onselect(e) {
      console.log("select");            
        var index = $(e.item).index();
        var taburl =    tabcontent[index].url;
        var contentloaded = tabcontent[index].contentloaded;

          if(taburl !== "" && contentloaded !== true)
          {
              //get reference to the TabStrip widget
            var ts = $("#tabstrip").data("kendoTabStrip");

            //get the tab content
            var item = ts.contentElement(index);                 

            $.ajax({
              type: "get",//simple change! "post",
              url: taburl,
              success: function (response) {                         
                $(item).html(response);
                tabcontent[index].contentloaded = true;
                console.log("Tab Index: " + index + ", Url: " + taburl + " [[ajax success]]");
              }
            });
              }
          }