ajax+json+ztree 最终版

最新推荐文章于 2021-08-05 21:25:47 发布

最新推荐文章于 2021-08-05 21:25:47 发布 · 457 阅读

文章标签：

#json #php #数据库

js 同时被 2 个专栏收录

6 篇文章

订阅专栏

ELGG 二次开发

3 篇文章

订阅专栏

本文介绍了一种使用ZTree实现分层次数据展示的方法，包括数据的AJAX加载、节点选择与操作，以及与前端交互的JS代码实现。通过后台将数据分层次存入Redis缓存，并通过特定的JSON结构返回数据，使得前端能够轻松获取并展示数据。此外，还实现了菜单显示与隐藏功能，增强了用户体验。

最终效果图

环境：ztree v3.3

ztree 简单数据类型支持ajax返回的json字符串不需要重新设计json对象

后台数据是分层次存入redis缓存的如下所示

前端js代码：

var setting = {
		//ajax 加载数据 ztree可直接使用返回的json字符串
		async: {
			enable: true,
			url:"<?php echo elgg_add_action_tokens_to_url(elgg_get_site_url().'action/ztree/getdata')?>",
			autoParam:["id"],
			//otherParam:{"lv"},
			//dataFilter: filter
		},		
		check: {
			enable: true,
			chkboxType: {"Y":"ps", "N":"ps"}
		},
		view: {
			dblClickExpand: false
		},
		data: {
			simpleData: {
				enable: true
			}
		},
		callback: {
			beforeClick: beforeClick,
			onCheck: onCheck
		}
	};
	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").position();
		$("#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();
		}
	}
	//过滤接受的json数据
	function filter(treeId, parentNode, childNodes) {
		if (!childNodes) return null;
		//alert(childNodes[0].id);
		return childNodes;
	}
	function ztree_init(v){
		switch(v){
			case 'edu_type_list':
				var treeNodes=[{id:'A',pId:'0',name:'适用教育类型', isParent:true}];
				break;
			case 'curriculum_list' :
				var treeNodes=[{id:'B',pId:'0',name:'课程标准', isParent:true}];
				break;
			case 'format_list' :
				var treeNodes=[{id:'C',pId:'0',name:'资源格式', isParent:true}];
				break;
			case 'grade_list' :
				var treeNodes=[{id:'D',pId:'0',name:'适用年龄段', isParent:true}];
				break;
			case 'learner_list' :
				var treeNodes=[{id:'E',pId:'0',name:'适用学习者', isParent:true}];	
				break;
			case 'textbook_list':
				var treeNodes=[{id:'F',pId:'0',name:'教材信息', isParent:true}];
				break;			
			case 'topic_list':
				var treeNodes=[{id:'G',pId:'0',name:'所属专题', isParent:true}];
				break;	
			case 'subject_list' :
				var treeNodes=[{id:'H',pId:'0',name:'所属学科', isParent:true}];
				break;	
			case 'type_list':
				var treeNodes=[{id:'I',pId:'0',name:'资源类型', isParent:true}];
				break;	

		}
		//初始化ztree 以及弹窗
		$.fn.zTree.init($("#"+v), setting, treeNodes);
		showMenu(v)	

	}

后台返回json代码：

<?php
/**
 *根据id 返回 资源分类 
 */

$id=get_input('id');
//获取资源分类
$type=substr($id, 0,1);
switch ($type){
	case 'A':
		$key='typeselect:edu_type_list:'.$id;
		break;
	case 'B':
		$key='typeselect:curriculum_list:'.$id;
		break;
	case 'C':
		$key='typeselect:format_list:'.$id;
		break;
	case 'D':
		$key='typeselect:grade_list:'.$id;
		break;
	case 'E':
		$key='typeselect:learner_list:'.$id;
		break;
	case 'F':
		$key='typeselect:textbook_list:'.$id;
		break;
	case 'G':
		$key='typeselect:topic_list:'.$id;
		break;
	case 'H':
		$key='typeselect:subject_list:'.$id;
		break;
	case 'I':
		$key='typeselect:type_list:'.$id;
		break;							
	
}
//返回 json数据
$info=redis_get_cache_content($key);
echo $info;
exit();