zTree实现异步加载数据(使用SPRING MVC4+mybatis3.8)

本文主要是介绍zTree实现异步加载数据(使用SPRING MVC4+mybatis3.8)，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

1.先看效果
图一初始化状态
这里写图片描述

图二点击根节点(凯顿儿童美语ERP信息系统)自动加载第一层子节点(登录、注册等子节点)
这里写图片描述

图三点击登录子节点会自动加载第三层子节点
这里写图片描述

2.代码
创建一个html文件interfaceManager.html，引入相关js文件，css文件

<link rel="stylesheet" href="../css/zTreeStyle/zTreeStyle.css"type="text/css">
<script src="../js/jquery-ui-1.11.4/jquery.js"></script>
<!-- 
<script type="text/javascript" src="js/ztree/jquery.ztree.all-3.5.js"></script> -->
<script type="text/javascript"src="../js/ztree/jquery.ztree.core-3.5.js"></script>
<script type="text/javascript"src="../js/ztree/jquery.ztree.excheck-3.5.js"></script>
<script type="text/javascript"src="../js/ztree/jquery.ztree.exedit-3.5.js"></script>
<script type="text/javascript" src="../js/interface/interfaceManager.js"></script>

然后在interfaceManager.html文件中定义一个div代码如下

<div id="menuTree"style="width: 200px; border: 1px solid #f6a828; float: left;"><ul id="tree" class="ztree" style="width: 260px; overflow: auto;"></ul></div>

然后初始化zTree 代码在interfaceManager.js文件中代码如下

$(document).ready(function() {
var setting = {async : {enable : true,//是否异步加载url : '../interface/getTreeNodes.do',//加载数据的urldata : {simpleData : {enable : true,idKey : "id",pIdKey : "parentTid",rootPId : '0'}},autoParam : [ "id"],//异步发送请求时,表示自动传指定属性的参数值dataFilter : function(treeId, parentNode, childNodes) {//这里由于本人设置的节点属性跟zTree不一致所以进行了过滤if (!childNodes)return null;for (var i = 0, l = childNodes.length; i < l; i++) {childNodes[i].count = childNodes[i].childrenCount;if (childNodes[i].count && parseInt(childNodes[i].count) > 0) {//当主节点  下面还有父节点时自动将isParent=true//这样点击父节点zTree会自动再加载其子节点的数据childNodes[i].isParent = true;}childNodes[i].type = header_type;}return childNodes;}},callback : {beforeClick : beforeClick}
};
});

function beforeClick(treeId, treeNode) {// 表示若没有子节点父节点不再加载if (!treeNode.parent) {return false;} else {return true;}
}

初始化zTree
$.fn.zTree.init($("#tree"), setting, [ {'id' : '0',"name" : '凯顿儿童美语ERP信息系统','type' : 1,'isParent' : true} ]);

后台实现
先定义一个model类

/*** kd_develop_interface.id (id)* * @ibatorgenerated 2016-01-11 13:48:05*/private String id;/*** kd_develop_interface.parent_tId (父节点id)* * @ibatorgenerated 2016-01-11 13:48:05*/private String parentTid;/*** kd_develop_interface.name (节点名称/接口描述)* * @ibatorgenerated 2016-01-11 13:48:05*/private String name;

Controller类@Controller
@RequestMapping("/interface")
public class InterfaceInfoController {@Autowiredprivate InterfaceInfoService interfaceInfoService;@RequestMapping("/getTreeNodes")@ResponseBodypublic List<TreeNode> getTreeNodes(@RequestParam("id") String parentId) {try {return interfaceInfoService.getTreeNodes(parentId);} catch (Exception e) {e.printStackTrace();}return null;}}

@Component
public class InterfaceInfoService {@Autowiredprivate KdDevelopInterfaceDao kdDevelopInterfaceDao;public List<TreeNode> getTreeNodes(String parentId) {Map<String, Object> params = new HashMap<String, Object>();params.put("parentId", parentId);List<TreeNode> treeNodes = kdDevelopInterfaceDao.getTreeNodes(params);if (treeNodes != null) {TreeNode treeNode = null;for (int i = 0; i < treeNodes.size(); i++) {treeNode = treeNodes.get(i);if (null != treeNode.getChildrenCount() && treeNode.getChildrenCount() > 0) {treeNode.setParent(true);}}}return treeNodes;}}

sql

<select id="getTreeNodes" resultMap="TreeNodesMap" parameterType="map">SELECT di.id,di.`name`,di.parent_tId,children_Count from kd_develop_interface di   where di.parent_tId=#{父节点}  order by id asc
</select>

后期上传源码

这篇关于zTree实现异步加载数据(使用SPRING MVC4+mybatis3.8)的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！