ajax+json+ztree

最新推荐文章于 2020-12-24 22:02:00 发布

最新推荐文章于 2020-12-24 22:02:00 发布 · 234 阅读

文章标签：

#json ztree ajax

js 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了一个使用AJAX技术实现资源格式分类动态加载的方法。通过点击资源格式链接触发AJAX请求，从后端获取JSON格式的数据，并利用zTree插件进行节点渲染。实现了资源格式的多选功能并将选择结果回显。

最近项目资源分类太多要求ajax分布加载

<a href="javascript:;"  id="input_format_list_a" onclick="ztree_init('format_list');" >资源格式</a>&nbsp;<input id="input_format_list" type="hidden" name="category['format_list']" readonly value="" style="width:120px;"  />
 <div id="menuContent" style="display:none; position: absolute;z-index: 9999">
                                <ul id="edu_type" class="ztree"></ul>

var setting = {
		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();
		}
	}
	function Node(id,pid,name){
		this.id=id;
		this.pId=pid;
		this.name=name;
								
	}

	function ztree_init(v){
		//从后台读取数据				
		var treeNodes=new Array();		
		$.ajax({
				url: '<?php echo elgg_add_action_tokens_to_url(elgg_get_site_url().'action/ztree/getdata')?>',
				type:'post',
				data:{id:v},
				async: false , 
				success: function(data){
					if(data=='error'){
							return false;
						}				
					var msg = eval('(' + data + ')');
					$.each(msg,function(i,item){
						treeNodes.push(new Node(item.id,item.pId,item.name));
					});
					//alert(treeNodes[0].pId);
					//初始化ztree
					$.fn.zTree.init($("#"+v), setting, treeNodes);
					showMenu(v)	
			 	}
			})
		
		

	}

后台返回json数据

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

$id=get_input('id');
if(empty($id)){
	echo 'error';
	exit;
}
$output=redis_get_cache_content("typeselect:$id");
$output=!empty($output)?$output:'error';	
echo $output;
exit();