API Docs for:
Show:

File: packages/bricksui-form/lib/bu-tree.js

var get = Ember.get,
  set = Ember.set,
  forEach = Ember.EnumerableUtils.forEach,
  slice = Array.prototype.slice
  ;


/**
 @module bricksui
 @submodule bricksui-form
 */

/**
 树组件,对Jquery Ztree进行简单的封装

 使用方式
 ```handlebars
 {{bu-tree options=view.treeOptions zNodes=view.zNodes}}
 ```
 对应的View文件为
 ```javascript
 Tree View
 export default Ember.View.extend({

    init: function () {
      this._super.apply(this,arguments);
      this.set('treeOptions', {
        onClick:function(component, event, treeId, treeNode, clickFlag){
          //your code
        }
      });
      this.set('zNodes', [
          { name: "父节点1 - 展开", open: true,
            children: [
              { name: "父节点11 - 折叠",
                children: [
                  { name: "叶子节点111"},
                  { name: "叶子节点112"},
                  { name: "叶子节点113"},
                  { name: "叶子节点114"}
                ]},
              { name: "父节点12 - 折叠",
                children: [
                  { name: "叶子节点121"},
                  { name: "叶子节点122"},
                  { name: "叶子节点123"},
                  { name: "叶子节点124"}
                ]},
              { name: "父节点13 - 没有子节点", isParent: true}
            ]},
          { name: "父节点2 - 折叠",
            children: [
              { name: "父节点21 - 展开", open: true,
                children: [
                  { name: "叶子节点211"},
                  { name: "叶子节点212"},
                  { name: "叶子节点213"},
                  { name: "叶子节点214"}
                ]},
              { name: "父节点22 - 折叠",
                children: [
                  { name: "叶子节点221"},
                  { name: "叶子节点222"},
                  { name: "叶子节点223"},
                  { name: "叶子节点224"}
                ]},
              { name: "父节点23 - 折叠",
                children: [
                  { name: "叶子节点231"},
                  { name: "叶子节点232"},
                  { name: "叶子节点233"},
                  { name: "叶子节点234"}
                ]}
            ]},
          { name: "父节点3 - 没有子节点", isParent: true}
        ]
      );
    }
  });
 ```

 ```html
 Warning: *组件重写了callback函数方法,加入了一层代理功能,第一个参数为component实例,用于与Ember交互,其他参数与zTree一致
 ```

 ###详细API DEMO 见 [Ztree查看更多...](http://www.ztree.me/v3/main.php#_zTreeInfo)

 @class BuTree
 @namespace Ember
 @extends Ember.Component
 */
export default Ember.Component.extend({

  tagName: 'ul',

  /**
   * 默认模板
   * @default ''
   * @property defaultTemplate
   * @type function
   */
  defaultTemplate: Ember.Handlebars.compile(''),

  /**
   * 树所绑定的数据
   * @property zNodes
   * @type object
   * @default null
   */
  zNodes: null,


  classNames:['ztree'],

  /**
   * elementId的别名
   * @property treeId
   * @default elementId
   * @type string
   */
  treeId: Ember.computed.alias('elementId'),

  /**
   * ztree配置项
   * @property options
   * @default {}
   * @type object
   */
  options: {},


  init: function () {
    this._super.apply(this, arguments);
    this._parseOptions();
  },


  /**
   * 如果options是模板中传入的字符串,尝试将字符串转换为options对象
   * @method _parseOptions
   * @private
   */
  _parseOptions: function () {
    var options = get(this, 'options');
    if (Ember.typeOf(options) === 'string') {
      try {
        JSON.parse(options);
        set(this, 'options', options);
      } catch (e) {
        throw e;
      }
    }
    this._parseCallback(options);
  },

  /**
   * 对传入的callbacks进行切面,织入当前Compoennt对象,作为回调函数的第一个参数,
   * warn: this作用域保留为z-Tree插件作用域,如果需要获取当前的component作为回调函数的作用域,在回调函数中获取第一个参数进行操作
   * @param options
   * @private
   */
  _parseCallback: function (options) {
    var k,
      callbacks = options.callback;

    if (!callbacks) return;

    function curriedProxy(param, fn) {
      param = [param];
      return function () {
        fn.apply(this, param.concat(slice.apply(arguments)));
      };
    }

    for (k in callbacks) {
      if (callbacks.hasOwnProperty(k)) {
        callbacks[k] = curriedProxy(this, callbacks[k]);
      }
    }
  },

  /**
   * 返回zTree实例
   * @method getTree
   * @returns {*}
   */
  getTree: function () {
    var treeId = get(this, 'treeId');
    return $.fn.zTree.getZTreeObj(treeId);
  },

  /**
   * 在Component销毁时,销毁树的实例
   * @method _destroyElement
   * @private
   */
  _destroyElement: function () {
    var treeId = get(this, 'treeId');

    $.fn.zTree.destroy(treeId);
  }.on('destroyElement'),


  /**
   * 在插入Dom后,生成Tree组件
   * @method _updateDom
   * @private
   */
  _updateDom: function () {
    Ember.run.scheduleOnce('afterRender', this, function () {
      var setting = get(this, 'options'),
        zNodes = get(this, 'zNodes');
      $.fn.zTree.init(this.$(), setting, zNodes);
    });
  }.on('didInsertElement')

});