tree插件说明

<!-- 首先需要引入css样式与js文件（路径可能有所不同） -->
<link href="css/tree.css" rel="stylesheet">
<script src="js/tree.js" type="text/javascript"></script>
<!-- 创建一个div，设置它的宽度、边框 -->
<div id="main" style="
      width: 300px;
      border: 1px solid black;
      margin: 20px 30px;
      ">
树状菜单
</div>
<script>
//创建一个数据源json数组
var data = [{
    name: "父类",
    pid:'1',
    childs: [{
      name: "子类",
      data:'你好',
      title:'child',
      childs: [{
        name: "子子类",
        unfold: true,
        data:'你好,子子类',
        childs: [{
          name: "子子子类",
          d:'你好,子子子类',
          hide:true
        }]
      }]
    }, {
      name: "子类1",
      unfold: false,
      data:'你好,子类1',
      childs: [{name: "子子类1"}]
    },{
      name:'子类2',
      type:'folder'
    }]
  }];
 //设置参数
 var option={
        data:data,
        elem:'#main'
        };
 var tree=new Tree(option);
 tree.init();
</script>

 var option={
      data:[{
            tree_id:0,
            tree_name:'name',
            tree_title:'';
            list:[...]
          },...],
      elem:'#main',
      //loadAll默认为true
      loadAll:false,
      //强制不生成id，若id不存在或为无效数据，null、undefined，则仍然会生成id
      compelCustom:true
      };

//示例
var option={
    data:[{
        tree_id:0,
        tree_name:'name',
        tree_title:'';
        list:[...]
    },...],
    elem:'#main',
    format:function (format){
       //数据源代表id的参数名
      format.id='tree_id';
        //若想要将该节点所有内容全部作为data（子节点的数据除外），需要将format.data的值设置为all
      format.data='all';
      format.name='tree_name';
      format.title='tree_title';
      format.childs='list';
    }
}

//示例
 var option = {
    async:{
      //设置url
      url:'http://10.0.42.220:8090/test/treeTest',
      method:'GET',//请求方式
      data:'需要传过去的数据'
    },
    elem: '#main',
    loadText:''//加载阶段显示的文字，可设置为图片或其他
    ...
 }

var option = {
    data:[{
        tree_id:0,
        tree_name:'name',
        tree_title:'';
        list:[...]
    },...],
    toolbar:false,
    toolClick:function (type,node){
      //type为预设的点击按钮类型，node为该节点返回的对象
    },
    //文件夹工具栏，可定义多个，可不填写，默认三个按钮[添加、修改、删除]，文件工具栏则只有[修改、删除]
    foldTools:[{'name':'删除',"title":'删除该节点',type:'delete'}],
    //文件工具栏，可不填写，默认与文件夹工具栏一直
    tools:[{'name':'删除',"title":'删除该节点',type:'delete'}]
    ...
}
//由于iE浏览器显示的工具栏是乱码的，因此如果是ie浏览器，则关闭工具栏
if(window.ActiveXObject || "ActiveXObject" in window){
  option.toolbar=false;
}

var option = {
    data:[{
        tree_id:0,
        tree_name:'name',
        tree_title:'';
        list:[...]
    },...],
    checkbox:true
    ...
}
//获取所有选中的id，如果子节点全部选中，则包括父节点的也全部选中
tree.getChecked()

var option = {
    data:[{
        tree_id:0,
        tree_name:'name',
        tree_title:'';
        list:[...]
    },...],
    template:function(data){
       //在这里改变data的值，改变之后会同步更新到节点上去
    }
    ...
}

var option={
    unfold:function (node,tree){
      //这里写收缩后的回调内容
    },fold:function (node,tree){
      //这里写展开后的回调内容
    },prevFold:function (node,tree){
      //这里写展开前的回调内容
    },loadCallBack:function (tree){
      //这里写异步加载完成之后的回调内容
    },node_click:function(node,tree){
       //这里写子节点点击之后的回调，不包括文件夹
    },node_dbclick:function(node,tree){
        //这里写子节点双击之后的回调，不包括文件夹
    },node_mouseleave:function(node,tree){
        //这里写子节点悬浮之后的回调，不包括文件夹
    },node_mouseenter:function(node,tree){
        //这里写子节点悬浮离开之后的回调，不包括文件夹
    },folder_click:function(node,tree){
       //这里写文件夹点击之后的回调，不包括子节点
    },folder_dbclick:function(node,tree){
        //这里写文件夹双击之后的回调，不包括子节点
    },folder_mouseleave:function(node,tree){
        //这里写文件夹悬浮之后的回调，不包括子节点
    },folder_mouseenter:function(node,tree){
        //这里写文件夹悬浮离开之后的回调，不包括子节点
    },gm_click:function(node,tree){
       //这里写点击之后的回调，包括子节点
    },gm_dbclick:function(node,tree){
        //这里写双击之后的回调，包括子节点
    },gm_mouseleave:function(node,tree){
        //这里写悬浮之后的回调，包括子节点
    },gm_mouseenter:function(node,tree){
        //这里写悬浮离开之后的回调，包括子节点
    }
    elem: '#main',
    ...
}