方便的构造 ztree

  1 /**
  2  * 构造Ztree 说明。
  3  * 
  4  * 快速构造默认配置的ztree
  5  * new ZtreeCreator('treeId',url).initZtree(param); 
  6  * treeId:树的Id，url：请求的url ， 
  7  * initZtree(param,level,call); 
  8         parma 异步请求提供参数，
  9         level展开层级（可略，默认展开全部），
 10         call 回调提供Ztree初始化对象  
 11  ***/
 12 var ZtreeCreator = function(treeId,url,initJson){
 13     
 14     if(!treeId) alert("构造Ztree必须提供 treeId");
 15     this.treeId = treeId;
 16     
 17     var _treeObj;
 18     var outLookStyle =false;
 19     
 20      
 21     /**初始化树**/    
 22     this.initZtree = function(param,level,callBack){
 23         if(!url && !_setting.async.url) alert("构造Ztree必须提供 请求地址！");
 24         if (jQuery.isFunction(param)) {
 25             callBack = param;
 26             param = {}; 
 27         }
 28         
 29         if (jQuery.isFunction(level)) {
 30             callBack = level; 
 31             level = false;
 32         }
 33         if(!param) param = {};
 34         
 35         // 通过json初始化树
 36         if(initJson && initJson.length >0){
 37             pushJsonToBuildTree(initJson,level,callBack);
 38             return this;
 39         }
 40         
 41         //如果异步加载
 42         if(_setting.async.url){
 43             _treeObj=$.fn.zTree.init($("#"+treeId), _setting);
 44             return this;
 45         }
 46         //一次性加载
 47         $.post(url,param,function(result){
 48             if(!(result instanceof Array)) result =eval('(' + result + ')');
 49             pushJsonToBuildTree(result,level,callBack);
 50         });
 51         return this;
 52     }
 53     
 54      function pushJsonToBuildTree(json,level,callBack){
 55         _treeObj = $.fn.zTree.init($("#"+treeId),_setting,json);
 56         //展开层级
 57         if(level){
 58             _treeObj.expandAll(false);
 59             expandTree(_treeObj,_treeObj.getNodes(),level);
 60         }
 61         else{ _treeObj.expandAll(true); }
 62         
 63         if($.isFunction(callBack)) callBack(_treeObj,treeId); 
 64         
 65         if(outLookStyle){
 66             try{
 67                 var curMenu = _treeObj.getNodes()[0].children[0].children[0];
 68             }catch(e){}
 69             _treeObj.selectNode(curMenu);
 70         }
 71     }
 72     
 73     this.getTreeObj = function(){
 74         if(!_treeObj) alert(treeId+"尚未初始化");
 75         return _treeObj;
 76     };
 77     
 78     
 79     /**设置树展示的标识key  {idKey:"idKEY名称",pIdKey:"",name:"显示名称",title,rootPid}
 80      * idKey 默认 id
 81      * pIdKey 默认 parentId
 82      * name 默认 name
 83      * title 默认 name
 84      * */
 85     this.setDataKey = function(keys){
 86         if(!keys) return this;
 87         if(keys.idKey) _setting.data.simpleData.idKey = keys.idKey;
 88         if(keys.pIdKey) _setting.data.simpleData.pIdKey = keys.pIdKey;
 89         if(keys.name) _setting.data.key.name = keys.name;
 90         if(keys.title) _setting.data.key.title = keys.title;
 91         if(keys.rootPId) _setting.data.simpleData.rootPId=keys.rootPId;
 92         
 93         return this;
 94     }
 95     
 96     /** 设置选择框的方式默认没有选择框
 97      * 如果需要选择框，不需要级联 则传 true
 98      * param  true   or  { "Y": "p", "N": "s" }
 99      */
100     this.setCheckboxType = function(type){
101         _setting.check.enable = true
102         if(type instanceof Object){
103             _setting.check.chkboxType = type;
104         }
105         return this;
106     }
107     
108     /**这里支持Ztree 所有的回调方法，请查API
109      * eg:传入参数{beforeClick：beforeClick,onClick:onClick,beforeCheck:beforeCheck}
110      **/
111     this.setCallback = function(callBack){
112         if(callBack instanceof Object) 
113         for(call in callBack){
114             if(!$.isFunction(callBack[call])) alert(call+" :is not a function");
115             _setting.callback[call]    = callBack[call];
116         }
117         return this; 
118     }
119     
120     /** 异步加载 */
121     this.setAsync = function(conf){
122         _setting.async = conf;
123         return this; 
124     }
125     
126     this.setChildren = function(childrenKey){
127         _setting.data.simpleData.enable=false;
128         if(childrenKey)_setting.data.key.children=childrenKey;
129     }
130     
131     /**是否显示图标配置项**/
132     this.setShowIcon = function(call){
133         _setting.view.showIcon = call;
134         return this; 
135     }
136     /**设置一些特殊的值请参照 Ztree _setting 格式 ***/
137     this.setSetingParam = function(param){
138         if(param instanceof Object) 
139         for(p in param){
140             _setting[p]    = param[p];
141         }
142         return this; 
143     }
144     this.setOutLookStyle =function(){
145         //设置一些参数 
146         this.setSetingParam({view :{showLine: false, showIcon: true,
147                 selectedMulti: false, dblClickExpand: false,
148                 addDiyDom: function(treeId, treeNode){
149                         var spaceWidth = 15;
150                         var switchObj = $("#" + treeNode.tId + "_switch"),
151                         icoObj = $("#" + treeNode.tId + "_ico");
152                         switchObj.remove();
153                         if(!treeNode.children ||treeNode.children.length==0){
154                             switchObj.removeClass("switch");
155                         }
156                         icoObj.before(switchObj);
157                         if (treeNode.level > 0){
158                             var spaceStr = "<span style='display: inline-block;width:" + (spaceWidth * treeNode.level)+ "px'></span>";
159                             switchObj.before(spaceStr);
160                         }
161                 }
162             }});
163         
164         $("#"+treeId).addClass("showIcon"); 
165         outLookStyle =true;
166         return this;
167     }
168     /***
169      * isShowIn,被显示在某个元素下面，比如 input框，做成累似comboTree的样子
170      * width,height 设置出现 那个 combox的宽高
171      * TODO 如果是input 设置 autoSetValue = true ， 扩展回显和自动填值功能。
172      */
173     var _isShowIn,_menuContent;
174     this.makeCombTree = function(isShowIn,width,height){
175         height = height? height:300;
176         width =width ? width:163;
177         _menuContent = treeId+"MenuContent";
178         _isShowIn = isShowIn; 
179         var menuContent ='<div id="'+_menuContent+'" style="width:'+width+'px; height:'+height+'px;overflow-y:scroll; position:absolute;z-index: 9999;display:none;background-color:#F5F5F5">'
180                     +'<ul id="'+treeId+'" class="ztree" ></ul></div>';
181         $("#"+isShowIn).after(menuContent); 
182         $("#"+isShowIn).bind("click",this.showMenu);  
183         return this;
184     }
185     // 可以添加一个目标对象，如果是添加了点击事件的，则默认
186     this.showMenu = function(target){
187         if(!target || target.currentTarget) {
188             target = $(this);
189         }
190 
191         var btnOffset =  target.offset();
192         $("#"+_menuContent).css({left:btnOffset.left + "px", top:btnOffset.top + target.outerHeight() + "px"}).slideDown("fast");
193         $("body").bind("mousedown",onBodyDown);
194     }
195     this.hideMenu =function(){
196         hideMenu(); 
197     }
198     
199     var onBodyDown = function (event){
200         if (!(event.target.id == _isShowIn || event.target.id == _menuContent || $(event.target).parents("#"+_menuContent).length>0)){
201             hideMenu();
202         }
203     }
204     var hideMenu = function(){
205         $("#"+_menuContent).fadeOut("fast");
206         $("body").unbind("mousedown", onBodyDown);
207     }
208     
209     /**_setting 私有 配置项**/ 
210     var _setting = {
211             data: {
212                 key:{
213                     name: "name",
214                     title: "name"
215                 },
216                 simpleData: {
217                     enable: true,
218                     idKey: "id",
219                     pIdKey: "parentId",
220                     rootPId:0
221                 }
222             },
223             async: {enable: false},
224             edit: {
225                     drag: {isCopy:true},
226                     enable: true,
227                     showRemoveBtn: false,
228                     showRenameBtn: false
229                 },
230             view:{
231                 nameIsHTML: true,
232                 selectedMulti: true,
233                 showIconFont:true,
234                 showIcon: null
235             },
236             check: {
237                 enable: false,
238                 chkboxType: { "Y": "", "N": "" }
239             },
240             callback:{
241                 beforeClick: null,
242                 onClick: null,
243                 onRightClick: null,
244                 beforeDrop: null,
245                 onDrop: null
246             }
247         }
248         
249         /***设置展开层级*/
250      function expandTree(treeObj,nodes,level){
251             var thelevel=level-1;  
252             for(var i=0;i<nodes.length;i++)
253             {
254                 var node =nodes[i];
255                 treeObj.expandNode(node, true, false, false);  
256                 if(thelevel>0 && node.children && node.children.length>0)
257                 {
258                     expandTree(treeObj, node.children,thelevel);   
259                 }  
260             }  
261     }
262     
263     };