(function($){
function MyzTree(){} class MyzTree{}
MyzTree.defaults={} private defaults
MyzTree.method={} private method
MyzTree.prototype={ public dataTree
dataTree:{}
}
$.fn.extend(new MyzTree());
})($);
(function($){
/**
* dataTree JQuery zTree 辅助插件
* @param {Object} config dataTree插件的一个配置的设置
* version 1.1
*/
//声明一个函数MyzTree,这是一个构造器函数,也是一个对象
function MyzTree(){}
/**
* 说明:在MyzTree对象上声明一个defaults属性,指向的是一个{}对象
* 作用:存储和共享本插件所有的数据和配置
* 作用域:私有属性,内部调用
* MyzTree.defaults对象的结构:
* ajax:该属性存储的是有关ajax请求的相关参数数据
* setting:该属性存储的是zTree插件需要的配置
* mySetting:该属性存储的是自己需要的相关属性
*/
MyzTree.defaults = {
ajax: {
//ajax请求路径
url: "",
//请求参数
data: null
},
setting: {
isSimpleData: true,
treeNodeKey: "id",
treeNodeParentKey: "pid",
showLine: true,
root: {
isRoot: true,
nodes: []
},
//展开菜单需要触发的回调函数
callback: {
}
},
mySetting: {
//true代表一次性加载所有菜单项
allLoad: true,
//用于存储自定义回调函数
callback: ''
}
};
/**
* 说明:在MyzTree对象上声明一个method属性,指向的是一个{}对象
* 作用:存储本插件内部调用的方法
* 作用域:私有属性,内部调用
* MyzTree.method对象的结构:
* loadAllNode:该方法加载全部菜单项
* loadSubNode:该方法加载指定pid的菜单项
* loadData:该方法发出post请求请求数据
*/
MyzTree.method = {
loadAllNode: function(){
//设置自定义回调函数 以便后面loadData方法调用
MyzTree.defaults.mySetting.callback = function(data){
//渲染zTree
MyzTree.defaults.mySetting.me.zTree(MyzTree.defaults.setting, data);
};
//设置完回调之后,加载数据 loadData方法会自动调用上面自定义的回调函数渲染zTree
MyzTree.method.loadData();
},
loadSubNode: function(event, treeId, treeNode){
//如果pid为0说明是加载跟节点
if (MyzTree.defaults.ajax.data.pid == 0) {
//设置自定义回调函数 以便后面loadData方法调用
MyzTree.defaults.mySetting.callback = function(data){
//渲染zTree 并将zTree的返回值存储在MyzTree.defaults.mySetting.treePlugin这个属性上 以便addNodes子节点时使用
MyzTree.defaults.mySetting.treePlugin = MyzTree.defaults.mySetting.me.zTree(MyzTree.defaults.setting, data);
};
} else {
//设置自定义回调函数 以便后面loadData方法调用
MyzTree.defaults.mySetting.callback = function(data){
//如果能进入else说明是展开了某个菜单 要判断 如果展开的节点下不存在子节点 则不addNodes
if (!MyzTree.defaults.mySetting.treePlugin.getNodeByParam("pid", treeNode.mid)) {
//使用zTree的返回值 addNodes子节点
MyzTree.defaults.mySetting.treePlugin.addNodes(treeNode, data, true);
}
};
}
//设置完回调之后,加载数据 loadData方法会自动调用上面自定义的回调函数渲染zTree或者渲染addNodes子节点
MyzTree.method.loadData();
},
loadData: function(){
//请求服务器数据
$.post(MyzTree.defaults.ajax.url, MyzTree.defaults.ajax.data, function(data){
//成功请求数据后 调用上面自定义的回调函数
MyzTree.defaults.mySetting.callback(data);
});
}
};
/**
* 说明:在MyzTree对象的原型上声明一个dataTree属性,指向的是一个function(config)
* 作用域:公有属性,外部接口
* @param {Object} config 该参数是接收用户配置的所有的数据 和MyzTree.defaults结构是一样的
*/
MyzTree.prototype = {
//该dataTree属性即是MyzTree原型上的属性也是将来要添加到jQuery原型上的属性 以便暴漏在外部
dataTree: function(config){
//将调用者传递进来的config对象赋值覆盖给MyzTree.defaults对象 true是深度覆盖
$.extend(true, MyzTree.defaults, MyzTree.defaults, config);
//this代表$("#tree")元素 将这个元素绑定到MyzTree.defaults.mySetting.me属性上
MyzTree.defaults.mySetting.me = this;
//若allLoad是true 则调用MyzTree.method.loadAllNode();方法
if (MyzTree.defaults.mySetting.allLoad) {
MyzTree.method.loadAllNode();
} else {
//否则就 设置zTree的回调函数 用来响应菜单的展开事件
MyzTree.defaults.setting.callback.expand=function(event, treeId, treeNode){
//设置ajax请求的pid为父节点的mid 用来在ajax请求的时间传递给后台来检索子节点数据
MyzTree.defaults.ajax.data.pid = treeNode.mid;
//调用loadSubNode方法加载子节点了 这个是设置回调函数自己去调用加载子节点
MyzTree.method.loadSubNode(event, treeId, treeNode);
};
//调用loadSubNode方法加载子节点了 这个是第一次加载根节点要调用的
MyzTree.method.loadSubNode();
}
}
};
//插件封装好之后 将MyzTree的实例挂载到jQuery的原型上 MyzTree的实例 <==> new MyzTree() <==> MyzTree.prototype
//把prototype挂到挂载到jQuery的原型上
$.fn.extend(new MyzTree());
})($);
/**
* 自动启动的功能
*/
$().ready(function(){
$("#tree").dataTree({
ajax: {
url: "ajaxAction_showMenuitemsByUser.action",
data: {
pid: 0
}
},
setting: {
treeNodeKey: "mid"
},
mySetting: {
allLoad: true
}
});
// $("#tree").dataTree({
// ajax: {
// url: "menuitemAction_showAllMenuitem.action",
// data: {
// pid: 0
// }
// },
// setting: {
// treeNodeKey: "mid"
// },
// mySetting: {
// allLoad: true
// }
// });
});