#概述

该插件是一款树形图插件，用于展示公司股权关系的树形图

##1.依赖

本插件依赖于jquery

1.1CDN安装

<script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>

1.2本地安装

<script src="js/jquery/jquery-1.10.2.js"></script>

##2.安装

下载地址

<script charset="utf-8" src="js/orgTree.js"></script>

##3.使用

var demo = new orgTree({el:$("#test")});

##4.配置项

初始化options，参数

el

var options = {el:$("#test")};
var demo = new orgTree(options);

• 类型： 可以是jquery元素，也可以是原生元素,也可以是字符串（例如，#demo,.demo,等任意符合jquery的选择器）
• 是否必填：是
• 说明：这是指定那个元素进行渲染，必须指定宽高。

实例化后的方法

实例化对象方法

• setData(rootData,rootName)

  • 返回值：无
  • 作用：这是开始渲染数据的方法
  • 参数：
    • rootName

  上下树形图根部元素的名字

  - rootData 
  

  此数据为上部和下部树形数据，downward为下部数据起点，所有的下部数据放到downward.children，同理上部所有数据放到upward.children中,下面为示例 每次调用此方法都会重新渲染图形

  var rootData = {
                  "downward": {
                      "direction": "downward",
                      "name": "origin",
                      "children": [
                          {
                              "name": "上海冰鉴企业征信服务有限公司",
                              "amount": "100",
                              "ratio": "55%",
                              "hasHumanholding": true,
                              "hasChildren": true,
                              "isExpand": false,
                              "children": []
                          }
                      ]
                  },
                  "upward": {
                      "direction": "upward",
                      "name": "origin",
                      "children": [
                          {
                              "name": "上海唯猎创业投资中心(有限合伙)",
                              "hasHumanholding": false,
                              "amount": "100",
                              "ratio": "55%",
                              "children": []
                          }
                      ]
                  }
              }

• on(type,fn)

  • 参数： type的可选值仅hover(后期可以扩展);fn为回调函数。
  • 是否必填：是
  • 作用：这是鼠标悬停公司模块的事件，也是手机端点击公司模块事件，并且该事件可以监听多次。

  //data 为hover 对应元素的值；render 为一个渲染函数，参数为字符串，即需要渲染悬浮后显示的内容。
    demo.on("hover",function(data,render){
       setTimeout(function() {
           render(111111);
       }, 200);
   });