API Docs for: 0.2
Show:

JC.Tree Class

树菜单类 JC.Tree

require: JC.common

JC Project Site | API docs | demo link

Constructor

JC.Tree

(
  • _selector
  • _data
)

Parameters:

  • _selector Selector

    树要显示的选择器

  • _data Object

    树菜单的数据

Example:

       <link href='../../../modules/JC.Tree/res/default/style.css' rel='stylesheet' />
       <script src="../../../lib.js"></script>
       <script src="../../../config.js"></script>
       <script>
           requirejs( [ 'JC.Tree' ], 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 JC.Tree( $('#tree_box2'), treeData );
                       _tree.on('RenderLabel', function( _data ){
                           var _node = $(this);
                           _node.html( JC.f.printf( '<a href="javascript:" dataid="{0}">{1}</a>', _data[0], _data[1] ) );
                       });
                       _tree.on('click', function( _evt ){
                           var _p = $(this);
                           JC.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
)
JC.Tree Instance | Undefined static

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

Parameters:

  • _selector Selector

Returns:

JC.Tree Instance | Undefined:

getItem

(
  • _nodeId
)

获取树的节点 label

Parameters:

idPrefix

() String

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

Returns:

String:

树的ID前缀

init

()

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

Example:

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

on

(
  • _evtName
  • _cb
)

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

Parameters:

open

(
  • _nodeId
)

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

Parameters:

  • _nodeId String | Int

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

selectedItem

(
  • _selector
)

获取或设置树的高亮节点

Parameters:

  • _selector Selector

Returns:

selector

Properties

_model

private

树的数据模型引用

_view

private

树的视图模型引用

dataFilter

Function static

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

Default: undefined

Example:

       JC.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);
           JC.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( JC.f.printf( '<a href="javascript:" dataid="{0}">{1}</a>', _data[0], _data[1] ) );
       });