appCan开发：treeview的使用例子

最近在学习appCan开发移动端应用，记下一点学习心得。今天记录的是treeview的使用案例，treeview是什么？就是树状列表组件,是AppCan 布局框架对数据列表进行封装的JS对象。

1.首先在HTML页面上定义一个div：<div id="treeview"></div> 。命名ID为treeview。

2.定义treeview:

var tv = appcan.treeview({
    selector : "#treeview",    //选择中定义的div,id为treeview。表示我的treeview将插入到这个div的位置
    defaultOpen : 1// 默认打开第几项列表，必须包含数据
});

3.treeview有个add方法，可以给treeview动态加载列表内容，如何动态从后端获取数据，加载到treeview呢？看以下代码：

var header_content=[];

appcan.request.ajax({   //ajax从后端请求信息

        type : 'post',
        url : ajaxUrlHead + "org/getOrgDeptByAccountIdMobile",   //请求的URL
        data : {
            "accountId" : appcan.locStorage.getVal("accountId")     //请求时向后端传的参数，把本地存储的accountId传给后端
        },
        dataType : "json",
        timeout : 10000, //超时时间
        success : function(data) {   //请求成功后，data是后端传过来的对象数组
            var j=eval(data).length;
            //console.log(j);
            for (var i = 0; i < j; i++) {
                var t=eval(data[i].deptList).length;
                for(var k=0;k<t;k++){
                    header_content.push({   //data数组中的对象，把对象中我们想要的数据取出来，存入header_content数组
                        title : data[i].deptList[k].name,   //title是我们这个列表的标题
                        name : data[i].deptList[k].id,    //后面这些name,type等我们可以自己添加定义我们想要存储的数据
                        type : "0",
                        url : "",
                        orgName : data[i].org.name
                    });
                }
                tv.add([{    //通过add()方法向treeview中添加列表
                    header : data[i].org.name,   // treeview的头部
                    content : header_content,  //treeview下的列表
                }], 1);
                header_content=[];
            }
        }
    }); 

 tv.on('listviewClick', function(ele,data,obj) { //通过listviewClick可以给treeview绑定事件，ele参数表示点击的那个列表的HTML代码段，data是列表的所含内容的数组
    //console.log(data.orgName);
    appcan.locStorage.setVal("p_deptId",data.name);
    appcan.locStorage.setVal("p_deptName",data.title);
    appcan.locStorage.setVal("p_orgName",data.orgName);
    appcan.window.open({
        name : "org_info",
        data : "org_info.html",
        aniId : 2
    });
});

不知道大家懂了没，核心就是说，定义一个数组，把后端的数据通过push方法循环方法数组，然后把这个数组直接赋给treeview的content。从而实现动态加载。