给zTree添加onSelect callback

  由于jquery ui没有集成tree控件,所以在网上找到了zTree v3。zTree无疑是功能非常强大的一款jquery的插件,而且是国人作品,zTree的文档写得也非常好,效果很炫。但是我在使用过程中,发现ztree目前的版本,缺乏一个onSelect的callback。系统的要求是这样的,Tree的数据load完成,render之后,自动选择一个节点,并根据该节点从server装载新的数据并显示。于是决定自己添加一下此功能。

  经分析发现zTree的实例是在调用jQuery.fn.zTree.init的时候动态构建的,所以不存在一个静态的类来扩展,所以只有在构建zTree实例的时候截取实例变量并进行扩展,废话少说上代码:

function enZTree(){
	if(!$.fn.zTree._ori_init){
		$.fn.zTree._ori_init=$.fn.zTree.init;
		$.fn.zTree.init=function(){
			obj=$.fn.zTree._ori_init.apply(this,arguments);
			return function(t){
				t._ori_selectNode=t.selectNode;
				t.selectNode=function(nd){
					t._ori_selectNode.apply(this,arguments);
					if (this.setting.callback.onSelect){
						this.setting.callback.onSelect(null,this.setting.treeId,nd);
					}
				};
				return t;
			}(obj);
		}
	}
}

 代码通过替换jQuery.fn.zTree.init函数实现对用户构建的zTree实例的动态扩展。onSelect的配置参照api文档中其他callback的设置即可。

如果需要自动扩展,则需要注册一个启动方法:

jQuery(document).ready(function(){
enZTree();
});
原文地址:https://www.cnblogs.com/dajianshi/p/3727946.html