黑马程序员技术交流社区

标题: 【济南中心】Ztree树的简单 [打印本页]

作者: 大山哥哥 时间: 2017-3-30 20:25
标题: 【济南中心】Ztree树的简单
zTree的使用总结
1. copy ztree的js和css

2.在需要ztree树的页面上引入以下文件
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>ztree</title>
<link rel="stylesheet" href="${pageContext.request.contextPath}/zTree/css/zTreeStyle/zTreeStyle.css" type="text/css">
<link rel="stylesheet" href="${pageContext.request.contextPath}/zTree/css/demo.css" type="text/css">
<script type="text/javascript" src="${pageContext.request.contextPath}/zTree/js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/zTree/js/jquery.ztree.core-3.5.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/zTree/js/jquery.ztree.excheck-3.5.js"></script>
<script type="text/javascript">
var setting = {
check: {
enable: true
},
data: {
simpleData: {
enable: true
}
}
};
var zNodes=null;
$().ready(function() {
$.ajax( {
url : "${pageContext.request.contextPath}/ztree_getDate",
type : "get",
dataType : "text",
success : function(data){
zNodes=eval("("+data+")");
zTree=$.fn.zTree.init($("#treeDemo"), setting, zNodes);
//展开所有的节点!
zTree.expandAll(true);
}
});
});
var zTree=null;
function formSubmit() {
//获取被选中的节点!
var nodes=zTree.getCheckedNodes(true);
var ids="";
for (var i = 0; i < nodes.length; i++) {
ids+=nodes[i].id+",";
}
$("#ids").val(ids);
return true;
}
</script>
</head>
<body>//树的位置!
<ul id="treeDemo" class="ztree"></ul>
<form action="${pageContext.request.contextPath}/ztree_saveDate.action" onsubmit="formSubmit()" method="post">
<input type="hidden" id="ids" name="ids">
<input type="submit" value="测试">
</form>
</body>
</html>
2.1取出数据的方法!
public void getDate() throws Exception {
StringBuilder sb=new StringBuilder();
sb.append("[");//{id:"",pId:"",name:"",checked:""}
sb.append("{id:1,pId:0,name:\"腾飞国际有限公司\",checked:\"true\"}").append(",");
sb.append("{id:2,pId:1,name:\"秘书部\",checked:\"true\"}").append(",");
sb.append("{id:5,pId:2,name:\"潘金莲\",checked:\"false\"}").append(",");
sb.append("{id:6,pId:2,name:\"李洁\",checked:\"false\"}").append(",");
sb.append("{id:7,pId:2,name:\"小泽阿姨\",checked:\"false\"}").append(",");
sb.append("{id:3,pId:1,name:\"财政部\",checked:\"false\"}").append(",");
sb.append("{id:8,pId:3,name:\"强豪\",checked:\"false\"}").append(",");
sb.append("{id:9,pId:3,name:\"周强\",checked:\"false\"}").append(",");
sb.append("{id:10,pId:3,name:\"严超威\",checked:\"false\"}").append(",");
sb.append("{id:4,pId:1,name:\"行政部\",checked:\"false\"}");
sb.append("]");
HttpServletResponse response = ServletActionContext.getResponse();
response.setContentType("test/json;charset=UTF-8");
response.setHeader("Cache-Control", "no-cache");
response.getWriter().write(sb.toString());
}
2.2提交选中的id
private String ids;
public void setIds(String ids) {
this.ids = ids;
}
public void saveDate() throws Exception {
System.out.println(ids);
}

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2