最近项目资源分类太多 要求ajax分布加载
<a href="javascript:;" id="input_format_list_a" onclick="ztree_init('format_list');" >资源格式</a> <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。这个项目的核心目标是构建一个可复选的权限树形结构,用户通过勾选节点...
在SSH+ztree+ajax+json项目中,Ajax可能被用于异步地从服务器获取数据(例如JSON格式),然后动态地更新ZTree的节点,提供更流畅的用户体验。 JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,易于...
【dt+ztree+ajax的DEMO】是一个整合了Datatables、ZTree和Ajax技术的示例项目,旨在实现用户在ZTree中进行交互时,通过Ajax异步加载数据到Datatables表格中的功能。这个DEMO展示了如何将这三者有效地结合,以提供一...
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"} ]; ``...
3. 配置 ZTree,指定数据源(JSON 格式),并定义节点点击、展开等事件的回调函数。 4. 在回调函数中处理表格的显示和隐藏,如通过 jQuery 动态添加或移除表格行。 5. 如果需要,可以利用 Bootstrap 的表格样式来...
2. **数据封装**:将前端表单数据转化为JSON格式或其他格式,方便服务器端处理。 3. **事件监听**:绑定事件处理器,如按钮点击事件,触发Ajax请求。 4. **DOM操作**:根据服务器返回的结果,使用JavaScript更新DOM...
在提供的两个文件"struts+ztree+jquery动态生成树结构1.txt"和"struts+ztree+jquery动态生成树结构2.txt"中,很可能是分别展示了这两种方法的具体实现细节,包括Action的代码示例、前端的jQuery代码和ZTree的配置。...
【标题】"ztree+struts2+hibernate项目"是一个综合性的Web应用程序示例,它结合了多个核心技术,包括ztree、Struts2、Hibernate以及jQuery,展现了如何在实际开发中有效地整合这些工具。这个项目的核心在于利用ztree...
对于动态加载,你需要创建一个处理AJAX请求的控制器方法,该方法使用EF查询数据库,获取树形结构所需的数据,然后以JSON格式返回。 - **视图(View)**:视图是用户看到和交互的部分。在zTree的场景中,你需要创建一...
在本案例中,我们使用AJAX从服务器获取JSON格式的服务分类数据,并将其渲染到Ztree上。 ### 结合Ztree与AJAX 为了实现Ztree与AJAX的结合,首先需要配置Ztree的设置对象`setting`,然后通过AJAX请求获取数据并初始...
这可能通过Ajax请求实现,如jQuery的`$.ajax()`或`$.getJSON()`。响应数据需要设置正确的MIME类型(如`application/json`),以确保浏览器能正确解析。 5. 前端处理:前端接收到JSON数据后,调用ZTree的初始化方法...
它支持多种数据源格式,如JSON、XML,提供了丰富的配置选项和事件机制,使得在Web应用中展示层级关系数据变得简单。ztree还支持节点的增删改查、拖拽操作、多选功能,广泛应用于目录结构展示、文件管理、权限控制等...
这个“ajax获取嵌套JSON,树形控件显示”的示例主要涉及如何通过Ajax获取嵌套的JSON数据,并将其适配到ZTree的格式,以便在页面上以树形结构展示。 首先,我们需要理解JSON(JavaScript Object Notation)是一种轻...
在Java后端,我们需要创建一个处理AJAX请求的控制器,该控制器接收前端发送的请求,查询数据库获取树形结构的数据,然后以ZTree要求的JSON格式返回。例如,使用Spring MVC框架,我们可以这样做: ```java import ...
在Java项目中,我们通常会结合后台服务(如Spring MVC或Servlet)来动态生成Ztree的数据源,然后通过Ajax请求传递到前端进行渲染。 1. **Ztree的配置与使用**: Ztree的配置主要涉及JSON数据格式和HTML结构。你...
ZTree需要的数据结构通常是一个嵌套的JSON数组,表示树的层级关系。 5. 视图(View)与模板(Template): 在Django中,视图函数负责处理HTTP请求并返回响应。对于ZTree,这个响应可能是一个包含树节点数据的JSON字符串...
这些数据通常是JSON格式,包含父节点ID、子节点ID、文本等信息,便于ZTree解析。 4. **异步加载数据**:当用户展开树形菜单的某个节点时,ZTree会自动触发异步请求,调用DWR中的后台方法获取子节点数据。后台处理...
Struts2支持JSON作为其Action返回的结果类型,使得前后端的数据交换更加高效,通常用于AJAX请求。 "index.jsp调用MyTree.js完成树"这一部分说明了在项目的主入口页面`index.jsp`中,通过引用`MyTree.js`这个...
ZTree支持JSON数据格式,方便与后端进行数据交互。 2. **层级结构:** ZTree的层级结构体现在节点之间的父子关系。父节点可以有多个子节点,子节点也可以是其他节点的父节点,形成多级嵌套。这种结构在表示组织...
例如,使用JSON格式的固定数据初始化zTree可能如下: ```javascript var setting = { check: { enable: true, chkStyle: "checkbox", radioType: "all" // 或者 "level" for single selection }, data: { ...