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插件:
/**
$().ready(function(){
* 创建树
* 这是自己开发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:'岳飞'},
];
}
)($);
$("#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:{
}
};
(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'}});});