API Docs for: 0.2
Show:

JC.AjaxTree Class

AJAX 树菜单类 JC.AjaxTree

require: JC.BaseMVC , JSON2

JC Project Site | API docs | demo link

页面只要引用本文件, 默认会自动初始化 div class="js_compAjaxTree" 的树组件

可用的 html attribute

data-defaultOpenRoot = bool, default = true
如果没有默认选中节点, 是否展开根节点
data-cajScriptData = script selector
从脚本模板解释数据
data-cajData = object name of window
从window变量获取数据
data-cajUrl = url
从 url 加载数据
data-rootId = node id, default = ''
指定根节点ID
data-urlArgName = string, default = 'tree_node'
书节点的URL参数名
data-typeIndex = int, default = 0
数据节点中 节点类型 所在的索引位置
data-idIndex = int, default = 1
数据节点中 节点id 所在的索引位置
data-nameIndex = int, default = 2
数据节点中 节点name 所在的索引位置

Constructor

JC.AjaxTree

(
  • _selector
)

Parameters:

  • _selector Selector

    树要显示的选择器

Example:

      <div class="js_compAjaxTree js_tree2" data-cajData="TREE_2" data-urlArgName="node">
       <script>
           window.TREE_2 = {
               root: [ 'folder', "23",'客户发展部']
               , data: 
                   {
                       "24":
                       [
                           [
                               'file',
                               "25", 
                               "二组一队"
                           ], 
                           [
                               'file',
                               "26", 
                               "二组二队"
                           ], 
                           [
                               'file',
                               "27", 
                               "二组三队"
                           ]
                       ], 
                       "23":
                       [
                           [
                               'file',
                               "28", 
                               "销售二组"
                           ], 
                           [
                               'folder', 
                               "24", 
                               "售前审核组"
                           ]
                       ]
                   }
           };           
           $( document ).delegate( 'div.js_tree2', 'renderItem', function( _evt, _item, _data ){
               _item.html( JC.f.printf( '<a href="?node={0}" data-id="{0}">{1}</a>', _data[1], _data[2] ) );
           });
       </script>
   </div>

Methods

_beforeInit

() private

初始化之前调用的方法

_init

(
  • _selector
)
private

内部初始化方法

Parameters:

  • _selector Selector

_inited

() private

内部初始化完毕时, 调用的方法

_initHanlderEvent

() private

内部事件初始化方法

add

(
  • _parentId
  • _data
  • _needFresh
  • _cb
)

新增节点方法

Parameters:

  • _parentId String

    父节点ID

  • _data Object

    新增的数据对象( 对象会通过ajax请求传递,ajax的url读取dom属性“data-addUrl” )

  • _needFresh Boolean

    是否刷新父节点

  • _cb Function

    添加请求完毕后的回调函数,请求结果为第一个参数

close

(
  • _nodeId
)

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

Parameters:

  • _nodeId String | Int

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

getItem

(
  • _nodeId
)

获取树的节点 label

Parameters:

idPrefix

() String

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

Returns:

String:

树的ID前缀

init

(
  • _selector
)
Array of AjaxTreeInstance static

初始化可识别的 AjaxTree 实例

Parameters:

  • _selector Selector

Returns:

Array of AjaxTreeInstance:

notification

(
  • _evtName
  • _args
)

通知选择器有新事件
JC 组件以后不会在 HTML 属性里放回调, 改为触发 selector 的事件

Parameters:

notificationHandler

(
  • _evtName
  • _args
)

通知选择器有新事件, 有返回结果
JC 组件以后不会在 HTML 属性里放回调, 改为触发 selector 的事件

Parameters:

Returns:

:

on

(
  • _evtName
  • _cb
)

使用 jquery on 绑定事件

Parameters:

Returns:

BaseMVCInstance

open

(
  • _nodeId
)

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

Parameters:

  • _nodeId String | Int

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

openUI

(
  • _nodeId
)

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

Parameters:

  • _nodeId String | Int

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

refreshNode

(
  • _nodeId
)

刷新某个节点

Parameters:

selectedItem

(
  • _selector
)

获取或设置树的高亮节点

Parameters:

  • _selector Selector

Returns:

selector

selector

()

获取 显示 BaseMVC 的触发源选择器, 比如 a 标签

Returns:

selector

trigger

(
  • _evtName
  • _args
)

使用 jquery trigger 触发绑定事件

Parameters:

Returns:

BaseMVCInstance

triggerHandler

(
  • _evtName
  • _args
)

使用 jquery triggerHandler 触发绑定事件

Parameters:

Returns:

:

Properties

dataFilter

Function static

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

Default: undefined

Example:

       JC.AjaxTree.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;
       };

lastHover

Selector

树的最后的 hover 节点
树的 hover 是全局属性, 页面上的所有树只会有一个当前 hover

Default: null

Events

change

树节点的change事件

Event Payload:

  • _evt Event

Example:

       $( document ).delegate( 'div.js_compAjaxTree', 'change', function( _evt, _item, _data, _box ){
           JC.dir( _item[0], _data, _box[0] );
       });

click

树节点的点击事件

Event Payload:

  • _evt Event

Example:

       $( document ).delegate( 'div.js_compAjaxTree', 'click', function( _evt, _item, _data, _box ){
           JC.dir( _item[0], _data, _box[0] );
       });

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] ) );
       });