如何自己在JSP 页面通过AJAX实现一个TREE的功能

我们在公司或许一般都是直接使用成熟的框架，这种框架对一些常用的插件都做了封装，假如实现一个什么功能的话可能只是直接去根据API调用相关的控件 。或者有类似的案例直接copy过来。 很少去关注插件底层的相应实现，一般也不会去尝试自己集成或者研究！如何在jsp 页面自己用Ztree实现一个树的相应功能？网上相应的文章也不在少数，但是个人觉得还是有点杂乱，所以在此重新梳理自己实现了一边！

第一步： 先从Ztree 的官网（https://gitee.com/zTree/zTree_v3）下载基本控价 然后在自己的jsp 的页面引入相应的js和css文件

<script type="text/javascript" charset="utf-8" src="${ctxStatic}/ueditor/ueditor.config.js"></script>

<script type="text/javascript" charset="utf-8" src="${ctxStatic}/ueditor/ueditor.all.min.js"> </script>

<script type="text/javascript" charset="utf-8" src="${ctxStatic}/ueditor/lang/zh-cn/zh-cn.js"></script>

<link rel="stylesheet" href="${ctxStatic}/ysResource/css/demo.css" type="text/css">

<link rel="stylesheet" href="${ctxStatic}/ysResource/css/zTreeStyle/zTreeStyle.css" type="text/css">

<script type="text/javascript" src="${ctxStatic}/ysResource/js/jquery.ztree.core.js"></script>

<script type="text/javascript" charset="utf-8" src="${ctxStatic}/ueditor/ueditor.config.js"></script>
 
<script type="text/javascript" charset="utf-8" src="${ctxStatic}/ueditor/ueditor.all.min.js"> </script>
 
<script type="text/javascript" charset="utf-8" src="${ctxStatic}/ueditor/lang/zh-cn/zh-cn.js"></script>
 
<link rel="stylesheet" href="${ctxStatic}/ysResource/css/demo.css" type="text/css">
 
<link rel="stylesheet" href="${ctxStatic}/ysResource/css/zTreeStyle/zTreeStyle.css" type="text/css">
 
<script type="text/javascript" src="${ctxStatic}/ysResource/js/jquery.ztree.core.js"></script>

第二步：

Html: <div class="layui-input-inline">

<input id="frontTree" type="text" readonly value="" name="" class="layui-input""/>

<a id="menuBtn" href="#" onclick="showMenu(); return false;">选择</a>

</div>

Html: <div class="layui-input-inline">
 
<input id="frontTree" type="text" readonly value="" name="" class="layui-input""/>
 
<a id="menuBtn" href="#" onclick="showMenu(); return false;">选择</a>

第三步：

前台树：

var setting = {
			view: {
				dblClickExpand: false
			},
			data: {
				simpleData: {
					enable: true
				}
			},
			callback: {
				beforeClick: beforeClick,
				onClick: onClick
			}
		};

	
		function beforeClick(treeId, treeNode) {
			var check = (treeNode && !treeNode.isParent);
			if (!check) alert("只能选择二级分类...");
			return check;
		}
		
		function onClick(e, treeId, treeNode) {
			var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
			nodes = zTree.getSelectedNodes(),
			v = "";
			nodes.sort(function compare(a,b){return a.id-b.id;});
			for (var i=0, l=nodes.length; i<l; i++) {
				v += nodes[i].name + ",";
			}
			if (v.length > 0 ) v = v.substring(0, v.length-1);
			var cityObj = $("#frontTree");
			cityObj.attr("value", v);
		}
		 var zTree;
	     var treeNodes;
		function showMenu() {
			var cityObj = $("#frontTree");
			var cityOffset = $("#frontTree").offset();
			$("#menuContent").css({left:cityOffset.left + "px", top:cityOffset.top + cityObj.outerHeight() + "px"}).slideDown("fast");
			$("body").bind("mousedown", onBodyDown);
			var classType=$('#classType option:selected').val();
	        if(classType=="1")
	        	{
	        	  var url="${ctc}/a/categoryknowledge/tbCategoryKnowledge/treeData";
	        	}
	        if(classType=="2")
	        	{
	        	 var url="${ctc}/a/category_resource/tbCategoryResource/treeData";
	        	}
	     
 $.ajax({
    type: 'POST',
    dataType : "json",
    url: url,//请求的action路径
    success:function(data){ //请求成功后处理函数。
    treeNodes = eval(data);
    $.fn.zTree.init($("#treeDemo"), setting, treeNodes);
 }
 });

		}
		function hideMenu() {
			$("#menuContent").fadeOut("fast");
			$("body").unbind("mousedown", onBodyDown);
		}
		function onBodyDown(event) {
			if (!(event.target.id == "menuBtn" || event.target.id == "menuContent" || $(event.target).parents("#menuContent").length>0)) {
				hideMenu();
			}
		}

var setting = {
 view: {
 dblClickExpand: false
 },
 data: {
 simpleData: {
 enable: true
 }
 },
 callback: {
 beforeClick: beforeClick,
 onClick: onClick
 }
 };
 
 
 function beforeClick(treeId, treeNode) {
 var check = (treeNode && !treeNode.isParent);
 if (!check) alert("只能选择二级分类...");
 return check;
 }
 
 function onClick(e, treeId, treeNode) {
 var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
 nodes = zTree.getSelectedNodes(),
 v = "";
 nodes.sort(function compare(a,b){return a.id-b.id;});
 for (var i=0, l=nodes.length; i<l; i++) {
 v += nodes[i].name + ",";
 }
 if (v.length > 0 ) v = v.substring(0, v.length-1);
 var cityObj = $("#frontTree");
 cityObj.attr("value", v);
 }
 var zTree;
      var treeNodes;
 function showMenu() {
 var cityObj = $("#frontTree");
 var cityOffset = $("#frontTree").offset();
 $("#menuContent").css({left:cityOffset.left + "px", top:cityOffset.top + cityObj.outerHeight() + "px"}).slideDown("fast");
 $("body").bind("mousedown", onBodyDown);
 var classType=$('#classType option:selected').val();
         if(classType=="1")
          {
         	  var url="${ctc}/a/categoryknowledge/tbCategoryKnowledge/treeData";
          }
         if(classType=="2")
          {
          var url="${ctc}/a/category_resource/tbCategoryResource/treeData";
          }
      
 $.ajax({
    type: 'POST',
    dataType : "json",
    url: url,//请求的action路径
    success:function(data){ //请求成功后处理函数。
    treeNodes = eval(data);
    $.fn.zTree.init($("#treeDemo"), setting, treeNodes);
 }
 });
 
 }
 function hideMenu() {
 $("#menuContent").fadeOut("fast");
 $("body").unbind("mousedown", onBodyDown);
 }
 function onBodyDown(event) {
 if (!(event.target.id == "menuBtn" || event.target.id == "menuContent" || $(event.target).parents("#menuContent").length>0)) {
 hideMenu();
 }
 }

第四步：

后台方法：

@ResponseBody

@RequestMapping(value = "treeData")

public List<Map<String, Object>> treeData(@RequestParam(required=false) String extId, HttpServletResponse response) {

List<Map<String, Object>> mapList = Lists.newArrayList();

List<TbCategoryKnowledge> list = tbCategoryKnowledgeService.findList(new TbCategoryKnowledge());

for (int i=0; i<list.size(); i++){

TbCategoryKnowledge e = list.get(i);

if (StringUtils.isBlank(extId) || (extId!=null && !extId.equals(e.getId()) && e.getParentIds().indexOf(","+extId+",")==-1)){

Map<String, Object> map = Maps.newHashMap();

map.put("id", e.getId());

map.put("pId", e.getParentId());

map.put("name", e.getName());

mapList.add(map);

}

}

return mapList;

}


@ResponseBody
 
@RequestMapping(value = "treeData")
 
public List<Map<String, Object>> treeData(@RequestParam(required=false) String extId, HttpServletResponse response) {
 
List<Map<String, Object>> mapList = Lists.newArrayList();
 
List<TbCategoryKnowledge> list = tbCategoryKnowledgeService.findList(new TbCategoryKnowledge());
 
for (int i=0; i<list.size(); i++){
 
TbCategoryKnowledge e = list.get(i);
 
if (StringUtils.isBlank(extId) || (extId!=null && !extId.equals(e.getId()) && e.getParentIds().indexOf(","+extId+",")==-1)){
 
Map<String, Object> map = Maps.newHashMap();
 
map.put("id", e.getId());
 
map.put("pId", e.getParentId());
 
map.put("name", e.getName());
 
mapList.add(map);
 
}
 
}
 
return mapList;
 
}

效果：

结语：至于相关方法参数，自己多多看看API 就会了！
资料共享公众号:
：
原文地址：http://www.xiwenblog.com/archives/1682