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. });