`
gegewu0825
  • 浏览: 47548 次
社区版块
存档分类
最新评论

ajax+json+ztree

    博客分类:
  • js
阅读更多

最近项目资源分类太多 要求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();
分享到:
评论

相关推荐

    ZTree+Struts2+ajax+json实现checkbox权限树

    【标题】"ZTree+Struts2+ajax+json实现checkbox权限树"涉及的技术栈主要集中在前端的ZTree,后端的Struts2框架,以及数据交互中的Ajax和JSON。这个项目的核心目标是构建一个可复选的权限树形结构,用户通过勾选节点...

    SSH+ztree+ajax+json

    在SSH+ztree+ajax+json项目中,Ajax可能被用于异步地从服务器获取数据(例如JSON格式),然后动态地更新ZTree的节点,提供更流畅的用户体验。 JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,易于...

    dt+ztree+ajax的DEMO

    【dt+ztree+ajax的DEMO】是一个整合了Datatables、ZTree和Ajax技术的示例项目,旨在实现用户在ZTree中进行交互时,通过Ajax异步加载数据到Datatables表格中的功能。这个DEMO展示了如何将这三者有效地结合,以提供一...

    ajax+zTree 文件树

    3. **创建节点**:zTree的节点数据通常以JSON格式存储。例如: ```javascript var nodes = [ { id:1, pId:0, name:"父节点1"}, { id:11, pId:1, name:"子节点1-1"}, { id:12, pId:1, name:"子节点1-2"} ]; ``...

    bootstrap+ztree+table

    3. 配置 ZTree,指定数据源(JSON 格式),并定义节点点击、展开等事件的回调函数。 4. 在回调函数中处理表格的显示和隐藏,如通过 jQuery 动态添加或移除表格行。 5. 如果需要,可以利用 Bootstrap 的表格样式来...

    ajax+asp修改新增都在一个页上小小实例

    2. **数据封装**:将前端表单数据转化为JSON格式或其他格式,方便服务器端处理。 3. **事件监听**:绑定事件处理器,如按钮点击事件,触发Ajax请求。 4. **DOM操作**:根据服务器返回的结果,使用JavaScript更新DOM...

    struts2.0+ztree+jquery动态生成树结构

    在提供的两个文件"struts+ztree+jquery动态生成树结构1.txt"和"struts+ztree+jquery动态生成树结构2.txt"中,很可能是分别展示了这两种方法的具体实现细节,包括Action的代码示例、前端的jQuery代码和ZTree的配置。...

    ztree+struts2+hibernate项目

    【标题】"ztree+struts2+hibernate项目"是一个综合性的Web应用程序示例,它结合了多个核心技术,包括ztree、Struts2、Hibernate以及jQuery,展现了如何在实际开发中有效地整合这些工具。这个项目的核心在于利用ztree...

    EF+MVC3+zTree动态加载

    对于动态加载,你需要创建一个处理AJAX请求的控制器方法,该方法使用EF查询数据库,获取树形结构所需的数据,然后以JSON格式返回。 - **视图(View)**:视图是用户看到和交互的部分。在zTree的场景中,你需要创建一...

    Ztree操作 AJAX

    在本案例中,我们使用AJAX从服务器获取JSON格式的服务分类数据,并将其渲染到Ztree上。 ### 结合Ztree与AJAX 为了实现Ztree与AJAX的结合,首先需要配置Ztree的设置对象`setting`,然后通过AJAX请求获取数据并初始...

    Ztree后台拼接Json

    这可能通过Ajax请求实现,如jQuery的`$.ajax()`或`$.getJSON()`。响应数据需要设置正确的MIME类型(如`application/json`),以确保浏览器能正确解析。 5. 前端处理:前端接收到JSON数据后,调用ZTree的初始化方法...

    Jquery+BootStrap+ztree+jqgrid所需js和css文件

    它支持多种数据源格式,如JSON、XML,提供了丰富的配置选项和事件机制,使得在Web应用中展示层级关系数据变得简单。ztree还支持节点的增删改查、拖拽操作、多选功能,广泛应用于目录结构展示、文件管理、权限控制等...

    ajax获取嵌套JSON,树形控件显示

    这个“ajax获取嵌套JSON,树形控件显示”的示例主要涉及如何通过Ajax获取嵌套的JSON数据,并将其适配到ZTree的格式,以便在页面上以树形结构展示。 首先,我们需要理解JSON(JavaScript Object Notation)是一种轻...

    ztree实现AJAX树状结构-JAVA实现

    在Java后端,我们需要创建一个处理AJAX请求的控制器,该控制器接收前端发送的请求,查询数据库获取树形结构的数据,然后以ZTree要求的JSON格式返回。例如,使用Spring MVC框架,我们可以这样做: ```java import ...

    Ztree+treeTable实现 Java实现 树形菜单 树形表格

    在Java项目中,我们通常会结合后台服务(如Spring MVC或Servlet)来动态生成Ztree的数据源,然后通过Ajax请求传递到前端进行渲染。 1. **Ztree的配置与使用**: Ztree的配置主要涉及JSON数据格式和HTML结构。你...

    Django引用ztree实现数据库表导入树状目录

    ZTree需要的数据结构通常是一个嵌套的JSON数组,表示树的层级关系。 5. 视图(View)与模板(Template): 在Django中,视图函数负责处理HTTP请求并返回响应。对于ZTree,这个响应可能是一个包含树节点数据的JSON字符串...

    ztree+dwr实现的异步加载树形菜单

    这些数据通常是JSON格式,包含父节点ID、子节点ID、文本等信息,便于ZTree解析。 4. **异步加载数据**:当用户展开树形菜单的某个节点时,ZTree会自动触发异步请求,调用DWR中的后台方法获取子节点数据。后台处理...

    ztree3.1+struts2

    Struts2支持JSON作为其Action返回的结果类型,使得前后端的数据交换更加高效,通常用于AJAX请求。 "index.jsp调用MyTree.js完成树"这一部分说明了在项目的主入口页面`index.jsp`中,通过引用`MyTree.js`这个...

    ztree带层级穿梭框

    ZTree支持JSON数据格式,方便与后端进行数据交互。 2. **层级结构:** ZTree的层级结构体现在节点之间的父子关系。父节点可以有多个子节点,子节点也可以是其他节点的父节点,形成多级嵌套。这种结构在表示组织...

    结合ztree的下拉框树形结构数据多选,单选

    例如,使用JSON格式的固定数据初始化zTree可能如下: ```javascript var setting = { check: { enable: true, chkStyle: "checkbox", radioType: "all" // 或者 "level" for single selection }, data: { ...

Global site tag (gtag.js) - Google Analytics