spring+srpingmvc+hibernate实现动态实现动态ztree生成树状图效果生成树状图效果
主要介绍了spring+srpingmvc+hibernate动态ztree生成树状图效果,本文通过实例代码给大家介绍的非常详细,
具有一定的参考借鉴价值,需要的朋友可以参考下
ztree生成树状图
ztree官网
前台
导入js和css包
下载地址
前端页面 ztree.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" pageEncoding="UTF-8" isELIgnored="false" %>
<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE>ztree</TITLE>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="${pageContext.request.contextPath}/Css/demo.css" type="text/css">
<link rel="stylesheet" href="${pageContext.request.contextPath}/Css/zTreeStyle/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="${pageContext.request.contextPath}/Js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/Js/jquery.ztree.core-3.5.js"></script>
<SCRIPT type="text/javascript">
//初始化
var setting = {
data: {
simpleData: {
enable: true
}
},
callback: {
beforeClick: beforeClick
}
};
//数据集
var zNodes =[
//根据这种格式生成树状图
// {id:1, pId:0, name:"河北省"},
// {id:12, pId:1, name:"石家庄"},
// {id:13, pId:1, name:"邢台"},
// {id:14, pId:1, name:"邯郸"},
// {id:2, pId:0, name:"北京市"},
// {id:22, pId:2, name:"海淀区"},
// {id:23, pId:2, name:"朝阳区"},
// {id:24, pId:2, name:"长安区"}
];
//点击后的操作
function beforeClick(treeId, treeNode, clickFlag) {
//获取父窗口中id为Text1
var parentControl=parent.document.getElementById("Text1");
//把值设置为treeNode.name;
parentControl.value=treeNode.name;
}
//访问控制层,获取数据。
$(document).ready(function(){
var url="${pageContext.request.contextPath}/menu/findZtree";
$.getJSON(url,{},function(nodes){
//alert(nodes);
console.log(JSON.stringify(nodes));
zNodes=nodes;
评论0
最新资源