AppCan TreeView

效果如下：

CSS：

//去掉二级列表中的 右箭头

<style type="text/css">
.fa-angle-right{
display:none
}
</style>

HTML:

 <div id="treeview" class="sc-bg">
        </div>

JS:

 var tv = appcan.treeview({
                selector : "#treeview",
                defaultOpen : 1  ,  //默认打开第几项，必须包含数据
                
                
            });
            tv.set([{
                header : "列表(list)",
                content : [{
                    title : '<div class=" ub  bc-text ub-ac"><div class="checkbox umar-r"> <input type="checkbox" class="uabs ub-con"> </div> <div class=" ub-f1 marg-l ub ub-ac  ut-m line1"> 自动登录 </div></div>',
                    name : "listview",
                    hasAngle:false,
                    id:'test'
                   // url : "UIcontrol/listview.html"
            }, {
                    title : '分组列表',
                    name : "listview",
                    url : "UIcontrol/lv_group.html"
                }]
        }, {
                header : "标题导航栏(header)",
                content : [{
                    title : '图片标题',
                name : "control",
                    url : "UIcontrol/nav-icon.html"
                }, {
                    title : 'FontAwesome图片标题',
                    name : "control",
                    url : "UIcontrol/nav-fa.html"
                }]
            }]);
            tv.on('listviewClick', function(ele, data, obj) {
               if (data.name && data.url) {
                   // appcan.locStorage.setVal("lv_index", ele.data("index"));
                   // appcan.window.open(data.name, data.url, 10);
                }
            });
            tv.on('click', function(ele, obj, subobj) {
                if (obj.name && obj.url) {
                    appcan.window.open(obj.name, obj.url, 10);
                }
            });

动态数据绑定可参考：

http://blog.csdn.net/clareqi/article/details/52472512