list 多级加载

Adam2016

仿淘宝示例的class.w是一次性全部加载，我想单击rootClass li 时再加载secondClass和threeClass数据，怎么做？有没有一些参考示例。

Adam2016

视频也有说过这种方案，但是不知道怎么做？

Adam2016

有人做过吗

jishuang

可以把不需要加载的list的autoLoad设置为false,需要加载的时候自己调用list的refresh()

Adam2016

1. define(function(require) {
   
2.         var $ = require("jquery");
   
3.         var justep = require("$UI/system/lib/justep");
   
4.         var allData = require("./js/loadData");
   
5.         var api = require("./js/api");
   
6. 
   
7.         var Model = function() {
   
8.                 this.callParent();
   
9.         };
   
10.        
    
11.         //图片路径转换
    
12.         Model.prototype.getImageUrl = function(url){
    
13.                 return require.toUrl(url);
    
14.         };
    
15.        
    
16.         //获取一级分类信息
    
17.         /*
    
18.         1、默认显示当前一级菜单对应的二、三级数据
    
19.         2、点击其它一级菜单，再加载它的二三级数据
    
20.         */
    
21.         Model.prototype.rootClassDataCustomRefresh = function(event){               
    
22.                 /*
    
23.                 1、加载一级分类数据
    
24.                  */
    
25.                 var url = require.toUrl(api.getCategoryTreeUrl(null, null));
    
26.                 allData.loadDataFromFile(url,event.source,true);                     
    
27.         };
    
28.         //获取二级分类信息       
    
29.         Model.prototype.secondClassDataCustomRefresh = function(event){
    
30.                 /*
    
31.                 1、加载二级分类数据
    
32.                  */
    
33.                 var rootClassData = this.comp("rootClassData");
    
34.                                
    
35.                 var url = require.toUrl(api.getCategoryTreeUrl(rootClassData.val("id"), null));
    
36.                 allData.loadDataFromFile(url,event.source,true);
    
37.         };
    
38.         //获取三级分类信息
    
39.         Model.prototype.threeClassDataCustomRefresh = function(event){
    
40.                 /*
    
41.                 1、加载三级分类数据
    
42.                  */
    
43.                 var rootClassData = this.comp("rootClassData");
    
44.                                
    
45.                 var url = require.toUrl(api.getCategoryTreeUrl(rootClassData.val("id"), 3));
    
46.                 allData.loadDataFromFile(url,event.source,true);
    
47.         };
    
48.        
    
49.         //商品点击事件
    
50.         Model.prototype.listClick = function(event){
    
51.                 /*
    
52.                  1、获取当前商品ID
    
53.                  2、传入弹出窗口，弹出窗口中显示商品详细信息
    
54.                  3、在弹出窗口的接收事件中，从服务端过滤数据
    
55.                  */
    
56.                 justep.Shell.showPage("list",{
    
57.                         keyValue : this.comp("threeClassData").getValue("name")
    
58.                 });
    
59.         };
    
60. 
    
61.         //分类点击事件
    
62.         Model.prototype.rootClassListClick = function(event){
    
63.                 var rootClassData = this.comp("rootClassData");               
    
64.                 var secondClassData = this.comp("secondClassData");
    
65.                 var threeClassData = this.comp("threeClassData");
    
66.                
    
67.                 allData.loadDataFromFile(require.toUrl(api.getCategoryTreeUrl(rootClassData.val("id"), null)),secondClassData,true);
    
68.                 allData.loadDataFromFile(require.toUrl(api.getCategoryTreeUrl(rootClassData.val("id"), 3)),threeClassData,true);
    
69.         };
    
70. 
    
71.         return Model;
    
72. });

复制代码

Adam2016

上面是我最终的代码，效果出来了。

在仿淘宝原基础上，除掉sencodClass的filter，sencodClass和threeClass再根据rootClass分别获取第二级和第三级分类数据。
rootClass加上click事件rootClassListClick ,根据rootClass分别获取二级和三级分类数据。

也不知道会不会有问题。