Java树形菜单____Ztree树形菜单使用教程

最新推荐文章于 2024-07-30 21:12:55 发布

蜜獾互联网

最新推荐文章于 2024-07-30 21:12:55 发布

阅读量5.8k

点赞数 3

本文链接：https://blog.csdn.net/qq827245563/article/details/78687856

版权

//系统结构图

//====================简单JSON数据的单选树形菜单=====================================

<%@ page language="java" import="java.util.*" 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">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'simgleSimple.jsp' starting page</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
<link rel="stylesheet" href="jsplus/ztree/css/zTreeStyle/zTreeStyle.css" type="text/css">
	<script type="text/javascript" src="jsplus/ztree/js/jquery-1.4.4.min.js"></script>
	<script type="text/javascript" src="jsplus/ztree/js/jquery.ztree.core-3.5.js"></script>
	<script type="text/javascript" src="jsplus/ztree/js/jquery.ztree.excheck-3.5.js"></script>
  </head>
  	<SCRIPT type="text/javascript">
		var setting = {
			view: {
				showLine: true,
				selectedMulti: false
			},
			data: {  
				simpleData: {  
					enable: true  
				}  
			},
			callback: {
				onClick: zTreeOnClick
			}
		};
		 function zTreeOnClick(event, treeId, treeNode) {
	            var id=treeNode.id;
	            var name=treeNode.name;
	            var pId=treeNode.pId;
	          alert("当前节点为信息为"+id+name+pId);  
	    }
		var zNodes =[
			{ id:1, pId:0, name:"山东省",isParent:true,open:true},
				{ id:1001, pId:1, name:"青岛市"},
				{ id:1002, pId:1, name:"济南市"},
				
			{ id:2, pId:0, name:"北京"},
				{ id:2001, pId:2, name:"海淀区"}
		];

		$(document).ready(function(){
			$.fn.zTree.init($("#treeDemo"), setting, zNodes);
		});
	</SCRIPT>
  <body>
  	<div class="zTreeDemoBackground left">
		<ul id="treeDemo" class="ztree"></ul>
	</div>
  </body>
</html>

//=======================嵌套递归型JSON单选菜单

<%@ page language="java" import="java.util.*" 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">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'SingleStandard.jsp' starting page</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
<link rel="stylesheet" href="jsplus/ztree/css/zTreeStyle/zTreeStyle.css" type="text/css">
	<script type="text/javascript" src="jsplus/ztree/js/jquery-1.4.4.min.js"></script>
	<script type="text/javascript" src="jsplus/ztree/js/jquery.ztree.core-3.5.js"></script>	

	
	<SCRIPT type="text/javascript">
		var setting = {	};

		var zNodes =[
			{ 
				id:1,
				pId:1,
				name:"山东省", 
				open:true,
				isParent:true,
				children: [
							{ 
								id:1001,
								pId:1,
								name:"济南市",
								isParent:true,
								open:true,
								children: [
											{ 
												id:1001001,
												pId:1001,
												name:"历下区"
											},
								]
						    },
							{ 
						    	id:1002,
								pId:1,
						    	name:"青岛市",
						    }
					     ]
		    },
			{ 
		    	id:2,
		    	name:"河北省", 
		    	isParent:false
			}

		];

		$(document).ready(function(){
			$.fn.zTree.init($("#treeDemo"), setting, zNodes);
		});
	</SCRIPT>

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

后台json递归封装

package com.ztree.single;

import java.util.ArrayList;
import java.util.List;

/**
 * @author Administrator
 * 菜单实体类
 */
public class MenuEntity{
	//数据库字段
	private String id    ;//   varchar2(32)                            
	private String name  ;//   varchar2(30)  y                         
	private String pId;// varchar2(32)  y                         
	private String icon   ;//  varchar2(50)  y       
	
	//辅助字段
	private List<MenuEntity> children = new ArrayList<MenuEntity>();
	
	
	//封装set,get
	
	public String getId() {
		return id;
	}
	public List<MenuEntity> getChildren() {
		return children;
	}
	public void setChildren(List<MenuEntity> children) {
		this.children = children;
	}
	public void setId(String id) {
		this.id = id;
	}
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
	public String getpId() {
		return pId;
	}
	public void setpId(String pId) {
		this.pId = pId;
	}
	public String getIcon() {
		return icon;
	}
	public void setIcon(String icon) {
		this.icon = icon;
	}
	
}

package com.ztree.single;

import java.util.ArrayList;
import java.util.List;

import com.alibaba.fastjson.JSON;

public class MenuTreeUtil {
	private static String ROOT_ID = "1";

	public static List<MenuEntity>  getMenuTree(List<MenuEntity> menuList) {
		List<MenuEntity> list = groupMenuList(ROOT_ID, menuList);
		return list;
	}
//根据id和pId进行地柜
	private static List<MenuEntity> groupMenuList(String pId, List<MenuEntity> list) {
		List<MenuEntity> IteratorMenuList = new ArrayList<MenuEntity>();
		for (MenuEntity m : list) {
			if (m.getpId().equals(pId)) {
				List<MenuEntity> childMenuList = groupMenuList(m.getId(), list);
				m.setChildren(childMenuList);
				IteratorMenuList.add(m);
			}
		}
		return IteratorMenuList;
	}

	public static void main(String[] args) {
		//构造三栋济南有1个子节点嵌套JSON
		MenuEntity msd=new MenuEntity();
			msd.setId("1001");
			msd.setName("山东");	
			msd.setpId("1");
			MenuEntity jnd=new MenuEntity();
				jnd.setId("1001001");
				jnd.setName("济南");
				jnd.setpId("1001");
		MenuEntity qdd=new MenuEntity();
			qdd.setId("1002");
			qdd.setName("青岛");	
			qdd.setpId("1");

		List<MenuEntity> mlist = new ArrayList<MenuEntity>();
			mlist.add(msd);
			mlist.add(jnd);
		List<MenuEntity> treeList=getMenuTree(mlist);
		System.out.println(JSON.toJSONString(treeList));
	}
}

数据效果

//=====================================多选树形菜单

<%@ page language="java" import="java.util.*" 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">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'checkbox.jsp' starting page</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
<link rel="stylesheet" href="jsplus/ztree/css/zTreeStyle/zTreeStyle.css" type="text/css">
	<script type="text/javascript" src="jsplus/ztree/js/jquery-1.4.4.min.js"></script>
	<script type="text/javascript" src="jsplus/ztree/js/jquery.ztree.core-3.5.js"></script>
	<script type="text/javascript" src="jsplus/ztree/js/jquery.ztree.excheck-3.5.js"></script>	
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
	<SCRIPT type="text/javascript">
		var setting = {
			check: {
				enable: true
			},
			data: {
				simpleData: {
					enable: true
				}
			}
		};

		var zNodes =[
			{ id:1, pId:0, name:"山东省", open:true,checked:true},
				{ id:1001, pId:1, name:"济南市", open:true,checked:true},
					{ id:1001001, pId:1001, name:"历下区", open:true,checked:true},
				{ id:1002, pId:1, name:"青岛市"},
			{ id:2, pId:0, name:"河北省"},
				{ id:2001, pId:2, name:"石家庄", open:false},
			{ id:3, pId:0, name:"上海市"},
		];
		$(document).ready(function(){
			$.fn.zTree.init($("#treeDemo"), setting, zNodes);
			var zTree = $.fn.zTree.getZTreeObj("treeDemo");
			zTree.setting.check.chkboxType = { "Y":"ps", "N":"ps"};
			$("#py").bind("change", setCheck);
			$("#sy").bind("change", setCheck);
			$("#pn").bind("change", setCheck);
			$("#sn").bind("change", setCheck);
		});
	</SCRIPT>
  </head>
  
  <body>
  	<div class="zTreeDemoBackground left">
		<ul id="treeDemo" class="ztree"></ul>
	</div>
	
  </body>
</html>

//===================================ztree的异步数据加载事件触发才加载

<%@ page language="java" import="java.util.*" 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">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'synload.jsp' starting page</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
<link rel="stylesheet" href="jsplus/ztree/css/zTreeStyle/zTreeStyle.css" type="text/css">
	<script type="text/javascript" src="jsplus/ztree/js/jquery-1.4.4.min.js"></script>
	<script type="text/javascript" src="jsplus/ztree/js/jquery.ztree.core-3.5.js"></script>	
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
	<SCRIPT type="text/javascript">
		var setting = {
				view: {
					selectedMulti: false
				},
				data: {  
					simpleData: {  
						enable: true  
					}  
				},
				async: {
					enable: true,
					url:"${ctx}/SynServlet",
					autoParam:["id", "name", "pId"],
					otherParam:{"otherParam":"zTreeAsyncTest"}
				},
				callback: {
					onClick: zTreeOnClick
				}
		};  
        function zTreeOnClick(event, treeId, treeNode) {
            var id=treeNode.id;
            var name=treeNode.name;
            var root=treeNode.root;
        }
        var zNodes =[  
            { id:1, pId:0, name:"山东省",isParent:true,open:true},  
           		{ id:1001, pId:1, name:"济南市",isParent:false,open:true},  
           		{ id:1002, pId:1, name:"青岛",isParent:false,open:true},  
           		{ id:1003, pId:1, name:"烟台",isParent:false,open:true},  
            
           	{ id:2, pId:0, name:"河北省",isParent:true},  
            	{ id:2001, pId:2, name:"石家庄市",isParent:false},  
        ];  
  
        $(document).ready(function(){  
            $.fn.zTree.init($("#treeDemo"), setting, zNodes);  
        });  
    </SCRIPT>	
  </head>
  
  <body>
	  <div class="zTreeDemoBackground left">
			<ul id="treeDemo" class="zTree"></ul>
		</div>
  </body>
</html>

package com.ztree.syn;

import java.io.IOException;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.alibaba.fastjson.JSONArray;
import com.alibaba.fastjson.JSONObject;

/**
 * @author Administrator
 * 异步树
 */
@WebServlet("/SynServlet")
public class SynServlet extends HttpServlet{
	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		doPost(req, resp);
	}
	@Override
	protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		req.setCharacterEncoding("UTF-8");
		resp.setCharacterEncoding("UTF-8");
		//获取请求参数
		String id = req.getParameter("id");
		String name = req.getParameter("name");
		if (id == null& "".equals(id)) {
			id = "0";
			String sql="select * from table_tree where pId=0";
		}else{
			String sql="select * from table_tree where pId='"+id+"'";
		}
	}
	
}