Kendo UI Mobile - 如何在视图上显示 2 个列表视图？答案

【问题标题】：Kendo UI Mobile - How to display 2 listview on a view?Kendo UI Mobile - 如何在视图上显示 2 个列表视图？
【发布时间】：2014-03-11 16:43:16
【问题描述】：

我想显示一个带有 2 个列表视图的视图，如下所示：

但是当我通过 Kendo UI Mobile 实现时：

 <div id="cptTab" data-role="view" data-title="Billing" data-layout="billing-layout">
        <header data-role="header">
            <div data-role="navbar">
                <span data-role="view-title">CPT</span>
                <a data-align="left" data-role="button" href="#censusmainTab">Census</a>
                <a data-align="right" data-role="button" data-click="onNavigateToAddCpt">+</a>
            </div>
        </header>

        <div>
            Patient:
            <label>
                <input readonly="true" class="PatientNameLabel" />
            </label>
        </div>
        <div>NEW CPT's</div>
        <ul data-role="listview" id="cptsListView" data-click="onCPTItemClicked" />
        <div>PREVIOUS CPT's</div>
        <ul data-role="listview" id="cptsPreviousListView" data-click="onPreviousCPTItemClicked" />
    </div>

但它像这样显示，它缺少第二个列表视图（以前的列表视图）：

如果我做错了什么或者是 Kendo UI Mobile 的错误，请告诉我。谢谢

【问题讨论】：

标签： jquery-mobile kendo-mobile

【解决方案1】：

你可以使用

<ul data-role="listview" data-type="group" id="ListView" data-click="onItemClicked"/>

创建两个组，第一个用于新的 CPT，第二个用于以前的 CPT。 onItemClicked 函数应根据单击的组来改变其行为。

see the documentation for better details

【讨论】：

嗨，莫里斯，我试过这样做：<ul data-role="listview" data-style="inset" data-type="group"> <li> NEW CPT's <ul data-role="listview" id="cptsListView" data-click="onCPTItemClicked" /> </li> <li> PREVIOUS CPT's <ul data-role="listview" id="cptsPreviousListView" data-click="onPreviousCPTItemClicked" /> </li> </ul> 但没有运气
尝试：
- 新 CPT 的
- PREVIOUS CPT的

【解决方案2】：

试试这个代码

<ul data-role="listview" data-style="inset" data-type="group">
        <li>NEW CPT's
            <ul>
                <li>
                    <a> 1 st item in 1st list view </a>
                </li>
            </ul>
        </li>
        <li>PREVIOUS CPT's
            <ul>
               <li>
                    <a >1 st item in 2nd list view </a>
                </li>
                <li>
                    <a >2nd item in 2nd list view </a>
                </li>
            </ul>
        </li>        
    </ul>

现场演示点击Here

【讨论】：