这是我写的第一篇文章,就当记录一下这周在高人指点下所学一二。
首先要引入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. **json** 文件夹:可能包含一些示例数据,以JSON格式表示,用于填充树形结构。 6. **doc** 文件夹(可能有):通常包含插件的文档,帮助开发者理解ZTree的API和配置选项。 通过分析源码和示例,我们可以深入了解...
《zTree树形控件实例解析与应用》 在网页开发中,树形控件是一种常见且实用的用户界面元素,它能够清晰地展示层级关系数据,如文件系统、组织结构等。zTree是一款基于JavaScript的开源树形控件,它结合了ajax和json...
"前台树结构生成(ztree例子)"这个主题就是关于如何利用JavaScript技术来构建一个多选框树形结构,它涵盖了数据组织、交互设计以及动态操作等多个方面。ZTree是一个流行的JavaScript插件,专门用于创建这样的树状视图...
总结来说,ZTree 是一个强大的 jQuery 目录树插件,提供了丰富的功能和高度的定制性,适合用于构建各种复杂的树形结构界面。通过深入理解和实践,开发者可以充分利用 ZTree 实现各种需求。在实际项目中,结合具体的...
zTree的核心功能是将JSON数据转换为交互式的树形结构,适用于文件目录、组织结构、权限管理等多种场景。 ### zTree基本概念 1. **节点**:在zTree中,每个树形结构的基本单元称为节点。节点可以包含文本、图标、...
例如,通过`$("#treeDemo").zTree("getTree")`获取整个树结构,`$("#treeDemo").zTree("selectNode", node)`选中指定节点。 7. 常见功能实现: - 展开/折叠节点:`$("#treeDemo").zTree("expandNode", node, bool)`...
**zTree树形菜单**是基于JavaScript的开源控件,专为实现网页中的树状菜单设计。它在前端开发中广泛使用,尤其适用于构建层级结构的数据展示和交互。zTree的核心特点是轻量级、易用性和灵活性,可以满足各种自定义...
总的来说,"结合ztree的下拉框树形结构数据多选,单选"是一个涉及到前端开发中JavaScript交互设计、数据处理和用户界面优化的重要知识点。通过理解并熟练运用zTree这个工具,开发者能够创建出功能强大且用户体验良好...
总结,zTree通过简洁的API和丰富的配置项,使得在网页中创建和操作树形结构变得简单易行。通过深入理解zTree的使用,我们可以轻松地构建出满足各种需求的树形界面。在实际项目中,结合服务器端数据动态加载和异步...
在这个例子中,EasyUI的ZTree组件被用来展示层级结构的数据,如部门结构或者权限树。 ZTree是EasyUI的一个扩展,专门用于构建树形结构。它可以方便地进行节点的增删改查,支持异步加载,提供了丰富的事件和API,使...
这个“zTree树形菜单jquery.rar”压缩包提供了一个实际的示例,教你如何利用zTree与MySQL数据库相结合,实现动态生成树形菜单的功能。 首先,让我们深入理解zTree的核心功能。zTree是轻量级的,它可以轻松地集成到...
【zTree坚定的应用实例】 zTree是一款非常流行的...通过理解和实践这个例子,你将能够熟练地运用zTree构建各种树形数据展示场景。在实际应用中,可以根据需求调整zTree的配置,定制出满足特定业务逻辑的树形组件。
Bootstrap风格的zTree树形菜单代码是一个基于jQuery的插件,它将数据结构转化为美观、交互性强的树形展示,广泛应用于网站导航、组织结构显示等场景。在本压缩包中,包含`index.html`、`js`和`css`三个文件夹或文件...
本示例包含两个特定的树结构实现:DTree和ZTree,它们都提供了对树数据结构的基本操作,如增、删、改、查功能。下面将详细解释这两个树结构及其应用。 **DTree(决策树)** DTree通常指的是决策树(Decision Tree)...
Ztree是一款广泛应用于Web开发中的JavaScript树形控件,它能帮助开发者轻松地在网页上展示层次结构的数据,如文件目录、组织结构等。在给定的“Ztree生成树”主题中,我们可以深入探讨Ztree的核心功能、如何使用JSON...
ZTree 是一款基于 jQuery 的灵活、强大的树形插件,广泛应用于网页界面中的数据展示和操作。这款插件以其丰富的配置选项、完善的API接口以及优秀的性能,深受开发者的喜爱。本教程将详细介绍如何使用 ZTree,并通过...
**jQuery ztree文件夹树形结构菜单插件** 在网页设计和开发中,为了更好地组织和展示层级结构数据,如文件系统或组织架构,我们常常会使用到树形结构组件。jQuery ztree就是一个专为此目的设计的插件,它允许开发者...
zTree是一个基于jQuery的树插件,它提供了丰富的交互性和可定制性,使得创建树形结构变得简单。以下是对实现过程的详细说明: 首先,我们需要在HTML文件中引入必要的CSS和JavaScript库。这里我们使用了zTree的样式...
在这个场景中,我们讨论的是如何利用JavaScript集成zTree库来创建一个树形结构的菜单。zTree是一款基于jQuery的插件,它提供了丰富的功能和灵活的配置选项,使得在网页上构建和管理树形数据变得简单。 首先,我们...
3. 数据回调函数:处理服务器返回的数据,并调用zTree的API方法来更新树结构。 4. zTree API:zTree提供了一系列API,如`reloadNode`用于刷新节点,`expandNode`用于展开节点等,开发者需要根据需求调用这些方法。 ...