zTree实例

最新推荐文章于 2019-01-18 01:12:27 发布
最新推荐文章于 2019-01-18 01:12:27 发布
阅读量5k 收藏 1
点赞数
文章标签： stylesheet string function class path null
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/panpanhm91/article/details/7297130
版权
 首先下载zTree 3.0的jar包(JQuery zTree v3.0.zip)，导入下面引用的相关js 

1、数据在页面获取。

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<%
    String path = request.getContextPath();
   String basePath = request.getScheme() + "://"
     + request.getServerName() + ":" + request.getServerPort()
     + path + "/";
%>
<base href="<%=basePath%>">
<link rel="stylesheet" href="<%=basePath%>css/demo.css" type="text/css">
 <link rel="stylesheet" href="<%=basePath%>css/zTreeStyle/zTreeStyle.css" type="text/css">
 <script type="text/javascript" src="<%=basePath%>js/jquery-1.4.4.min.js"></script>
 <script type="text/javascript" src="<%=basePath%>js/jquery.ztree.core-3.0.js"></script>
 <script type="text/javascript" src="<%=basePath%>js/jquery.ztree.excheck-3.0.js"></script>
 <!--
 <script type="text/javascript" src="../../../js/jquery.ztree.exedit-3.0.js"></script>
 -->
 <SCRIPT type="text/javascript">
  <!--
  var setting = {
   check: {
    enable: true
   },
   data: {
    simpleData: {
     enable: true
    }
   }
  };

  var zNodes =[
   { id:1, pId:0, name:"随意勾选 1", open:true},
   { id:11, pId:1, name:"随意勾选 1-1", open:true},
   { id:111, pId:11, name:"随意勾选 1-1-1"},
   { id:112, pId:11, name:"随意勾选 1-1-2"},
   { id:12, pId:1, name:"随意勾选 1-2", open:true},
   { id:121, pId:12, name:"随意勾选 1-2-1"},
   { id:122, pId:12, name:"随意勾选 1-2-2"},
   { id:2, pId:0, name:"随意勾选 2", checked:true, open:true},
   { id:21, pId:2, name:"随意勾选 2-1"},
   { id:22, pId:2, name:"随意勾选 2-2", open:true},
   { id:221, pId:22, name:"随意勾选 2-2-1", checked:true},
   { id:222, pId:22, name:"随意勾选 2-2-2"},
   { id:23, pId:2, name:"随意勾选 2-3"}
  ];
  
  var code;
  
  function setCheck() {
   var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
   py = $("#py").attr("checked")? "p":"",
   sy = $("#sy").attr("checked")? "s":"",
   pn = $("#pn").attr("checked")? "p":"",
   sn = $("#sn").attr("checked")? "s":"",
   type = { "Y":py + sy, "N":pn + sn};
   zTree.setting.check.chkboxType = type;
   showCode('setting.check.chkboxType = { "Y" : "' + type.Y + '", "N" : "' + type.N + '" };');
  }
  function showCode(str) {
   if (!code) code = $("#code");
   code.empty();
   code.append("<li>"+str+"</li>");
  }
  
  $(document).ready(function(){
   $.fn.zTree.init($("#treeDemo"), setting, zNodes);
   setCheck();
   $("#py").bind("change", setCheck);
   $("#sy").bind("change", setCheck);
   $("#pn").bind("change", setCheck);
   $("#sn").bind("change", setCheck);
  });
  //-->
 </SCRIPT>
</HEAD>

<BODY>
<h1>Checkbox 勾选操作</h1>
<h6></h6>
<div class="content_wrap">
 <div class="zTreeDemoBackground left">
  <ul id="treeDemo" class="ztree"></ul>
 </div>
 
</div>

</body>
</html>

2、数据从后台获取。

1）页面

<title>Insert title here</title>
<%
    String path = request.getContextPath();
   String basePath = request.getScheme() + "://"
     + request.getServerName() + ":" + request.getServerPort()
     + path + "/";
%>
<base href="<%=basePath%>">
<link rel="stylesheet" href="<%=basePath%>css/demo.css" type="text/css">
<link rel="stylesheet" href="<%=basePath%>css/zTreeStyle/zTreeStyle.css"
 type="text/css">
<script type="text/javascript" src="<%=basePath%>js/jquery-1.4.4.min.js"></script>
<script type="text/javascript"
 src="<%=basePath%>js/jquery.ztree.core-3.0.js"></script>
<script type="text/javascript"
 src="<%=basePath%>js/jquery.ztree.excheck-3.0.js"></script>
<SCRIPT type="text/javascript">

 
  
   var setting = {
    check: {
     enable: true
    },
    data: {
     simpleData: {
      enable: true
     }
    }
   };
   
 var zTree;
 var treeNodes;
 var code;

 $(function() {
  $.ajax({
   async : false,
   cache : false,
   type : "POST",
   dataType : "String",
   url : "menu.action",//恳求的action路径
   error : function() {//恳求失败处理惩罚函数
    alert("恳求失败");
   },
   success : function(data) { //恳求成功后处理惩罚函数。
    alert(data);
    
    // console.log(data); // 火狐在后台打印的日志。
    treeNodes = data; //把后台封装好的简单Json格局赋给treeNodes
   }
  });

  //将string类型转换成json
   treeNodes = eval("(" + treeNodes + ")"); 
  
  zTree = $.fn.zTree.init($("#treeMenu"), setting, treeNodes);
  
 }); 
 
</SCRIPT>
</HEAD>

<BODY>
 <h1>Checkbox 勾选操作</h1>
 <h6></h6>
 <div class="content_wrap">
  <div class="zTreeDemoBackground left">
   <ul id="treeMenu" class="ztree"></ul>
  </div>
 </div>
</body>
</html>

2）后台

/**
     *
     * 查询所有菜单。
     *
     * @return String
     */
    public String queryAllMenu()
    {
        List<String> lstTree = new ArrayList<String>();
        listMenu = this.menuService.queryMenu();
        HttpServletResponse response = ServletActionContext.getResponse();
       
        for (MenuInfo menu : listMenu)
        {
            String strMenu = null;
          
            strMenu = "{id:" + menu.getMenuId() + "," + "pId:"
                + menu.getParentMenuId() + "," + "name:"
                + "'"+menu.getMenuName()+"'" +","+ "open:true" + "}";
           
            lstTree.add(strMenu);
        }
        printWriter(response, JSONArray.fromObject(lstTree).toString());
        return "success";
    }

    /**
     *
     * Description:将字符串写入Http响应 <br>
     *
     * @param response
     *            response
     * @param outStr
     *            outStr
     * @see
     */
    private void printWriter(HttpServletResponse response, String outStr)
    {
        // 返回拼裝的数据
        response.setCharacterEncoding("UTF-8");
        response.setContentType("text/html");
        PrintWriter out = null;
        try
        {
            out = response.getWriter();
            out.print(outStr);
        }
        catch (IOException e)
        {
            DEBUGGER.error(e.toString());
        }
        finally
        {
            if (null != out)
            {
                out.close();
            }
        }
    }

panpanhm91
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Ztree完整实例
01-18
ztree,ztree教程,ztree实例,ztree源码，完整实例附带jar包
ztree实例
Hello World!
07-15 8085
转自：http://blog.csdn.net/duck_arrow/article/details/7091861   zTree【简介】 zTree 是利用 JQuery 的核心代码，实现一套能完成大部分常用功能的 Tree 插件 兼容 IE、FireFox、Chrome 等浏览器 在一个页面内可同时生成多个 Tree 实例 支持 JSON 数据 支持一次性静态生成 和 Aj
ztree使用实例
weixin_34190136的博客
10-08 140
一、当某节点被选择或被取消选择时获取所有被选择的节点： <link rel="stylesheet" href="./static/libs/ztree/css/metroStyle/metroStyle.css" type="text/css"><!-- ztree --> <script src="./static/libs/ztree/js/jquery...
Jquery zTree实例
热门推荐
duck_arrow的专栏
12-21 5万+
zTree【简介】 zTree 是利用 JQuery 的核心代码，实现一套能完成大部分常用功能的 Tree 插件 兼容 IE、FireFox、Chrome 等浏览器 在一个页面内可同时生成多个 Tree 实例 支持 JSON 数据 支持一次性静态生成 和 Ajax 异步加载 两种方式 支持多种事件响应及反馈 支持 Tree 的节点移动、编辑、删除 支持任意更换皮肤 / 个性化图标（依靠css） 支...
SSH 做的ztree实例
02-07
在这个"SSH做的ztree实例"中，可能包含了一个使用SSH框架开发的Web应用，该应用集成并使用了ZTree来呈现某种树状数据结构，比如文件系统或组织架构。不过，由于描述提到"有些功能还不完善"，这意味着这个实例可能还...
jfinal ztree实例
10-19
**JFinal ZTree 实例详解** JFinal 是一个基于 Java 的轻量级 Web 开发框架，它以 MVC（Model-View-Controller）架构为基础，旨在提高开发效率，降低开发成本。ZTree 是一款广泛使用的 JavaScript 树状菜单插件，...
新建文件夹_ztree实例_双边拍卖_最后通牒_
10-03
这个“新建文件夹_ztree实例_双边拍卖_最后通牒_”的压缩包可能包含了一些使用ZTree实现特定功能的示例代码，如双边拍卖和最后通牒机制的模拟。下面我们将详细探讨这些概念以及它们与ZTree的结合应用。 1. **ZTree*...
JqueryzTree实例
12-26
### Jquery zTree 实例详解 #### 一、概述 Jquery zTree 是一款基于 jQuery 的强大且灵活的 Tree 控件插件。该插件旨在为开发者提供一套完整且易于使用的树状结构组件，适用于大多数网页开发场景。zTree 支持多种...
一个zTree实例
12-15
在这个"一个zTree实例"中，我们将探讨如何结合SSH（Spring、Struts2、Hibernate）框架，实现zTree的功能，包括增、删、改操作，并通过MySQL数据库来动态获取和存储数据，同时提供一个直观的后台查看效果。...
一个简单的ztree小例子
06-03
一个简单的ztree小例子 代码简洁 适合初学者
ztree 开发实例
10-25
(附数据库脚本)jQuery Ztree实例 已实现从数据库读取数据 已实现树节点的展示 已实现点击事件
ztree动态树示例
08-01
ztree树做的一个小项目，用的mysql数据库，里面有数据库脚本，部署启动就能OK，http://localhost:8080/ztree 访问路径
ztree使用完整示例
05-17
超完整的ztree使用demo
zTree树形插件源码，完整实例
08-08
zTree树形插件源码，完整实例，简洁方便使用，带注释说明，希望可以帮到大家！
ztree 示例
taiweipeng的博客
08-15 136
保存角色 var setting = { check: { enable: true, chkStyle: "checkbox", autoCheckTrigger: true, chkboxType :{ "Y"...
zTree 实例
LaOngDaoxing的博客
01-18 393
从网上下载的zTree_v3-master.zip       ————zTree 是一个依靠 jQuery 实现的多功能 “树插件”。 ztree_v3_eg1.html &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;titl...
zTree示例
xuhuanchao的专栏
04-09 787
ZTree下载地址包含示例 http://www.ztree.me/v3/main.php#_zTreeInfo
Z-tree实例（一）——简单实例
总有一天，你的日积月累，会成为别人的望尘莫及
05-07 470
最近弄的项目中有用到z-tree就趁机研究一下，都是一些官方的小例子，这里记录一下，以后用的时候可以直接用。 1、标准模式：基本页面和引入的文件与官网demo相同： &lt;!DOCTYPE html&gt; &lt;HTML&gt; &lt;HEAD&gt; &lt;TITLE&gt;z-tree实例，标准模式&lt;/TITLE&gt; &lt;meta http-equiv=...
zTree API详解与功能介绍
- `destroy(treeId)`: 销毁特定ID的zTree实例。 - `_z`: 包含`tools`、`view`、`event`和`data`等内部工具和方法，用于zTree的内部操作。 zTreeObj对象则提供了更多的操作接口： - `setting`: 存储zTree的配置信息...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值