因为jquery ui没有集成tree控件,因此在网上找到了zTree v3。zTree无疑是功能很是强大的一款jquery的插件,并且是国人做品,zTree的文档写得也很是好,效果很炫。可是我在使用过程当中,发现ztree目前的版本,缺少一个onSelect的callback。系统的要求是这样的,Tree的数据load完成,render以后,自动选择一个节点,并根据该节点从server装载新的数据并显示。因而决定本身添加一下此功能。javascript
经分析发现zTree的实例是在调用jQuery.fn.zTree.init的时候动态构建的,因此不存在一个静态的类来扩展,因此只有在构建zTree实例的时候截取实例变量并进行扩展,废话少说上代码:php
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的设置便可。java
若是须要自动扩展,则须要注册一个启动方法:jquery
jQuery(document).ready(function(){ enZTree(); });