Treeview树状列表组件

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

依赖

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

JS对象

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

方法

set(data)

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

add(data,dir)

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

打开对应的第几项

click：

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

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

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

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

例子

HTML5代码

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

JS代码 树状列表

    var tv = appcan.treeview({
                selector : "#treeview",
                defaultOpen : 1//默认打开第几项，必须包含数据
            });
            tv.set([{
                header : "文本输入(input,texarea)",
                name : "control",
                url : "UIcontrol/input.html"
            }, {
                header : "列表(list)",
                content : [{
                    title : '单行列表',
                    name : "listview",
                    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);
                }
            });
还需要帮助吗? 联系我们
最新更新 8th Jul 2021