Tabstrip Kendo UI中的可過濾Listview

Question

我有一個帶有Kendo UI的3個選項卡式選項卡，每個選項卡都有其自己的filterable-listview。 選擇自己的標簽后，如何填充列表視圖？ 我有一個稱為mobilelistviewfiltering的方法，該方法應該填充第一個列表視圖，因此我希望在選擇第一個選項卡時執行它。 任何想法如何？

我會很高興。

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <base href="http://demos.telerik.com/kendo-ui/application/index"> <style>html { font-size: 12px; font-family: Arial, Helvetica, sans-serif; }</style> <title></title> <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.common.min.css" /> <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.default.min.css" /> <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.dataviz.min.css" /> <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.dataviz.default.min.css" /> <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.mobile.all.min.css" /> <script src="http://cdn.kendostatic.com/2014.3.1411/js/jquery.min.js"></script> <script src="http://cdn.kendostatic.com/2014.3.1411/js/kendo.all.min.js"></script> </head> <body> <div id="videos" style="height:100%;" data-role="view" data-show="videoShow"> <header data-role="header"> <div data-role="navbar"> <a data-role="backbutton" data-align="left">Geri</a> <span data-role="view-title"></span> </div> </header> <div class="test" style="width:100%;"> <div class="demo-section k-header"> <div id="tabstrip" class="whatever"> <ul> <li class="k-state-active" style="width:18%;"> Hepsi </li> <li style="width:38%;"> En Beğenilenler </li> <li style="width:43%;"> En Çok İzlenenler </li> </ul> <div class="realContent" data-init="mobileListViewFiltering"> <ul id="filterable-listview" data-bind="mobileListViewFiltering" data-role="listview" data-source="foo" data-pull-to-refresh="true" data-append-on-refresh="true" data-template="foo-template"> </ul> </div> <div class="realContent" data-init="mobileListViewFiltering"> <ul id="filterable-listview" data-role="listview" data-source="foo" data-pull-to-refresh="true" data-append-on-refresh="true" data-template="foo-template"> </ul> </div> <div class="realContent" data-init="mobileListViewFiltering"> <ul id="filterable-listview" data-role="listview" data-source="foo" data-pull-to-refresh="true" data-append-on-refresh="true" data-template="foo-template"> </ul> </div> </div> </div> <style scoped> #tabstrip { font-weight: lighter; font-size: 0.9em; line-height: 1; padding: 0; margin: 0; } </style> </div> <script> $(document).ready(function() { $("#tabstrip").kendoTabStrip({ animation: { open: { effects: "fadeIn" } } }); $(".realContent").height($(document).height()); }); </script> <script> function videoShow(e) { var dynoTitle = e.view.params.tit; var navbar = app.view() .header .find(".km-navbar") .data("kendoMobileNavBar"); navbar.title(dynoTitle); } </script> <script type="text/x-kendo-template" id="foo-template"> <img src="content/#=ProductID#.jpg" alt="#=ProductName# image" class="pullImage"/> <h3> #:ProductName# </h3> #:UnitsInStock# adet mevcut </script> <script> var i = 0; // datasource below is customized for demo purposes. function mobileListViewFiltering() { var foo = new kendo.data.DataSource({ transport: { read: { url: "http://demos.telerik.com/kendo-ui/service/Products", dataType: "jsonp" } }, requestStart: function() { kendo.ui.progress($("#products"), true); }, requestEnd: function() { kendo.ui.progress($("#products"), false); }, sort: { field:"ProductName", dir: "asc" }, pageSize: 100 }); $("#filterable-listview").kendoMobileListView({ dataSource: foo, template: $("#mobile-listview-filtering-template").text(), filterable: { field: "ProductName", operator: "startswith" }, endlessScroll: true }); } </script> </div> </body> </html>

Answer 1

嘗試將您的listView create腳本放入tabStrip的show或activate （選擇哪種情況更適合您的情況）內：

$("#tabstrip").kendoTabStrip({
    animation:  {
        open: {
            effects: "fadeIn"
        }
    },
    activate: function(e) {
        mobileListViewFiltering(e.item);
    }
});

僅當選項卡被激活時，才會創建listView。

Tabstrip Kendo UI中的可過濾Listview

問題描述

1 個解決方案

解決方案1
0 2015-03-12 12:44:44

Tabstrip Kendo UI中的可過濾Listview

問題描述

1 個解決方案

解決方案1 0 2015-03-12 12:44:44

解決方案1
0 2015-03-12 12:44:44