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

来源：互联网发布：mac 键位修改编辑：程序博客网时间：2024/06/16 08:17

//系统结构图

//====================简单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,getpublic 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个子节点嵌套JSONMenuEntity 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{@Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {doPost(req, resp);}@Overrideprotected 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+"'";}}}

阅读全文

0 0