Question

我正在将项目从Jquery Mobile转换为Kendo Mobile UI，我希望能够拥有类似于JQM http://demos.jquerymobile.com/1.3.2/widgets/listviews/（AutoDividers部分）

我已经阅读了Kendo文档，并使用数据绑定实现了listview过滤器。尚未使用模板方法。我可以获得显示和可过滤的链接。

我的问题是，我无法弄清楚如何将分组数据标题放在列表视图中，而不会为每个分组的数据部分显示过滤器。

HTML CODE

<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 &ldquo;Search&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 CODE

        <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>

我很遗憾地说我有点难过，或者也许不能直接思考。我无法看到一个直截了当的解决方案。有没有人有任何建议？

Answer 1

所以，我稍微重构了你的代码......我认为this会证明它。

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();

使用分组数据过滤Kendo UI listView

1 个答案: