`
moonbeans
  • 浏览: 1894 次
  • 性别: Icon_minigender_2
  • 来自: 北京
文章分类
社区版块
存档分类
最新评论

Ztree树结构的例子

    博客分类:
  • java
 
阅读更多

这是我写的第一篇文章,就当记录一下这周在高人指点下所学一二。

首先要引入css样式的文件,其次需要引入js文件。分别如图所示。

在jsp页面中:

    1)依次引入

       <script type="text/javascript" src="<%=basePath%>js/jquery.js"></script>
	<link rel="stylesheet" href="<%=basePath%>css/zTreeStyle/zTreeStyle.css" type="text/css">
	<script type="text/javascript" src="<%=basePath%>js/jquery.ztree.core-3.5.js"></script>
	<script type="text/javascript" src="<%=basePath%>js/jquery.ztree.excheck-3.5.js"></script>
	<script type="text/javascript" src="<%=basePath%>js/jquery.ztree.exedit-3.5.js"></script>
	<script type="text/javascript" src="<%=basePath%>js/TreeNode.js"></script>

  2)初始化函数

<script language="javascript" type="text/javascript">
	$(document).ready(function(){
		var setting = {
				check : {
					enable : false
				},
				data : 
				    {
					simpleData : {
						enable : true
					}
				},
				callback : {
					//树节点点击事件注册:
					//onClick : zTreeOnClick
				},
				view : {
					showLine : true
				}
			};
			
			var mediaZTree;
    	
		$.ajax({
			url : encodeURI("<%=basePath%>ztree/doztree.action"),
			type : "POST",
			dataType : "json",//必须加这个
			contentType : "application/json;charset=utf-8",
			success : function(data)
		    {
		    //ztree的初始化init的方法
			mediaZTree = $.fn.zTree.init($("#treeDemo"), setting, data.root);
			}
		});
		});
	</script>

 

3)

 <div class="content_wrap1">
		<div class="zTreeDemoBackground left">
			<ul id="treeDemo" class="ztree" ></ul>
		</div>
	</div>

 在controller包中的ZtreeController类中:

package com.summer.controller;

@Controller

@RequestMapping("/ztree")
public class ZtreeController {
	@Autowired
	private CountryService cous;
	@Autowired
	private ZtreeService zservice;
	@RequestMapping("/doztree")
	public void searchTreenode(HttpServletRequest request,HttpServletResponse response) throws ParseException {
		//查询根节
	    JSONObject resultJsonObject = new JSONObject();
	    JSONArray jsonArray = new JSONArray();
	    JSONObject tempJsonObject = null;
	    
	    String getCountryName ="";
	    String countryID = "";
	    try {
			getCountryName=cous.getCountry().getCountryName();
		} catch (ParseException e2) {
			// TODO Auto-generated catch block
			e2.printStackTrace();
		}
	    
	   
	    try {
	    	 countryID=cous.getCountryID(getCountryName).getCountryID();
			
		} catch (ParseException e1) {
			// TODO Auto-generated catch block
			e1.printStackTrace();
		} 
	        tempJsonObject = new JSONObject();
			tempJsonObject.put("id", countryID); // 获得的id
			tempJsonObject.put("pid", 0);
			tempJsonObject.put("name", getCountryName); // 获得路径的名称
			tempJsonObject.put("open",true); // 设置默认父节点展开
			//ZtreeService zservice=new ZtreeService();
			 //判断国家下是否有省
			List<Province> plist=zservice.searchTreeNode();
			if(plist.size()==0)
			{
				tempJsonObject.put("isParent", false);	
			}
			else{
				tempJsonObject.put("isParent", true);
			}
			try {
				tempJsonObject.put("children", zservice.searchProvince(countryID, getCountryName));
			} catch (ParseException e1) {
				// TODO Auto-generated catch block
				e1.printStackTrace();
			}
			jsonArray.add(tempJsonObject);
			resultJsonObject.put("root", jsonArray.toString());
			
			try {
					response.getWriter().write(resultJsonObject.toString());
					System.out.println(resultJsonObject.toString());
				} catch (Exception e) {
					e.printStackTrace();
				}

	}
	
}

 在DAO包中的ZtreeDAO类中:

package com.summer.dao;
@Repository
public class ZtreeDAO {
	private Province province;
	ProvinceDAO pdao=new ProvinceDAO();
	CityDAO cdao=new CityDAO();
	@Transactional
 public List<Province> searchTreeNode()
 {
	 
	 Connection conn=null;
	 PreparedStatement ps=null;
	 ResultSet rs=null;
	 String sql="select ProvinceID from Province order by ID";
	 System.out.println(sql);
	 List<Province> plist=new ArrayList<Province>();
	 try{
		 conn=SQLHelper.getConnection();
		 ps=conn.prepareStatement(sql);
		 rs=ps.executeQuery();
		 
		 while(rs.next())
		 {
			 province=new Province();
			 province.setProvinceID(rs.getString("ProvinceID"));
			 plist.add(province);
		 }
		 
	 }catch(SQLException e)
	 {
		 e.printStackTrace();
	 }finally
	 {
		 SQLHelper.closeConnection(conn, ps, rs);
		 
	 }
	 return plist;
 }
 
 //查询Province表
@Transactional
 public JSONArray searchProvince(String CountryID, String getCountryName)throws ParseException {
		JSONObject ProvinceJsonObject = null;
		JSONArray ProvinceArray = new JSONArray();
		
		List<Province> list = searchTreeNode();
		for (Province rm : list) {
			ProvinceJsonObject = new JSONObject();
			ProvinceJsonObject.put("id", rm.getProvinceID()); // 获得的id
			ProvinceJsonObject.put("pid", CountryID);
			ProvinceJsonObject.put("name",pdao.getProvinceName(rm.getProvinceID()).getProvinceName()); // 获得路径的名称
			
			/*判断sheng是否有子节点*/
			List<City> citylist = new ArrayList<City>();
			citylist = cdao.getCity(rm.getProvinceID());
			if(citylist.size()==0){
				ProvinceJsonObject.put("isParent",false);
			}
			else{
				ProvinceJsonObject.put("isParent", true);
				ProvinceJsonObject.put("open",true); // 设置默认父节点展开
			}
			ProvinceJsonObject.put("children", searchCity(rm.getProvinceID()));
			ProvinceArray.add(ProvinceJsonObject);
		}
		return ProvinceArray;
	}
    //查city
@Transactional
 public JSONArray searchCity(String ProvinceId) throws ParseException {
		JSONObject cityJsonObject = null;
		JSONArray cityArray = new JSONArray();
		List<City> citylist = new ArrayList<City>();
		citylist = cdao.getCity(ProvinceId);
		if (citylist.size() != 0) {
			for (City cy : citylist) {
				cityJsonObject = new JSONObject();
				cityJsonObject.put("id", cy.getCityID());
				cityJsonObject.put("name", cy.getCityName());
				cityJsonObject.put("isParent", false);
				System.out.println(cy.getCityID());
				
				cityArray.add(cityJsonObject);
			}
		}
		return cityArray;
	}
}

 以上就是核心的代码。

  • 大小: 5.3 KB
  • 大小: 6.8 KB
分享到:
评论

相关推荐

    ztree 源码和例子

    5. **json** 文件夹:可能包含一些示例数据,以JSON格式表示,用于填充树形结构。 6. **doc** 文件夹(可能有):通常包含插件的文档,帮助开发者理解ZTree的API和配置选项。 通过分析源码和示例,我们可以深入了解...

    ztree树形控件实例

    《zTree树形控件实例解析与应用》 在网页开发中,树形控件是一种常见且实用的用户界面元素,它能够清晰地展示层级关系数据,如文件系统、组织结构等。zTree是一款基于JavaScript的开源树形控件,它结合了ajax和json...

    前台树结构生成(ztree例子)

    "前台树结构生成(ztree例子)"这个主题就是关于如何利用JavaScript技术来构建一个多选框树形结构,它涵盖了数据组织、交互设计以及动态操作等多个方面。ZTree是一个流行的JavaScript插件,专门用于创建这样的树状视图...

    ztree用法和例子

    总结来说,ZTree 是一个强大的 jQuery 目录树插件,提供了丰富的功能和高度的定制性,适合用于构建各种复杂的树形结构界面。通过深入理解和实践,开发者可以充分利用 ZTree 实现各种需求。在实际项目中,结合具体的...

    ztree树形菜单、ztree树形菜单demo

    zTree的核心功能是将JSON数据转换为交互式的树形结构,适用于文件目录、组织结构、权限管理等多种场景。 ### zTree基本概念 1. **节点**:在zTree中,每个树形结构的基本单元称为节点。节点可以包含文本、图标、...

    一个简单的ztree小例子

    例如,通过`$("#treeDemo").zTree("getTree")`获取整个树结构,`$("#treeDemo").zTree("selectNode", node)`选中指定节点。 7. 常见功能实现: - 展开/折叠节点:`$("#treeDemo").zTree("expandNode", node, bool)`...

    zTree树形菜单

    **zTree树形菜单**是基于JavaScript的开源控件,专为实现网页中的树状菜单设计。它在前端开发中广泛使用,尤其适用于构建层级结构的数据展示和交互。zTree的核心特点是轻量级、易用性和灵活性,可以满足各种自定义...

    结合ztree的下拉框树形结构数据多选,单选

    总的来说,"结合ztree的下拉框树形结构数据多选,单选"是一个涉及到前端开发中JavaScript交互设计、数据处理和用户界面优化的重要知识点。通过理解并熟练运用zTree这个工具,开发者能够创建出功能强大且用户体验良好...

    ztree小例子

    总结,zTree通过简洁的API和丰富的配置项,使得在网页中创建和操作树形结构变得简单易行。通过深入理解zTree的使用,我们可以轻松地构建出满足各种需求的树形界面。在实际项目中,结合服务器端数据动态加载和异步...

    ssm+druid连接池+easyui+ztree的小例子

    在这个例子中,EasyUI的ZTree组件被用来展示层级结构的数据,如部门结构或者权限树。 ZTree是EasyUI的一个扩展,专门用于构建树形结构。它可以方便地进行节点的增删改查,支持异步加载,提供了丰富的事件和API,使...

    zTree树形菜单jquery.rar

    这个“zTree树形菜单jquery.rar”压缩包提供了一个实际的示例,教你如何利用zTree与MySQL数据库相结合,实现动态生成树形菜单的功能。 首先,让我们深入理解zTree的核心功能。zTree是轻量级的,它可以轻松地集成到...

    zTree很坚定的例子

    【zTree坚定的应用实例】 zTree是一款非常流行的...通过理解和实践这个例子,你将能够熟练地运用zTree构建各种树形数据展示场景。在实际应用中,可以根据需求调整zTree的配置,定制出满足特定业务逻辑的树形组件。

    bootstrap风格的zTree树形菜单代码.zip

    Bootstrap风格的zTree树形菜单代码是一个基于jQuery的插件,它将数据结构转化为美观、交互性强的树形展示,广泛应用于网站导航、组织结构显示等场景。在本压缩包中,包含`index.html`、`js`和`css`三个文件夹或文件...

    Dtree和Ztree例子

    本示例包含两个特定的树结构实现:DTree和ZTree,它们都提供了对树数据结构的基本操作,如增、删、改、查功能。下面将详细解释这两个树结构及其应用。 **DTree(决策树)** DTree通常指的是决策树(Decision Tree)...

    Ztree生成树

    Ztree是一款广泛应用于Web开发中的JavaScript树形控件,它能帮助开发者轻松地在网页上展示层次结构的数据,如文件目录、组织结构等。在给定的“Ztree生成树”主题中,我们可以深入探讨Ztree的核心功能、如何使用JSON...

    ztree使用完整示例

    ZTree 是一款基于 jQuery 的灵活、强大的树形插件,广泛应用于网页界面中的数据展示和操作。这款插件以其丰富的配置选项、完善的API接口以及优秀的性能,深受开发者的喜爱。本教程将详细介绍如何使用 ZTree,并通过...

    jQuery ztree文件夹树形结构菜单插件

    **jQuery ztree文件夹树形结构菜单插件** 在网页设计和开发中,为了更好地组织和展示层级结构数据,如文件系统或组织架构,我们常常会使用到树形结构组件。jQuery ztree就是一个专为此目的设计的插件,它允许开发者...

    jQuery 利用ztree实现树形表格的实例代码

    zTree是一个基于jQuery的树插件,它提供了丰富的交互性和可定制性,使得创建树形结构变得简单。以下是对实现过程的详细说明: 首先,我们需要在HTML文件中引入必要的CSS和JavaScript库。这里我们使用了zTree的样式...

    js集成zTree实现树形结构菜单

    在这个场景中,我们讨论的是如何利用JavaScript集成zTree库来创建一个树形结构的菜单。zTree是一款基于jQuery的插件,它提供了丰富的功能和灵活的配置选项,使得在网页上构建和管理树形数据变得简单。 首先,我们...

    zTree异步加载简单示例VS2008项目完整源码

    3. 数据回调函数:处理服务器返回的数据,并调用zTree的API方法来更新树结构。 4. zTree API:zTree提供了一系列API,如`reloadNode`用于刷新节点,`expandNode`用于展开节点等,开发者需要根据需求调用这些方法。 ...

Global site tag (gtag.js) - Google Analytics