使用HTML+CSS+JS自定义ListView来适用你的需求，第二讲

正月

第一篇中编写简单的ListView， 介绍自定义ListView的布局和数据绑定。
以及如何动态添加一个Item。

这篇来讲解ListView的搜索和排序。
为了表现出可以中文搜索。我在列表中使用中文测试。

首先看HTML中的代码
<div id="your-list">
        <input class="search" />
        <span class="sort" data-sort="name">按名称排序</span>
        <span class="sort" data-sort="phone">按手机号排序</span>
        <ul class="list"></ul>
</div>

自定义Item布局

<div style="display:none;">
        <li id="your-item">
                <label class="name"></label>
                <label class="phone"></label>
        </li>
</div>


CSS代码
                        .list {
                                background-color: #BDBDBD;
                        }
                        .list li {
                                height: 42px;
                                line-height: 42px;
                                background-color: #FFF;
                                margin-bottom: 1px;
                                padding-left: 15px;
                                padding-right: 15px;
                        }
                        .phone {
                                float: right;
                        }
                        .search {
                                width: 100%;
                                height: 38px;
                                line-height: 38px;
                        }
                        .sort {
                                height: 32px;
                                line-height: 32px;
                                background-color: #F8BBD0;
                        }


JS代码
                       var options = {
                                valueNames : ['name', 'phone'],
                                item : 'your-item'
                        };
                        var values = [{
                                name : '解渴',
                                phone : '13733776688'
                        }, {
                                name : '肉丝',
                                phone : '13844997799'
                        }, {
                                name : '汤姆',
                                phone : '13955008800'
                        }];
                        var hackerList = new List('your-list', options, values);


我们就会看到如下效果


测试   搜索“肉丝”



再自己点击排序查看效果。

YonBIP社区

感谢分享