Блог

Я перевожу проект из Jquery Mobile в Kendo Mobile UI, и я хочу иметь возможность фильтровать списки (со ссылками), аналогичные тем, что есть у JQM здесь http://demos.jquerymobile.com/1.3.2/widgets/listviews / (Раздел авторазборщиков)

Я прочитал документы Kendo и внедрил фильтр listview с привязкой данных. Метод шаблона еще не использовался. Я могу заставить ссылки отображаться и быть фильтруемыми.

Моя проблема в том, что я не могу понять, как поместить заголовки сгруппированных данных в listview без отображения фильтра для каждого сгруппированного раздела данных.

HTML-КОД

 <div data-role="view" data-title="App Index" data-layout="agesLayout" id="App Index" class="defaultView" data-init="initListView">
        <h1>SPEAK App Index</h1>
        <p>This section contains an index of all the activities that can be found within the different age groups. Use the collapsible menu to search for activities within each age group. You can use the amp;ldquo;Searchamp;rdquo; feature to look for a particular activity. Use meaningful search words.</p>
    <ul id="panelBar">
     <li>0-12 Months Section
       <div>
        <!--<div style="background:#666; color:white; padding:10px; font-size: 0.9em;">Talking Points</div>-->
        <ul id="listview-points" data-type="group"></ul>
       </div>
     </li>
     <li>13mths  Section
       <ul>
        <li>First Item</li>
        <li>Second Item</li>
        <li>Third Item</li>
       </ul>
     </li>
     <li>2.5yrs  Section
       <ul>
        <li>First Item</li>
        <li>Second Item</li>
        <li>Third Item</li>
       </ul>
     </li>
     <li>3.5yrs  Section
       <ul>
        <li>First Item</li>
        <li>Second Item</li>
        <li>Third Item</li>
       </ul>
     </li>
     <li>4.5yrs  Section
       <ul>
        <li>First Item</li>
        <li>Second Item</li>
        <li>Third Item</li>
       </ul>
     </li>
    </ul>
</div>
 

КОД JAVASCRIPT

         <script>
            $(document).ready(function() {
                $("#panelBar").kendoPanelBar();
            });
        </script>

<script type="text/javascript">
    function initListView(e) {
        e.view.element.find("#listview-points").kendoMobileListView({
            filterable: {field: "name", operator: "startswith"},
            template: "<a href='#:data.url#'>#:data.name#</a>",
            dataSource: kendo.data.DataSource.create([
                {name: "Role Models", url: "baby/points/point1.html"},
                {name: "Mother's Voice", url: "baby/points/point2.html"},
                {name: "Body Language", url: "baby/points/point3.html"},
                {name: "Listening", url: "baby/points/point4.html"},
                {name: "Brain Development", url: "baby/points/point5.html"},
                {name: "Gentle Words", url: "baby/points/point6.html"},
                {name: "Television", url: "baby/points/point7.html"},
                {name: "Act on Concerns", url: "baby/points/point8.html"},
                {name: "Home Environment", url: "baby/points/point9.html"},
                {name: "First Five Years", url: "baby/points/point10.html"},
//I WANT TO PUT A HEADER SEPARATOR HERE FOR THE NEXT SECTION
                {name: "Social Activity 1", url: "baby/social/social1.html"},
                {name: "Social Activity 2", url: "baby/social/social2.html"},
                {name: "Social Activity 3", url: "baby/social/social3.html"},
            ])
        });
    }
</script>
 

С сожалением должен сказать, что я немного озадачен или, возможно, не могу мыслить здраво. Я не вижу простого решения из этого. У кого-нибудь есть какие-либо предложения?

Итак, я немного переработал ваш код… Я думаю, что это продемонстрирует это.

 var ds = new kendo.data.DataSource({
 data: [{name: "Role Models", url: "baby/points/point1.html", section:"Header1"},
       {name: "Mother's Voice", url: "baby/points/point2.html", section:"Header1"},
       {name: "Body Language", url: "baby/points/point3.html", section:"Header1"},
       {name: "Listening", url: "baby/points/point4.html", section:"Header1"},
       {name: "Brain Development", url: "baby/points/point5.html", section:"Header1"},
       {name: "Gentle Words", url: "baby/points/point6.html", section:"Header1"},
       {name: "Television", url: "baby/points/point7.html", section:"Header1"},
       {name: "Act on Concerns", url: "baby/points/point8.html", section:"Header1"},
       {name: "Home Environment", url: "baby/points/point9.html", section:"Header1"},
       {name: "First Five Years", url: "baby/points/point10.html", section:"Header1"},
       {name: "Social Activity 1", url: "baby/social/social1.html", section:"Header2"},
       {name: "Social Activity 2", url: "baby/social/social2.html", section:"Header2"},
       {name: "Social Activity 3", url: "baby/social/social3.html", section:"Header2"},
 ],
 group: {field: "section"}
 });

$(document).ready(function() {
            $("#panelBar").kendoPanelBar();
        });

function initListView(e) {
    e.view.element.find("#listview-points").kendoMobileListView({
        template: "<a href='#:data.url#'>#:data.name#</a>",
        dataSource: ds
    });
}

new kendo.mobile.Application();