UXC.Tree Class
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 所在的节点
getInstance
(
UXC.Tree Instance | Undefined
static
-
_selector
从选择器获取 树的 实例, 如果实例有限, 加以判断可避免重复初始化
Parameters:
-
_selector
Selector
Returns:
UXC.Tree Instance | Undefined:
highlight
(
-
_item
获取或设置树的高亮节点
注意: 这个只是数据层面的设置, 不会影响视觉效果
Parameters:
-
_item
Selector
Returns:
selector
init
()
初始化树
实例化树后, 需要显式调用该方法初始化树的可视状态
Example:
var _tree = new UXC.Tree( $('#tree_box'), treeData );
_tree.init();
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] ) );
});