JS高级第三天：

ztree详解！

/**
 * 创建树
 */
var zTree = {
 setting:{
  isSimpleData: true,
  treeNodeKey: "id",
  treeNodeParentKey: "pid",
  showLine: true,
  root:{ 
   isRoot:true,
   nodes:[]
  }
 },
 zNodes:[
  {id:1,pid:0,name:'上海java第4期就业班'},
  {id:2,pid:1,name:'带头大哥：班长'},
  {id:3,pid:2,name:'班秘:就是漂亮'},
  {id:4,pid:3,name:'全体同学'},
 ],
 /**
  * 创建树
  */
 createTree:function(){
  $("#tree").zTree(zTree.setting, zTree.zNodes);
 }
};
$().ready(function(){
 zTree.createTree();
 
});

需要引入两个js包，分别是：jquery-1.4.2.js和jquery-ztree-2.5.js

自己开发ztree插件：

 

/**
 * 创建树
 * 这是自己开发ztree插件
 */
(function($){
 $.fn.dataztree=function(){
  $("#tree").zTree(setting, zNodes);
 };
 //定义ztree的两个变量
   var setting={
     isSimpleData: true,
     treeNodeKey: "id",
     treeNodeParentKey: "pid",
     showLine: true,
     root:{ 
      isRoot:true,
      nodes:[]
     },
     //这是回调函数，作用是给每个树节点一个加一个单击事件
     callback:{
      click:function(){
       alert("ok");
      }
     }
    };
   var zNodes=[
     {id:1,pid:0,name:'上海java第4期就业班'},
     {id:2,pid:1,name:'带头大哥：班长'},
     {id:3,pid:2,name:'班秘:就是漂亮'},
     {id:4,pid:1,name:'全体同学'},
     {id:5,pid:4,name:'岳飞'},
    ];
}
)($);
$().ready(function(){
 $("#tree").dataztree();
 
});

对刚才开发的ztree插件增加灵活性：

/**
 * 创建树
 * 这是自己开发ztree插件
 */
(function($){
 $.fn.dataztree=function(config){
  //定义一个变量prarm，用传进来的config跟setting比较，没有的添加，有的覆盖，然后重新赋值给prarm
  var prarm={};
  $.extend(prarm,setting,config);
  $("#tree").zTree(prarm, zNodes);
 };
 //定义ztree的两个变量
   var setting={
     isSimpleData: true,
     treeNodeKey: "id",
     treeNodeParentKey: "pid",
     showLine: true,
     root:{ 
      isRoot:true,
      nodes:[]
     }

    };
   var zNodes=[
     {id:1,pid:0,name:'上海java第4期就业班'},
     {id:2,pid:1,name:'带头大哥：班长'},
     {id:3,pid:2,name:'班秘:就是漂亮'},
     {id:4,pid:1,name:'全体同学'},
     {id:5,pid:4,name:'岳飞'},
    ];
}
)($);
$().ready(function(){
 $("#tree").dataztree({
  //在原有的基础上添加一个新的回调函数
  callback:{
   click:function(){
    alert("ok");
   }
  }
 });
 
});

要注意extend的用法：$.extend(...);注意是全局函数，$和函数名之间有“.”
js结构分析：

  
var privilege = {
     //所有的js的内容有三个方面
       1、事件的声明
       2、数据的结构
       3、功能的实现
     event:{
        //所有的事件的初始化全部在这里做
        initEvent:function(){
        }
     },
     //关于数据的结构
     data:{
     },
     //功能结构
     fun:{
     }
};

ztree进阶代码:

每次调用树就要写一遍代码,太麻烦,所以要开发出一个插件,这个插件继承了通用的树,我们只要把需要改变的数据传过去就行了,可以不用每次都写一遍完整的树代码.

1.服务端(插件端)

(function($){
    $.fn.dataTree_V3 = function(config){
var treeObj = this;//把this赋值给当前变量
        var param = {};
        /**
         * 把config的内容赋值到setting中
         *    如果没有，直接赋值，如果有，则覆盖
         */
        $.extend(true,param, $.fn.dataTree_V3.defaultConfig, config);
$.post(config.url,config.data,function(data){
$(treeObj).zTree(param.setting, data);
});
    };
    /**
     * 该插件的默认的配置
     */
    $.fn.dataTree_V3.defaultConfig = {
        setting: {
            isSimpleData: true,
            treeNodeKey: "id",
            treeNodeParentKey: "pid",
            showLine: true,
            root: {
                isRoot: true,
                nodes: []
            }
        }
    };
})($);

客户端(调用端)

$().ready(function(){
/**
 * 这样的写法把树的形成的过程封装了，但是没有命名空间的概念，所以感觉还是比较乱
 * 这里没有用到继承的写法
 */
$("#tree").dataTree_V3({
url:'menuitemAction_showMenuitems.action',
data:null,
setting:{
treeNodeKey:'mid'
}
});
    
});