同一页面加载多个ztree

 

最近项目要在同一个页面加载 多个ztree做不同分类的选择  看了看官方文档，决定从select_checkbox_menu入手

触发 跟值返回

 

ztree初始化成功后的treeID 是容纳数据的容器的id 比如下面的edu_type

 

<a href="javascript:;"  id="input_format_list_a" onclick="showMenu('format_list');" >资源格式</a>&nbsp;<input id="input_format_list" type="hidden" name="category['format_list']" readonly value="" style="width:120px;"  />

 

 

ztree 初始化的id

 

<div id="menuContent" style="display:none; position: absolute;">

	<ul id="edu_type" class="ztree" style="margin-top:0; width:280px; height: 300px;"></ul>
	<ul id="learner_list" class="ztree" style="margin-top:0; width:280px; height: 300px;"></ul>
	<ul id="grade_list" class="ztree" style="margin-top:0; width:280px; height: 300px;"></ul>
	<ul id="curriculum_list" class="ztree" style="margin-top:0; width:280px; height: 300px;"></ul>
	<ul id="subject_list" class="ztree" style="margin-top:0; width:280px; height: 300px;"></ul>
	<ul id="textbook_list" class="ztree" style="margin-top:0; width:280px; height: 300px;"></ul>
	<ul id="topic_list" class="ztree" style="margin-top:0; width:280px; height: 300px;"></ul>
	<ul id="type_list" class="ztree" style="margin-top:0; width:280px; height: 300px;"></ul>
	<ul id="format_list" class="ztree" style="margin-top:0; width:280px; height: 300px;"></ul>
</div>

 

js代码：

 

 

var setting = {
		check: {
			enable: true,
			chkboxType: {"Y":"ps", "N":"ps"}
		},
		view: {
			dblClickExpand: false
		},
		data: {
			simpleData: {
				enable: true
			}
		},
		callback: {
			beforeClick: beforeClick,
			onCheck: onCheck
		}
	};
	//json数据
	var edu_type_list=<?php echo $edu_type_list?>;
	var learner_list=<?php echo $learner_list?>;
	var grade_list=<?php echo $grade_list?>;
	var curriculum_list=<?php echo $curriculum_list?>;
	var subject_list=<?php echo $subject_list?>;
	var textbook_list=<?php echo $textbook_list?>;
	var topic_list=<?php echo $topic_list?>;
	var type_list=<?php echo $type_list?>;
	var format_list=<?php echo $format_list?>;
	
	function beforeClick(treeId, treeNode) {
		var zTree = $.fn.zTree.getZTreeObj(treeId);
		zTree.checkNode(treeNode, !treeNode.checked, null, true);
		return false;
	}
	
	function onCheck(e, treeId, treeNode) {
		var zTree = $.fn.zTree.getZTreeObj(treeId),
		nodes = zTree.getCheckedNodes(true),
		v = "";
		//返回checkbox值
		for (var i=0, l=nodes.length; i<l; i++) {
			if(!nodes[i].isParent){
				v += nodes[i].name + ",";//多值用,隔开
			}
		}
		if (v.length > 0 ) v = v.substring(0, v.length-1);
		var cityObj = $("#input_"+treeId);
		cityObj.attr("value", v);
	}
	function showMenu(v) {
		var cityObj = $("#input_"+v+"_a");
		var cityOffset = $("#input_"+v+"_a").offset();
		$("#menuContent ul" ).hide();
		$("#"+v).show();
		$("#menuContent").css({left:cityOffset.left + "px", top:cityOffset.top + cityObj.outerHeight() + "px"}).slideDown("fast");

		$("body").bind("mousedown", onBodyDown);
	}
	function hideMenu() {
		$("#menuContent").fadeOut("fast");
		$("body").unbind("mousedown", onBodyDown);
	}
	function onBodyDown(event) {
		if (!(event.target.id == "menuBtn" || event.target.id == "citySel" || event.target.id == "menuContent" || $(event.target).parents("#menuContent").length>0)) {
			hideMenu();
		}
	}
	
	$(document).ready(function(){
		//初始化ztree
		$.fn.zTree.init($("#edu_type"), setting, edu_type_list);
		$.fn.zTree.init($("#learner_list"), setting, learner_list);
		$.fn.zTree.init($("#grade_list"), setting, grade_list);
		$.fn.zTree.init($("#curriculum_list"), setting, curriculum_list);
		$.fn.zTree.init($("#subject_list"), setting, subject_list);
		$.fn.zTree.init($("#textbook_list"), setting, textbook_list);
		$.fn.zTree.init($("#topic_list"), setting, topic_list);
		$.fn.zTree.init($("#type_list"), setting, type_list);
		$.fn.zTree.init($("#format_list"), setting, format_list);
	});