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

缺乏、安全感 2022-06-04 02:17 426阅读 0赞

//系统结构图

![Center][]

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

![Center 1][]

<%@ 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单选菜单

![Center 2][]

<%@ 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));
    	}
    }

数据效果

![Center 3][]

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

![Center 4][]

<%@ 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>	
    	
    	<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的异步数据加载 事件触发才加载

![Center 5][]

<%@ 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>	
    	
    	<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+"'";
    		}
    	}
    	
    }

[Center]: /images/20220604/2ac7b0b3692a4e769fcbc85f5075a320.png
[Center 1]: /images/20220604/1c808e7dfca64fd09f3b3b9e859b9374.png
[Center 2]: /images/20220604/8c05a429f3b543d08e69007e1cfc2de6.png
[Center 3]: /images/20220604/403f5b419c6449d08a8d127057cd9beb.png
[Center 4]: /images/20220604/bad6b83677a94475b9dc484fe24d4831.png
[Center 5]: /images/20220604/2cbadd29392d476793314a55a5bf64c7.png