1.在Controller層建立跳轉(zhuǎn)tree.jsp以及獲取tree數(shù)據(jù)的方法：

@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層實(shí)現(xiàn)getTree()方法：

Service層

JSONArray getTree();

Service實(shí)現(xiàn)層

@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層實(shí)現(xiàn)tree.jsp

tree.jsp

保存

取消

var superId =0;

var superName="頂級(jí)目錄";

var setting = {

check: {

enable: false,

},

async: {

enable: true,

url: '${basePath}/getTree',

},

data: {

simpleData: {

enable: true,

idKey: "id", //修改默認(rèn)的ID為自己的ID

pIdKey: "parentId",//修改默認(rèn)父級(jí)ID為自己數(shù)據(jù)的父級(jí)ID

rootPId: 0 //根節(jié)點(diǎn)的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);

// 隱藏自身節(jié)點(diǎn)，父節(jié)點(diǎn)不能為自己

// treeObj.hideNode(node1);

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

treeObj.selectNode(node);//選擇點(diǎn)

treeObj.setting.callback.onClick(null, treeObj.setting.treeId, node);//調(diào)用點(diǎn)擊事件

}

}

};

$(document).ready(function(){

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

});

function exampleSubmit() {

if(superId==0){

$.confirm({

title: false,

content: '請(qǐng)選擇！',

autoClose: 'cancel|3000',

backgroundDismiss: true,

buttons: {

cancel: {

text: '取消',

btnClass: 'waves-effect waves-button'

}

}

});

return false;

}

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

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

exampleDialog.close();

}

4.方法調(diào)用

使用onclick即可調(diào)用：

οnclick="exampleTree()"

function exampleTree() {

exampleDialog = $.dialog({

height:200,

animationSpeed: 300,

title: '父目錄',

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

});

}

5.效果圖

tree結(jié)構(gòu)

(圖片來自網(wǎng)絡(luò)，僅展示類似效果)

6.總結(jié)

對(duì)存在父子節(jié)點(diǎn)的數(shù)據(jù)進(jìn)行展示的時(shí)候，可以使用樹形結(jié)構(gòu)呈現(xiàn)，效果更直觀。

超強(qiáng)干貨來襲 云風(fēng)專訪：近40年碼齡，通宵達(dá)旦的技術(shù)人生

總結(jié)

以上是生活随笔為你收集整理的分级显示HTML,SSM框架下，以tree结构分级显示数据的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。