ztree添加节点数据初始化事件

工作中用到分类选择树型下拉框，只允许单选叶子节点上的分类。如此需要使用把isParent=true的node的nocheck设置成true。

 

可以在ztree的jquery.ztree.core-3.5.js的appendNodes中增加一个回调函数接口setting.callback.afterInitNode：

 

appendNodes: function(setting, level, nodes, parentNode, initFlag, openFlag) {
			if (!nodes) return [];
			var html = [],
			childKey = setting.data.key.children;
			for (var i = 0, l = nodes.length; i < l; i++) {
				var node = nodes[i];
				if (initFlag) {
					var tmpPNode = (parentNode) ? parentNode: data.getRoot(setting),
					tmpPChild = tmpPNode[childKey],
					isFirstNode = ((tmpPChild.length == nodes.length) && (i == 0)),
					isLastNode = (i == (nodes.length - 1));
					data.initNode(setting, level, node, parentNode, isFirstNode, isLastNode, openFlag);
					//对渲染前的数据作最后的修正
					setting.callback.afterInitNode&&setting.callback.afterInitNode(node);
					data.addNodeCache(setting, node);
				}

				var childHtml = [];
				if (node[childKey] && node[childKey].length > 0) {
					//make child html first, because checkType
				……………

 

 

 

 

 

在data.initNode后树节点数据已经初始化结束，接下便是创建树节点dom。所以可以afterInitNode里完成nocheck的设置，对渲染前的数据作最后的修正。

 

// Add semicolon to prevent IIFE from being passed as argument to concatenated code.
;
// UMD (Universal Module Definition)
// see https://github.com/umdjs/umd/blob/master/returnExports.js
(function (root, factory) {
    /* global define, exports, module */
    if (typeof define === 'function' && define.amd) {
        // AMD. Register as an anonymous module.
        define(factory);
    } else if (typeof exports === 'object') {
        // Node. Does not work with strict CommonJS, but
        // only CommonJS-like enviroments that support module.exports,
        // like Node.
        module.exports = factory();
    } else {
        // Browser globals (root is window)
        root.TreeDropDown = factory();
  }
}(this, function () {
	/***
	 * <div style="position:relative">
	 * 	<input type="text"></input>
	 * </div>
	 */
	var TreeDropDown=function(config){
		this.treeId='treeDropDown'+TreeDropDown.count++;
		//说明文字
		this.selectType='radio';	//radio|checkbox
		this.checkOnlyChild=true;
		this.$input={};		//
		this.$inputValue={};
		this.desc='请选择';	//空值描述的文字
		this.idField='id';
		this.simpleData=true;
		this.parentIdField='pId';
		this.isParent=function(record){return record.isParent===true},
		this.nameField='name';	//tree节点名称字段
		this.valueField='id';	//作为值的数据字段
		this.name='';		//选中的名称
		this.value='';		//选中的值
		this.dataUrl='';	//tree的数据url
		this.treeData=[];	//tree的数据
		this.onAfterSelectNode=function(name,value,treeNodes){};
		$.extend(true,this,config);
		this.$parent=this.$input.parent();
		this.init();
	};
	TreeDropDown.count=0;
	TreeDropDown.prototype={
		render:function(){
			//初始化input
			this.$input.css({
				"background-image": "url('/resources/images/triangle-botton-16.png')",
				"background-repeat": "no-repeat",
				"background-position": "right",
				"background-color": "#fff",
				cursor: "pointer"
			});
			this.$input.prop('readonly',true);
			this.$input.attr("placeholder",this.desc);
			
			
			//添加下拉框div
			this.$parent.append('<div class="dropDiv" style="position: absolute;display:none"><ul id="'+this.treeId+'" class="ztree dropTree"></ul></div>');
			//树的容器
			this.$treeDiv=$('.dropDiv',this.$parent);
			this.$tree=$('#'+this.treeId,this.$parent);
			this.$treeDiv.css({
				width: this.$input.outerWidth(true)-2,
				padding:'5px 0',
				"z-index": 100,
				"background-color": '#fff',
				border: '1px solid #cccccc',
				"border-radius": '3px'
			});
			//初始化树
			this.initTree();
		},
		initTree:function(){
			var that=this,treeSetting = {
					data : {
						simpleData : {
							enable : this.simpleData
						}
					},
					check:{
						chkStyle:this.selectType,
						radioType:"all",
						enable: true
					},
					view : {
						selectedMulti : false
					},
					callback: {
						//扩张的ztree事件：appendNodes的data.initNode之后
						afterInitNode:function(treeNode){
							if(that.checkOnlyChild)
								treeNode.nocheck=treeNode.isParent;
						},
						onClick: function(event, treeId, treeNode){
							if(treeNode.nocheck)
								return;
							if(!treeNode.checked)
							{
								that.ztreeObj.checkNode(treeNode,true);
								(that.selectType=='radio')&&that.showOrHide();
							}	
							else
								that.ztreeObj.checkNode(treeNode,false);
							that.afterSelectNode(that.ztreeObj.getCheckedNodes(true));
							return false;
						}
					}
				};
				if(this.simpleData)
					treeData=$.map(this.getTreeData(),function(ele){
						return {
							id:ele[that.idField],
							name:ele[that.nameField]||'',
							pId:ele[that.parentIdField]||0,
							isParent:that.isParent(ele),
							nocheck:that.isParent(ele),
							_value:ele[that.valueField],
							data:ele
						};
					});
				else
					treeData=$.map(this.getTreeData(),this.translateData.bind(this));
			this.ztreeObj = $.fn.zTree.init(this.$tree, treeSetting, treeData);
			this.ztreeObj.expandAll(true);
		},
		translateData:function(data){
			var res={
				id:data[this.idField],
				name:data[this.nameField]||'',
		 		pId:data[this.parentIdField]||0,
		 		isParent:this.isParent(data),
		 		nocheck:this.isParent(data),
		 		_value:data[this.valueField],
		 		data:data
			};
			if(data.children&&data.children.length>0)
				res.children=$.map(data.children,this.translateData.bind(this));
			return res;
		},
		afterSelectNode:function(treeNodes){
			var nameField=this.nameField,valueField=this.valueField;
			if(treeNodes.length==0)
			{
				this.name='';		//选中的名称
				this.value='';		//选中的值
			}	
			else if(treeNodes.length==1)
			{
				this.name=treeNodes[0].data[nameField];		//选中的名称
				this.value=treeNodes[0].data[valueField];		//选中的值
			}
			else 
			{
				this.name=$.map(treeNodes,function(n){return n.data[nameField];}).join(',');
				this.value=$.map(treeNodes,function(n){return n.data[valueField];}).join(',');
			}
			this.$input.val(this.name);
			this.$inputValue.val(this.value);
			this.onAfterSelectNode&&this.onAfterSelectNode(this.name,this.value,treeNodes);
		},
		setValue:function(value){
			if(value==null)
				return;
			var that=this,
				treeNodes=$.map(value.split(','),function(v){
					var treeNode=that.ztreeObj.getNodeByParam("_value",v);
					if(treeNode==null)
						return;
					that.ztreeObj.checkNode(treeNode, true, false);
					return treeNode;
				});
			this.afterSelectNode(treeNodes);
		},
		getTreeData:function(){
			var res=this.treeData;
			if(this.dataUrl)
				$.ajax(this.dataUrl,{
					type:'POST',
					dataType:'json',
					async:false
				}).done(function(data){
					res=data;
				}).fail(function(){
				});
			return res;
		},
		bind:function(){
			var that=this;
			this.$input.on('click',function(){
				that.showOrHide();
			});
		},
		showOrHide:function(){
			if(this.$treeDiv.css('display')=='block')
				this.$treeDiv.css('display','none');
			else
				this.$treeDiv.css('display','block');
		},
		fillData:function(){
			this.value!=null&&this.setValue(this.value);
		},
		init:function(){
			this.render();
			this.bind();
			this.fillData();
		}
	};
	
	return TreeDropDown;
}));