API Docs for: 0.1
Show:

UXC.Tree Class

树菜单类 UXC.Tree

requires: jQuery, window.printf

UXC Project Site | API docs | demo link

Constructor

UXC.Tree

(
  • _selector
  • _data
)

Parameters:

  • _selector Selector

    树要显示的选择器

  • _data Object

    树菜单的数据

Example:

       <link href='../../../comps/Tree/res/default/style.css' rel='stylesheet' />
       <script src="../../../lib.js"></script>
       <script>
           UXC.use( 'Tree' );
           $(document).ready( function(){
               var treeData = {
                   data: {"24":[["25","\u4e8c\u7ec4\u4e00\u961f"],["26","\u4e8c\u7ec4\u4e8c\u961f"],["27","\u4e8c\u7ec4\u4e09\u961f"]],"23":[["28","\u9500\u552e\u4e8c\u7ec4"],["24","\u552e\u524d\u5ba1\u6838\u7ec4"]]},
                   root: ["23",'客户发展部']
               };
               var _tree = new UXC.Tree( $('#tree_box2'), treeData );
                   _tree.on('RenderLabel', function( _data ){
                       var _node = $(this);
                       _node.html( printf( '<a href="javascript:" dataid="{0}">{1}</a>', _data[0], _data[1] ) );
                   });
                   _tree.on('click', function( _evt ){
                       var _p = $(this);
                       UXC.log( 'tree click:', _p.html(), _p.attr('dataid'), _p.attr('dataname') );
                   });
                   _tree.init();
                   //_queryNode && _tree.open( _queryNode );
           });
       </script>
       <div id="tree_box2" class="tree_container"></div>

Methods

close

(
  • _nodeId
)

关闭某个节点, 或者关闭整个树

Parameters:

  • _nodeId String | Int

    如果nodeId='undefined', 将会关闭树的所有节点
    nodeId 不为空, 将关闭树 _nodeId 所在的节点

event

(
  • _evtName
)
Array

获取树的某类事件类型的所有回调

Parameters:

Returns:

getInstance

(
  • _selector
)
UXC.Tree Instance | Undefined static

从选择器获取 树的 实例, 如果实例有限, 加以判断可避免重复初始化

Parameters:

  • _selector Selector

Returns:

UXC.Tree Instance | Undefined:

getItem

(
  • _nodeId
)

获取树的节点 label

Parameters:

highlight

(
  • _item
)

获取或设置树的高亮节点
注意: 这个只是数据层面的设置, 不会影响视觉效果

Parameters:

  • _item Selector

Returns:

selector

idPrefix

() String

获取树的 ID 前缀
每个树都会有自己的随机ID前缀

Returns:

String: 树的ID前缀

init

()

初始化树
实例化树后, 需要显式调用该方法初始化树的可视状态

Example:

           var _tree = new UXC.Tree( $('#tree_box'), treeData );
           _tree.init();

on

(
  • _evtName
  • _cb
)

绑定树内部事件
注意: 所有事件名最终会被转换成小写

Parameters:

open

(
  • _nodeId
)

展开树到某个具体节点, 或者展开树的所有节点

Parameters:

  • _nodeId String | Int

    如果nodeId='undefined', 将会展开树的所有节点
    nodeId 不为空, 将展开树到 _nodeId 所在的节点

Properties

_model

private

树的数据模型引用

_view

private

树的视图模型引用

dataFilter

Function static

树的数据过滤函数
如果树的初始数据格式不符合要求, 可通过该属性定义函数进行数据修正

Default: undefined

Example:

       UXC.Tree.dataFilter =
       function( _data ){
           var _r = {};
           if( _data ){
               if( _data.root.length > 2 ){
                   _data.root.shift();
                   _r.root = _data.root;
                }
               _r.data = {};
               for( var k in _data.data ){
                   _r.data[ k ] = [];
                   for( var i = 0, j = _data.data[k].length; i < j; i++ ){
                       if( _data.data[k][i].length < 3 ) continue;
                       _data.data[k][i].shift();
                       _r.data[k].push( _data.data[k][i] );
                   }
               }
           }
           return _r;
       };

Events

click

树节点的点击事件

Event Payload:

  • _evt Event

Example:

       _tree.on('click', function( _evt ){
           var _p = $(this);
           UXC.log( 'tree click:', _p.html(), _p.attr('dataid'), _p.attr('dataname') );
       });

FolderClick

树文件夹的点击事件

Event Payload:

  • _evt Event

Example:

       _tree.on('FolderClick', function( _evt ){
           var _p = $(this);
           alert( 'folder click' );
       });

RenderLabel

树节点的展现事件

Event Payload:

  • _data Array
  • _item Selector

Example:

       _tree.on('RenderLabel', function( _data ){
           var _node = $(this);
           _node.html( printf( '<a href="javascript:" dataid="{0}">{1}</a>', _data[0], _data[1] ) );
       });