1.在Controller层建立跳转tree.jsp以及获取tree数据的方法：

@ApiOperation(value = "树")

@RequestMapping(value = "/tree", method = RequestMethod.GET)

public String tree(Integer parentId,ModelMap modelMap) {

modelMap.addAttribute("parentId",parentId);

return "tree.jsp";

}

@ApiOperation(value = "树")

@RequestMapping(value = "/getTree", method = RequestMethod.POST)

@ResponseBody

public Object getTree() {

return treeExampleService.getTree();

}

2.在Service层实现getTree()方法：

Service层

JSONArray getTree();

Service实现层

@Override

public JSONArray getTree() {

TreeExample example = new TreeExample();

example .createCriteria();

List list = treeExampleMapper.selectByExampleWithBLOBs(example);

for(TreeExample example: list){

JSONObject node = new JSONObject();

node.put("id", example.getId());

node.put("name", example.getName());

node.put("open", true);

node.put("parentId",example.getParentId());

jsonArray.add(node);

}

return jsonArray;

}

3.view层实现tree.jsp

tree.jsp

var superId =0;

var superName="顶级目录";

var setting = {

check: {

enable: false,

},

async: {

enable: true,

url: '${basePath}/getTree',

},

data: {

simpleData: {

enable: true,

idKey: "id", //修改默认的ID为自己的ID

pIdKey: "parentId",//修改默认父级ID为自己数据的父级ID

rootPId: 0 //根节点的ID

}

},

callback: {

onClick: function zTreeOnClick(event, treeId, treeNode) {

superId=treeNode.id;

superName=treeNode.name;

},

// 异步加载成功后

onAsyncSuccess: function zTreeOnAsyncSuccess(){

var treeObj = $.fn.zTree.getZTreeObj("ztree");

// var node1 = treeObj.getNodeByParam("orgId",$("#pid").val(), null);

// 隐藏自身节点，父节点不能为自己

// treeObj.hideNode(node1);

var node = treeObj.getNodeByParam("cateId",$("#parentId").val(), null);

treeObj.selectNode(node);//选择点

treeObj.setting.callback.onClick(null, treeObj.setting.treeId, node);//调用点击事件

}

}

};

$(document).ready(function(){

$.fn.zTree.init($("#ztree"), setting, null);

});

function exampleSubmit() {

if(superId==0){

$.confirm({

title: false,

content: '请选择！',

autoClose: 'cancel|3000',

backgroundDismiss: true,

buttons: {

cancel: {

text: '取消',

btnClass: 'waves-effect waves-button'

}

}

});

return false;

}

$("#parentId").val(superId);

$("#parentName").val(superName);

exampleDialog.close();

}

4.方法调用

使用onclick即可调用：

οnclick="exampleTree()"

function exampleTree() {

exampleDialog = $.dialog({

height:200,

animationSpeed: 300,

title: '父目录',

content: 'url:${basePath}/tree/',

});

}

5.效果图

tree结构

(图片来自网络，仅展示类似效果)

6.总结

对存在父子节点的数据进行展示的时候，可以使用树形结构呈现，效果更直观。