使用 zTree 异步加载

使用场景

可能需要展示类别很多，如果采用直接加载的方式，需要展示的数据量过大，交互十分不友好。所以采用 zTree 异步加载数据。

demo 环境

SpringBoot 1.5.9.RELEASE ， 使用 jsp

war

org.springframework.boot

spring-boot-starter-parent

1.5.9.RELEASE

org.projectlombok

lombok

true

org.springframework.boot

spring-boot-starter-test

test

org.springframework.boot

spring-boot-starter-web

org.springframework.boot

spring-boot-starter-tomcat

org.apache.tomcat

tomcat-servlet-api

8.5.28

provided

javax.servlet

javax.servlet-api

org.apache.tomcat.embed

tomcat-embed-jasper

javax.servlet

jstl

导入 zTree 所需的 css 和 js ，导入到 resources/static 下

jsp 代码

Created by IntelliJ IDEA.

User: lvhaosir

Date: 2018/12/12

Time: 8:52

To change this template use File | Settings | File Templates.

--%>

String path = request.getContextPath();

String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()

+ path + "/";

%>

index

var basePath = '';

Ztree异步加载使用例子

var setting = {

async: {

enable: true,

url: basePath + "ztree/asyncGetNodes",

autoParam:["id"],

dataFilter: filter

},

data:{

simpleData:{

enable: true,

idKey:'id',

pIdKey:'pid',

rootPId: 0

}

},

view:{

showIcon: false

}

};

$(document).ready(function(){

initZTree();

});

function filter(treeId, parentNode, childNodes) {

return childNodes;

}

//初始化树

function initZTree(){

$.ajax({

url:basePath + "ztree/getNodes",

type:"post",

dataType: "json",

success: function(data){

console.log(data);

var zTreeObj = $.fn.zTree.init($("#zTree"),setting, data);

//让第一个父节点展开

var rootNode_0 = zTreeObj.getNodeByParam('pid',0,null);

zTreeObj.expandNode(rootNode_0, true, false, false, false);

},

error: function(){

}

});

}

Java 代码

model

package cn.lvhaosir.ztree.model;

import lombok.AllArgsConstructor;

import lombok.Data;

/**

* @Author: lvhaosir

* @Date: 2018/12/12 9:09

* @Version 1.0

*/

@Data

@AllArgsConstructor

public class Node {

private String id;

/**

* 父节点 id

*/

private String pid;

private String name;

/**

* 是否展开

*/

private String open;

/**

* 是否为父节点(下面是否还有分类)

*/

private String isParent;

}

controller

​PageController

package cn.lvhaosir.ztree.controller;

import org.springframework.stereotype.Controller;

import org.springframework.web.bind.annotation.PathVariable;

import org.springframework.web.bind.annotation.RequestMapping;

/**

* @Author: lvhaosir

* @Date: 2018/12/12 8:50

* @Version 1.0

*/

@Controller

@RequestMapping("/page")

public class PageController {

/**

* 跳转界面

* @return

*/

@RequestMapping(value="/{filename}")

public String toPage(@PathVariable(value="filename") String filename){

System.out.println("filename:"+filename);

return filename;

}

/**

* 跳转界面

* @return

*/

@RequestMapping(value="/{folder}/{filename}")

public String toPage(@PathVariable(value="folder") String folder,@PathVariable(value="filename") String filename){

System.out.println("folder:"+folder +" filename:"+filename);

return folder+"/"+filename;

}

}

ZtreeController

package cn.lvhaosir.ztree.controller;

import cn.lvhaosir.ztree.model.Node;

import org.springframework.stereotype.Controller;

import org.springframework.web.bind.annotation.RequestBody;

import org.springframework.web.bind.annotation.RequestMapping;

import org.springframework.web.bind.annotation.ResponseBody;

import java.util.ArrayList;

import java.util.List;

/**

* @Author: lvhaosir

* @Date: 2018/12/12 9:10

* @Version 1.0

*/

@Controller

@RequestMapping("/ztree")

public class ZtreeController {

@RequestMapping("/getNodes")

@ResponseBody

public List getNodes() {

List nodeList = new ArrayList();

nodeList.add(new Node("1","0","一级菜单1","false","true"));

nodeList.add(new Node("10","1","二级菜单1","false","true"));

nodeList.add(new Node("11","1","二级菜单2","false","true"));

nodeList.add(new Node("12","1","二级菜单3","false","true"));

nodeList.add(new Node("2","0","一级菜单2","false","true"));

nodeList.add(new Node("20","2","二级菜单21","false","true"));

nodeList.add(new Node("21","2","二级菜单22","false","true"));

nodeList.add(new Node("22","2","二级菜单23","false","true"));

return nodeList;

}

@RequestMapping("/asyncGetNodes")

@ResponseBody

public List asyncGetNodes(String id) throws InterruptedException {

List nodeList = new ArrayList();

if("10".equals(id)){

nodeList.add(new Node("100",id,"三级菜单1","false","true"));

nodeList.add(new Node("101",id,"三级菜单2","false","false"));

} else if ("11".equals(id)) {

nodeList.add(new Node("102",id,"三级菜单21","false","false"));

nodeList.add(new Node("103",id,"三级菜单22","false","true"));

} else if ("12".equals(id)) {

nodeList.add(new Node("104",id,"三级菜单31","false","false"));

nodeList.add(new Node("105",id,"三级菜单32","false","false"));

}

Thread.sleep(2000);

return nodeList;

}

}

菜单树就能正确展示出来了。

实际使用场景

在我们实际的场景应该是，有一个根据菜单父 id 查询菜单的接口，页面首先进去加载顶级菜单，一般也就是 pid=0 的菜单，然后点击节点，传递该节点的 id 异步向后台查询子菜单来进行异步加载。