您的位置：首页 > 编程语言 > Java开发

新手ztree结合springmvc 入门生成动态树

2017-04-20 00:00 330 查看

这个是异步加载数据先看效果图

这里先看数据库

直接上代码

<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<base href="<%=basePath%>">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>
<link rel="stylesheet" href="static/css/zTreeStyle/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="static/js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="static/js/jquery.ztree.core.js"></script>
<script type="text/javascript" src="static/js/jquery.ztree.exedit.js"></script>
<SCRIPT type="text/javascript">
var setting = {
view: {
addHoverDom: addHoverDom,
removeHoverDom: removeHoverDom,
selectedMulti: false
},
async: {
enable: true,
url: "tree/getTreeDate",
autoParam: ["id"]
},
edit: {
enable: true,
editNameSelectAll: true,
showRemoveBtn: showRemoveBtn,
showRenameBtn: showRenameBtn
},
data: {
simpleData: {
enable: true,
idKey:"id",
pIdKey:"pId",
rootPId:0
}
},
callback: {
onAsyncSuccess : function(event, treeId, treeNode, msg){
},
beforeDrag: beforeDrag,
beforeEditName: beforeEditName,
beforeRemove: beforeRemove,
beforeRename: beforeRename,
onClick: zTreeOnClick
}
};
var  zNodes =[];//树节点，json格式，异步加载可设置为null或[]
var zTreeObj;//树对象

//拖拽之前
function beforeDrag(treeId, treeNodes) {
return false;
}
//编辑之前
function beforeEditName(treeId, treeNode) {
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
zTree.selectNode(treeNode);
setTimeout(function() {
if (confirm("进入节点 -- " + treeNode.name + " 的编辑状态吗？")) {
setTimeout(function() {
zTree.editName(treeNode);
}, 0);
}
}, 0);
return false;
}
//删除之前
function beforeRemove(treeId, treeNode) {
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
zTree.selectNode(treeNode);
return confirm("确认删除 节点 -- " + treeNode.name + " 吗？");
}

//改名之前
function beforeRename(treeId, treeNode, newName, isCancel) {
if (newName.length == 0) {
setTimeout(function() {
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
zTree.cancelEditName();
alert("节点名称不能为空.");
}, 0);
return false;
}
return true;
}

//显示删除按钮
function showRemoveBtn(treeId, treeNode) {

return !treeNode.isFirstNode;
}
//显示修改按钮
function showRenameBtn(treeId, treeNode) {

return true;
}

var newCount = 1;
//鼠标移动显示控件
function addHoverDom(treeId, treeNode) {
//显示增加按钮
var sObj = $("#" + treeNode.tId + "_span");
if (treeNode.editNameFlag || $("#addBtn_"+treeNode.tId).length>0) return;
var addStr = "<span class='button add' id='addBtn_" + treeNode.tId
+ "' title='add node' onfocus='this.blur();'></span>";
sObj.after(addStr);
//增加按钮点击
var btn = $("#addBtn_"+treeNode.tId);
if (btn) btn.bind("click", function(){
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
zTree.addNodes(treeNode, {id:(100 + newCount), pId:treeNode.id, name:"我的文件夹" + (newCount++)});
return false;
});
};
//隐藏增加按钮
function removeHoverDom(treeId, treeNode) {
$("#addBtn_"+treeNode.tId).unbind().remove();
};
//节点点击
function zTreeOnClick(event, treeId, treeNode) {
//调用父类页面
window.parent.fuzhi(treeNode.name);
//
//alert(treeNode.tId + ", " + treeNode.name);
};
//初始化
$(document).ready(function(){

$.fn.zTree.init($("#treeDemo"), setting,zNodes);
});
</SCRIPT>
<style type="text/css">
.ztree li span.button.add {margin-left:2px; margin-right: -1px; background-position:-144px 0; vertical-align:top; *vertical-align:middle}
</style>
</head>

<body>
<div class="zTreeDemoBackground left">
<ul id="treeDemo" class="ztree"></ul>
</div>
</body>
</html>

后端代码

@RequestMapping("getTreeDate")
@ResponseBody
public List<Tree> getTreeDate(@RequestParam(defaultValue="0")int  id){

List<Tree> list=service.getTree(id);

/*
List<Map<String, Object>> list=new ArrayList<Map<String, Object>>();
Map<String, Object> map=new HashMap<String, Object>();
Map<String, Object> map1=new HashMap<String, Object>();

map1.put("id", "1");
map1.put("pId", "0");
map1.put("name", "我的文件夹");
map1.put("isParent", "true");

map.put("id", "2");
map.put("pId", "0");
map.put("isParent", true);
map.put("name", "我的文件夹1");

list.add(map);

list.add(map1);*/

return list;
}

上了代码估计都知道怎么做了不过这里来解释下几个地方：

这个 autoParame 是传值给后台的，这个值时id 也可以时pId 没点击一次都会去查询父节点下的子节点

根据这个id 来检索所有的子节点。

但是第一次检索怎么办？

这里有设置默认值。第一个父节点可以自己设置好。我这里是0

这样检索就完成了。

其他的上面都有注释应该都能看懂。

这里没有涉及到权限这一块。只是简单的异步加载树。

如果有什么不懂的也可以直接评论。我会回复的。刚接触使用这个ztree 请指点。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： java ztree

相关文章推荐

新的分享

章节导航