最终效果图
环境: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();