Treeview树状列表组件

树状列表组件是根据AppCan 布局框架对数据列表进行封装的JS对象，通过配合的样式，使开发者在界面中可以快速完成树状列表控件的开发。

依赖

• appcan.js
• appcan.control.js
• appcan.listview.js
• appcan.treeview.js
• appcan.control.css

JS对象

函数

appcan.treeview({参数})

1. selector:   /*选择器*/,
2. hasIcon:   true or false /*是否有图片*/, 添加图标时将hasIcon设为true，系统默认值为false
3. hasAngle:   true or false /*是否有右侧箭头*/,
4. hasTouchEffect:   true or false /*是否有点击效果*/,
5. touchClass:   'sc-bg-active' or 用户自定义/*列表条目点击效果CSS类*/,
6. defaultOpen:   1 2 or 3 /*默认打开第几项，必须包含数据*/
7. isCloseOther:   true or false/*是否关闭其他组*/,

方法

set(data)

1. data:JSON   对象数组，用于存储列表条目显示的文字图片等信息。

add(data,dir)

1. data: JSON 对象数组，用于存储列表条目显示的文字图片等信息。
2. dir: 0 or 1   用于设定数据是在列表前部添加还是后不。0为前部添加。默认为1

open(index)：

打开对应的第几项

click：

列表条目备点击时调用此事件

参数

1. Obj  列表条目DOM对象
2. Data 列表条目对应数据源对象
3. subObj 列表条目点击时的子元素DOM对象例如图片

listviewClick： 列表条目被点击时调用此事件

参数

1. Obj  列表条目DOM对象
2. Data 列表条目对应数据源对象
3. subObj 列表条目点击时的子元素DOM对象例如图片

例子

HTML5代码

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

JS代码 树状列表

1. var tv = appcan.treeview({
2. selector : "#treeview",
3. defaultOpen : 1//默认打开第几项，必须包含数据
4. });
5. tv.set([{
6. header : "文本输入(input,texarea)",
7. name : "control",
8. url : "UIcontrol/input.html"
9. }, {
10. header : "列表(list)",
11. content : [{
12. title : '单行列表',
13. name : "listview",
14. url : "UIcontrol/listview.html"
15. }, {
16. title : '分组列表',
17. name : "listview",
18. url : "UIcontrol/lv_group.html"
19. }]
20. }, {
21. header : "标题导航栏(header)",
22. content : [{
23. title : '图片标题',
24. name : "control",
25. url : "UIcontrol/nav-icon.html"
26. }, {
27. title : 'FontAwesome图片标题',
28. name : "control",
29. url : "UIcontrol/nav-fa.html"
30. }]
31. }]);
32. tv.on('listviewClick', function(ele, data, obj) {
33. if (data.name && data.url) {
34. appcan.locStorage.setVal("lv_index", ele.data("index"));
35. appcan.window.open(data.name, data.url, 10);
36. }
37. });
38. tv.on('click', function(ele, obj, subobj) {
39. if (obj.name && obj.url) {
40. appcan.window.open(obj.name, obj.url, 10);
41. }
42. });