如何自己在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>

第二步：

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">

</div>

第三步：

前台树：

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 就会了！

Post Views: 629

一	二	三	四	五	六	日
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30