孤行累
孤行累
  • 发布:2016-08-09 17:17
  • 更新:2017-04-06 11:09
  • 阅读:2131

mui IndexedList 卡顿,无法选中

分类:MUI

PC端运行还可以,在手机端运行选不中
数据量大概在900多条,页面初始化后,不输入查询条件直接选择,点击多次也选不中,输入查询条件再选择才可以选中, 问下是哪里写的有问题?
完整代码如下:

window.onload = function() {
var params = JSON.stringify({
"sync_date": "1901-06-06 00:00:01"
});

var dataJson = JSON.stringify({  
    "function": "synUsers",  
    "data": params  
});  

var personlist = sessionStorage.getItem("personlist");  
if(personlist != undefined && personlist != null) {  
    var element = document.getElementById('personlist');  
    element.innerHTML = personlist;  
    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);  
} else {  
    $.ajax({  
        type: 'POST',  
        contentType: 'application/json',  
        url: serviceUrl + sessionKey,  
        data: dataJson,  
        dataType: 'json',  
        //timeout: 15000, //超时时间设置,单位毫秒  
        success: function(data) {  
            var result = data.result;  
            if(result) {  
                var dataContent = data.content;  
                var jsonContentData = JSON.parse(dataContent);  
                var htmlContentA = '<li data-group="A" class="mui-table-view-divider mui-indexed-list-group">A</li>';  
                var htmlContentB = '<li data-group="B" class="mui-table-view-divider mui-indexed-list-group">B</li>';  
                var htmlContentC = '<li data-group="C" class="mui-table-view-divider mui-indexed-list-group">C</li>';  
                var htmlContentD = '<li data-group="D" class="mui-table-view-divider mui-indexed-list-group">D</li>';  
                var htmlContentE = '<li data-group="E" class="mui-table-view-divider mui-indexed-list-group">E</li>';  
                var htmlContentF = '<li data-group="F" class="mui-table-view-divider mui-indexed-list-group">F</li>';  
                var htmlContentG = '<li data-group="G" class="mui-table-view-divider mui-indexed-list-group">G</li>';  
                var htmlContentH = '<li data-group="H" class="mui-table-view-divider mui-indexed-list-group">H</li>';  
                var htmlContentI = '<li data-group="I" class="mui-table-view-divider mui-indexed-list-group">I</li>';  
                var htmlContentJ = '<li data-group="J" class="mui-table-view-divider mui-indexed-list-group">J</li>';  
                var htmlContentK = '<li data-group="K" class="mui-table-view-divider mui-indexed-list-group">K</li>';  
                var htmlContentL = '<li data-group="L" class="mui-table-view-divider mui-indexed-list-group">L</li>';  
                var htmlContentM = '<li data-group="M" class="mui-table-view-divider mui-indexed-list-group">M</li>';  
                var htmlContentN = '<li data-group="N" class="mui-table-view-divider mui-indexed-list-group">N</li>';  
                var htmlContentO = '<li data-group="O" class="mui-table-view-divider mui-indexed-list-group">O</li>';  
                var htmlContentP = '<li data-group="P" class="mui-table-view-divider mui-indexed-list-group">P</li>';  
                var htmlContentQ = '<li data-group="Q" class="mui-table-view-divider mui-indexed-list-group">Q</li>';  
                var htmlContentR = '<li data-group="R" class="mui-table-view-divider mui-indexed-list-group">R</li>';  
                var htmlContentS = '<li data-group="S" class="mui-table-view-divider mui-indexed-list-group">S</li>';  
                var htmlContentT = '<li data-group="T" class="mui-table-view-divider mui-indexed-list-group">T</li>';  
                var htmlContentU = '<li data-group="U" class="mui-table-view-divider mui-indexed-list-group">U</li>';  
                var htmlContentV = '<li data-group="V" class="mui-table-view-divider mui-indexed-list-group">V</li>';  
                var htmlContentW = '<li data-group="W" class="mui-table-view-divider mui-indexed-list-group">W</li>';  
                var htmlContentX = '<li data-group="X" class="mui-table-view-divider mui-indexed-list-group">X</li>';  
                var htmlContentY = '<li data-group="Y" class="mui-table-view-divider mui-indexed-list-group">Y</li>';  
                var htmlContentZ = '<li data-group="Z" class="mui-table-view-divider mui-indexed-list-group">Z</li>';  
                for(var i = 0; i < jsonContentData.data.length; i++) {  
                    var datajson = jsonContentData.data[i];  
                    var userid = datajson.userid;  
                    var username = datajson.username;  
                    var user_orgpath = datajson.user_orgpath;  

                    var htmlContent1 = '<li data-value="' + makePy(username) + '" data-tags="' + ConvertPinyin(username) + '" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">' +  
                        '<input type="checkbox"  value="' + userid + '"/>' + username +  
                        '<p>' + user_orgpath + '</p></li>';  
                    if(getStr(username).toUpperCase() == 'A') {  
                        htmlContentA = htmlContentA + htmlContent1;  
                        //  $("#A").append(htmlContent);  
                    } else if(getStr(username).toUpperCase() == 'B') {  
                        htmlContentB = htmlContentB + htmlContent1;  
                        //$("#B").append(htmlContent);  
                    } else if(getStr(username).toUpperCase() == 'C') {  
                        //$("#C").append(htmlContent);  
                        htmlContentC = htmlContentC + htmlContent1;  
                    } else if(getStr(username).toUpperCase() == 'D') {  
                        htmlContentD = htmlContentD + htmlContent1;  
                        //$("#D").append(htmlContent);  
                    } else if(getStr(username).toUpperCase() == 'E') {  
                        htmlContentE = htmlContentE + htmlContent1;  
                        //$("#E").append(htmlContent);  
                    } else if(getStr(username).toUpperCase() == 'F') {  
                        htmlContentF = htmlContentF + htmlContent1;  
                        //  $("#F").append(htmlContent);  
                    } else if(getStr(username).toUpperCase() == 'G') {  
                        htmlContentG = htmlContentG + htmlContent1;  
                        //$("#G").append(htmlContent);  
                    } else if(getStr(username).toUpperCase() == 'H') {  
                        htmlContentH = htmlContentH + htmlContent1;  
                        //$("#H").append(htmlContent);  
                    } else if(getStr(username).toUpperCase() == 'I') {  
                        htmlContentI = htmlContentI + htmlContent1;  
                        //$("#I").append(htmlContent);  
                    } else if(getStr(username).toUpperCase() == 'J') {  
                        htmlContentJ = htmlContentJ + htmlContent1;  
                        //$("#J").append(htmlContent);  
                    } else if(getStr(username).toUpperCase() == 'K') {  
                        htmlContentK = htmlContentK + htmlContent1;  
                        //  $("#K").append(htmlContent);  
                    } else if(getStr(username).toUpperCase() == 'L') {  
                        htmlContentL = htmlContentL + htmlContent1;  
                        //  $("#L").append(htmlContent);  
                    } else if(getStr(username).toUpperCase() == 'M') {  
                        htmlContentM = htmlContentM + htmlContent1;  
                        //$("#M").append(htmlContent);  
                    } else if(getStr(username).toUpperCase() == 'N') {  
                        htmlContentN = htmlContentN + htmlContent1;  
                        //$("#N").append(htmlContent);  
                    } else if(getStr(username).toUpperCase() == 'O') {  
                        htmlContentO = htmlContentO + htmlContent1;  
                        //  $("#O").append(htmlContent);  
                    } else if(getStr(username).toUpperCase() == 'P') {  
                        htmlContentP = htmlContentP + htmlContent1;  
                        //$("#P").append(htmlContent);  
                    } else if(getStr(username).toUpperCase() == 'Q') {  
                        htmlContentQ = htmlContentQ + htmlContent1;  
                        //$("#Q").append(htmlContent);  
                    } else if(getStr(username).toUpperCase() == 'R') {  
                        htmlContentR = htmlContentR + htmlContent1;  
                        //$("#R").append(htmlContent);  
                    } else if(getStr(username).toUpperCase() == 'S') {  
                        htmlContentS = htmlContentS + htmlContent1;  
                        //$("#S").append(htmlContent);  
                    } else if(getStr(username).toUpperCase() == 'T') {  
                        htmlContentT = htmlContentT + htmlContent1;  
                        //  $("#T").append(htmlContent);  
                    } else if(getStr(username).toUpperCase() == 'U') {  
                        htmlContentU = htmlContentU + htmlContent1;  
                        //  $("#U").append(htmlContent);  
                    } else if(getStr(username).toUpperCase() == 'V') {  
                        htmlContentV = htmlContentV + htmlContent1;  
                        //$("#V").append(htmlContent);  
                    } else if(getStr(username).toUpperCase() == 'W') {  
                        htmlContentW = htmlContentW + htmlContent1;  
                        //$("#W").append(htmlContent);  
                    } else if(getStr(username).toUpperCase() == 'X') {  
                        htmlContentX = htmlContentX + htmlContent1;  
                        //$("#X").append(htmlContent);  
                    } else if(getStr(username).toUpperCase() == 'Y') {  
                        htmlContentY = htmlContentY + htmlContent1;  
                        //$("#Y").append(htmlContent);  
                    } else {  
                        htmlContentZ = htmlContentZ + htmlContent1;  
                        //$("#Z").append(htmlContent);  
                    }  
                }  
                var htmlContent = htmlContentA + htmlContentB + htmlContentC + htmlContentD +  
                    htmlContentE + htmlContentF + htmlContentG + htmlContentH + htmlContentI + htmlContentJ +  
                    htmlContentK + htmlContentL + htmlContentM + htmlContentN + htmlContentO + htmlContentP +  
                    htmlContentR + htmlContentS + htmlContentT + htmlContentU + htmlContentV + htmlContentW +  
                    htmlContentX + htmlContentY + htmlContentZ;  
                var element = document.getElementById('personlist');  
                //              element.append(htmlContent);  
                //$("#personlist").append(htmlContent);  
                element.innerHTML = htmlContent;  
                sessionStorage.setItem("personlist", htmlContent);  
            }  

            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);  
            //window.indexedList = new mui.IndexedList(document.getElementById('list'));  
        },  
        error: function(XMLHttpRequest, textStatus, errorThrown) {  
            //      bohuinum--;  
            var returnStatus = XMLHttpRequest.status;  
            if(textStatus == 'timeout' || returnStatus == '504' || returnStatus == '502') {  
                mui.alert('加载数据超时');  
            } else if(textStatus.indexOf('error') > -1 || returnStatus == '500') {  
                mui.alert('后台服务错误');  
            }  
        }  
    });  
}  

}

2016-08-09 17:17 负责人:无 分享
已邀请:
l***@163.com

l***@163.com

我也遇到这个问题,根本没法使用。请问你解决了吗

该问题目前已经被锁定, 无法添加新回复