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

依赖

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

JS对象

函数

appcan.treeview({参数})

  1. selector:   /*选择器*/, 
  2. type:   thinLine or thickLine /*窄行和宽行设定*/,  
  3. hasIcon:   true or false /*是否有图片*/, 
  4. hasAngle:   true or false /*是否有右侧箭头*/, 
  5. hasTouchEffect:   true or false /*是否有点击效果*/, 
  6. touchClass:   'sc-bg-active' or 用户自定义/*列表条目点击效果CSS类*/,  
  7. defaultOpen:   1 2 or 3 /*默认打开第几项，必须包含数据*/ 
  8. 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.             });