Question

我正在学习JQM并且有很多问题。不问是不是想做很多事情。

我有一个listview元素。加载页面时，它按名称按字母顺序设置列表视图。当您点击＆＃34;类别＆＃34;导航按钮根据其类别，分组设置元素。一切都很好。

我的问题是当我试图回去点击＆＃34;名称＆＃34;导航按钮没什么变化。请帮忙。

以下是简化示例：http://jsfiddle.net/smatisen/v382r874/

    <div data-role="page" id="home">
        <div data-role="header">
        <h1>Test</h1>

    <div data-role="navbar">
    <ul>
        <li><a href="#" id="setNamesOrder" class="ui-btn-active">Name</a></li>
        <li><a href="#" id="setTableOrder">Category</a></li>
       </ul>
</div><!-- /navbar -->
    </div><!-- /header -->
        <div data-role="content">
            <ul data-role="listview" class="todo-listview">
                <li data-category="cat 1"><a href="" data-view-id="1" class="view"><h2>Test Name 1</h2></a></li>
                <li data-category="cat 2"><a href="" data-view-id="2" class="view"><h2>Test Name 2</h2></a></li>
                <li data-category="cat 1"><a href="" data-view-id="3" class="view"><h2>Test Name 3</h2></a></li>

            </ul>
      </div>
    </div>

Answer 1

在你的jsFiddle代码中，当你点击＆＃34; Name＆＃34;导航按钮，你写的函数叫做＃34; showRecordsByName＆＃34;叫做。代码如下：

function showRecordsByName()
{
    $('.todo-listview').listview({
        autodividers: true
    });
    $('.todo-listview').listview("refresh");
}

而且......这就是它的全部。它使用class＆＃34; .todo-listview＆＃34;刷新listview。但由于列表的内容没有任何变化，因此它仍然与执行此代码之前完全一样。

感谢您使用jsFiddle，它使检查变得更加容易。

Answer 2

我通过在按钮点击事件和clonin listview上添加隐藏和显示元素以及不同的类名来找到解决方案。不确定这是否优雅，但它是否有效。 http://jsfiddle.net/smatisen/v382r874/2/

$(document).on('click', '#setTableOrder', function(event) {
        console.log("DEBUG - SetTableOrder clicked");
        $('.byNamelistview').closest('.ui-listview').hide();
        $('.todo-listview').closest('.ui-listview').show();
        showRecordsByCat();
     });

Answer 3

您需要做的就是通过名称功能修改节目记录中的autodividersSelector以获取文本的第一个字母：

function showRecordsByName(){
    $('.todo-listview').listview({
        autodividers: true,
        autodividersSelector: function (li) {
            var out = li.text().charAt(0);
            return out;
        }
    });
    $('.todo-listview').listview("refresh");
}

更新了 FIDDLE

动态更改listview分隔线

3 个答案: