Jquery插件

(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
//        }
//    });
});