根据mui 的提供的索引列表，修改为通讯录2

之前写过一篇类似的文章，最近重启这个项目，又琢磨了一个新的方法，自认为这个比之前的方法简单一点。这次这个方法不需要修改自带的js啦。

mui提供的例子中 ：
<div class="mui-indexed-list-alert"></div>
<div class="mui-indexed-list-inner">
<div class="mui-indexed-list-empty-alert">没有数据</div>
<ul class="mui-table-view">
<li data-group="A" class="mui-table-view-divider mui-indexed-list-group">A</li>
<li data-value="AKU" data-tags="AKeSu" class="mui-table-view-cell mui-indexed-list-item">阿克苏机场</li>
.....................
</ul>
</div>
</div>
</div>
所以 按照数据是这种格式去添加，即可很容易的实现索引列表。
再js中还是按照官方的例子写，
mui.ready(function() {

            var header = document.querySelector('header.mui-bar');  
            var list = document.getElementById('list');  
            //calc hieght  
            list.style.height = (document.body.offsetHeight - header.offsetHeight) + 'px';  
            //create  
            window.indexedList = new mui.IndexedList(list);  
            setdata(0);  
        });  

setdata(0); 是我请求网络数据的方法。
然后根据你后台返回的数据格式 进行想对应的修改即可。
function setdata(noDepartment){
console.log("通讯录走这了url" + url+"///tag"+noDepartment);
mui.ajax(url, { //
data: {
noDepartment: noDepartment
},
dataType: 'json', //服务器返回json格式数据
type: 'post', //HTTP请求类型
timeout: 10000, //超时时间设置为10秒；
success: function(data) {
var table = document.body.querySelector('.mui-table-view');
var htmla = document.createElement('li');
.....
var a = 0,
b = 0,
......

                for(var i = 0; i < data.length; i++) {  
                    //插入数据                                                        
                    var s = makePy(data[i].cRealName) + ""; //将名字 转化为首字母缩写  
                    var shouzimu = s.substr(0, 1); //获取首字母                                                        
                    //首字母 为 Ａ的  
                    if(shouzimu == "A") {  
                        if(a == 0) {  
                            htmla.innerHTML += '<li data-group="A" class="mui-table-view-divider mui-indexed-list-group active">A</li><li data-value=' + s + 'data-tags=' + s + ' class="mui-table-view-cell mui-indexed-list-item"><div class="indexed-list-item oa-contact-avatar mui-table-cell"><img src="../../images/60x60.gif"></div><div class="indexed-list-item" ><h4 id="comtact-name"  class="oa-contact-name">' + data[i].cRealName + '</h4><span id="comtact-zhiwu" class="oa-contact-position mui-h6">' + data[i].cDepartmentName +  
                                '</span><p id="comtact-phone" class="oa-contact-emailmui-h6">' +  
                                data[i].cTelephoneNumber +  
                                '</p></div>' + '</li>';  

                            a = a + 1;  
                        } else {  
                            htmla.innerHTML += '<li data-value=' + s + 'data-tags=' + s + ' class="mui-table-view-cell mui-indexed-list-item active" "><div class="indexed-list-item oa-contact-avatar mui-table-cell"><img src="../../images/60x60.gif"></div><div class="indexed-list-item" ><h4 id="comtact-name"  class="oa-contact-name" >' + data[i].cRealName +  
                                '</h4><span id="comtact-zhiwu" class="oa-contact-position mui-h6">' + data[i].cDepartmentName +  
                                '</span><p id="comtact-phone" class="oa-contact-emailmui-h6">' +  
                                data[i].cTelephoneNumber +  
                                '</p></div>' + '</li>'  
                        }  
                    }  
                        table.appendChild(htmla);  
                              .....  
                                   .....  

.},
error: function(xhr, type, errorThrown) {
console.log(type);
mui.toast(type + "请求服务超时，请重新请求")
}
});
}
makePy(data[i].cRealName) + ""; //将名字 转化为首字母缩写
这个方法是因为后台返回的数据格式全是汉字所以需要这样一个方法，如果你的后台已经给你返回 A ，B 的标签 直接添加到htmla 。。。上面即可.
这样你的界面就会出现数据了 ，如果没法滑动和索引的联动 屏蔽掉mui.IndexedList.js 里面一些方法即可。
我因为 没有搜索功能 对应 搜索功能的 html代码和js全部屏蔽

        这个方法屏蔽了 里面的内容  
        var findEnd = function(event) {  

// self.el.alert.classList.remove('active');
// self.el.bar.classList.remove('active');
// if (pointElement) {
// pointElement.classList.remove('active');
// pointElement = null;
// }
};
这个 全部屏蔽
// bindSearchEvent: function() {
// var self = this;
// self.el.searchInput.addEventListener('input', function() {
// var keyword = this.value;
// self.search(keyword);
// }, false);
// $(self.el.search).on('tap', classSelector('icon-clear'), function() {
// self.search('');
// }, false);
// },
这个 屏蔽一个
bindEvent: function() {
var self = this;
self.bindBarEvent();
// self.bindSearchEvent();
}
});