list嵌套优化速度

p8527136

一个简单的例子写一下自己在list嵌套时做的优化，，

大概的显示是这个样子的，很常见，外边职称的list，里边是嵌套职称内的用户list

数据不多，大概是300条左右，但是如果不经过优化，但是一开始直接打开的时候要等5s左右才可以打开。。。这无疑是一种灾难。。
一开始以为是数据库加载过多原因造成的，然后将数据写死，写到json中，发现数据并没有优化多少，
根据chrome的分析，网络获取的数据的时间1s不到，剩下的时间显示空白，好吧。。。然后预计就是画面渲染过慢导致的了，
解决的话想法也很简单，，就是"懒加载"(这里是已经加载数据完毕，只是没有显示)先显示外层list，然后通过点击显示内层list，哪块儿需要显示哪块儿
想法是简单的，但是在实践过程中，由于缺乏一定的知识，走了一些弯路，现在分享记录如下：
这是布局的画面，很easy，就是两个list嵌套

核心代码：

1. //展开通讯录
   
2.         Model.prototype.li1Click = function(event) {
   
3. //                var row = event.bindingContext.$object;
   
4. //                var personData = this.comp("personData");
   
5.                 // 延迟加载，在点击分组信息时加载人员信息
   
6.                 var controlGroup1Dom = $(event.currentTarget).find("div[xid='controlGroup1']");
   
7.                 var list2Dom = controlGroup1Dom.find("div[xid='list2']");
   
8.                 this.comp(list2Dom[0]).refresh();
   
9.                
   
10.         };
    
11.        
    
12.         Model.prototype.controlGroupTitle1Click = function(event){
    
13.                 // 获取箭头的jquery对象，进行箭头的转换
    
14.                 var i = $(event.currentTarget).find("i[xid='i']");
    
15.                 var src = $(i).attr("class");
    
16.                 if (src.indexOf("right") >= 0) {
    
17.                         $(i).attr("class", src.replace("right", "down"));
    
18.                 } else {
    
19.                         $(i).attr("class", src.replace("down", "right"));
    
20.                 }
    
21. 
    
22.         };

复制代码

有需要的可以看看哦。

470772345

为什么 一下子要加载那么多条

p8527136

470772345 发表于 2016-11-9 16:37
为什么 一下子要加载那么多条

额，，首先我得把机构全部加载出来吧，然后人员和机构的list是有对应关系的，而且一般习惯性的通讯录都是全部加载出来了。。何况加载数据，将数据填充到data的时间很短，这儿我主要是针对显示的问题进行优化。。。