最终效果图
![](http://dl.iteye.com/upload/attachment/0071/4016/3431afcf-6001-300b-9565-6fac3eed7af3.png)
环境:ztree v3.3
ztree 简单数据类型 支持ajax返回的json字符串 不需要重新设计json对象
后台数据是分层次存入redis缓存的 如下所示
![](http://dl.iteye.com/upload/attachment/0071/4014/593f5180-0e6d-3fd3-9dda-7636fed8abd4.png)
前端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();
![点击查看原始大小图片](http://dl2.iteye.com/upload/attachment/0071/4014/593f5180-0e6d-3fd3-9dda-7636fed8abd4-thumb.png)
- 大小: 20.9 KB
![点击查看原始大小图片](http://dl2.iteye.com/upload/attachment/0071/4016/3431afcf-6001-300b-9565-6fac3eed7af3-thumb.png)
- 大小: 15.8 KB
分享到:
相关推荐
关键代码都在里面 资源是工程中的一部分 暂不能运行 原来用的是Java实现Json串 考虑到频繁访问数据库 就改成了存储过程
看到网络上有许多入门ztree代码,但是一般结构不是很清晰 所以自己做了一个入门还是很不错的 SSH + ajax + json + ztree 喜欢就下载吧
本demo的目的是将多层json数据(一级分类嵌套着二级) 解析成单层,然后将键改为符合插件需要的值,不然没法显示 代码测试真实有效,就是请求的地址大家需要改一下,因为那是我的局域网地址
Ajax-v-ztree.zip,vue2的简单树,支持单个或多个(选中)选择树,并支持服务器端数据,ajax代表异步javascript和xml。它是多种web技术的集合,包括html、css、json、xml和javascript。它用于创建动态网页,其中网页的...
联系作者 350078238 ...通过 Ajax 的 JSON 方法 实现 新增 修改 删除 最后发个小广告 本人承接各种 ERP 网站 以及各种系统的开发 价格好商量,在加QQ时请注明 欢迎转载,但本人的信息请不要修改 谢谢!
支持静态 和 Ajax 异步加载节点数据 支持任意更换皮肤 / 自定义图标(依靠css) 支持极其灵活的 checkbox 或 radio 选择功能 提供多种事件响应回调 灵活的编辑(增/删/改/查)功能,可随意拖拽节点,还可以多...
支持 JSON 数据 支持静态 和 Ajax 异步加载节点数据 支持任意更换皮肤 / 自定义图标(依靠css) 支持极其灵活的 checkbox 或 radio 选择功能 提供多种事件响应回调 灵活的编辑(增/删/改/查)功能,可随意拖拽节点,...
下面介绍一下zTree 的主要功能:( 演示Demo 请访问 个人站点) 1、兼容 IE、FireFox、Chrome 等浏览器(对于IE 6.0的兼容问题将不做特殊维护) 2、在一个页面内可同时生成多个 Tree 实例 3、支持 JSON 数据 4...
•zTree v3.0 将核心代码按照功能进行了分割,不需要的代码可以不用加载 •采用了 延迟加载 技术,上万节点轻松加载,即使在 IE6 下也能基本做到秒杀 •兼容 IE、FireFox、Chrome、Opera、Safari 等浏览器 •支持 ...
JQuery-zTree 的主要功能: 1、兼容 IE、FireFox、Chrome 等浏览器 2、在一个页面内可同时生成多个 Tree 实例 3、支持 JSON 数据 4、支持一次性静态生成 和 Ajax 异步加载 两种方式 5、支持多种事件响应及...
经典树形控件,结合ajax和json技术。
使用zTree的异步刷新父级菜单时,服务器返回中文乱码,但项目中使用了SpringMvc,已经对中文乱码处理,为什么还会出现呢? 此处为的异步请求的配置: Java代码 async: { enable: true, url: basePath + '/...
* 【增加】ajax 的参数 setting.async.contentType ,让提交参数适用于 json 数据提交 (主要适用于 .Net 的开发)。 * 【增加】setting.edit.editNameSelectAll, 用于设定编辑节点名称时初次显示 input 后 text ...
支持静态 和 Ajax 异步加载节点数据 支持任意更换皮肤 / 自定义图标(依靠css) 支持极其灵活的 checkbox 或 radio 选择功能 提供多种事件响应回调 灵活的编辑(增/删/改/查)功能,可随意拖拽节点,还可以多...
3、支持 JSON 数据 4、支持一次性静态生成 和 Ajax 异步加载 两种方式 5、支持多种事件响应及反馈 6、支持 Tree 的节点移动、编辑、删除 7、支持极其灵活的 checkbox & radio 选择功能 8、支持任意更换...
3、支持 JSON 数据 4、支持一次性静态生成 和 Ajax 异步加载 两种方式 5、支持多种事件响应及反馈 6、支持 Tree 的节点移动、编辑、删除 7、支持极其灵活的 checkbox & radio 选择功能 8、支持任意更换皮肤 /...
3、支持 JSON 数据 4、支持一次性静态生成 和 Ajax 异步加载 两种方式 5、支持多种事件响应及反馈 6、支持 Tree 的节点移动、编辑、删除 7、支持极其灵活的 checkbox & radio 选择功能 8、支持任意更换...
支持静态 和 Ajax 异步加载节点数据 支持任意更换皮肤 / 自定义图标(依靠css) 支持极其灵活的 checkbox 或 radio 选择功能 提供多种事件响应回调 灵活的编辑(增/删/改/查)功能,可随意拖拽节点,还可以多节点...
zTree 简介 zTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。 zTree 是开源免费的软件(MIT 许可证)。... 支持静态 和 Ajax 异步
zTree 是利用 JQuery 的核心代码,实现一套能完成大部分常用功能的 Tree 插件 兼容 IE、FireFox、Chrome 等浏览器(对于IE 6的兼容问题将不做特殊维护) 在一个页面内可同时生成多个 Tree 实例 支持 JSON 数据 支持...