现在位置首页 / 项目实战 /正文

zTree教程-简单入门介绍(java版本示例)

作者: IT小兵 | 2014年5月23日| 热度:℃ | 评论: |参与:

前几篇分享了ztree在asp.net下的使用,有兴趣的同学可以去看看。

[Ztree教程-采用Jquery Ajax异步加载数据和Ztree自带异步加载数据]

[Ztree教程-asp.net下代码部署及服务端获取数据的例子]

很多同学问有没有java的,现在分享一下。


在实际的项目开发中,主要使用zTree来进行异步加载数据,如果数据量大的话,这样可以大大的减少服务器的压力,初学zTree,费了很多心思,现在总结zTree的使用方法。

  1.  下载JQuery zTree v3.0.zip  (有更高的版本).地址:http://www.ztree.me/v3/demo.php#_308 点击下载即可。


  2. 下载后打开的目录




  3. 然后引人css和js (必须要放入相应的位置,特别是css):  


HTML页面代码:

  <!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>zTree 案例</title>
       <script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="js/jquery.ztree.core-3.0.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="css/zTreeStyle/zTreeStyle.css" />  <script language="JavaScript">  
    var setting = {  
   		view: {
   			  //dblClickExpand: false,
   			  expandSpeed: 100 //设置树展开的动画速度
   		},
   		//获取json数据
        async : {  
            enable : true, 
            url : "${projectUtil.getWebRealPath()}/treeview/treeview!zTreeJSON.action", // Ajax 获取数据的 URL 地址  
            autoParam : [ "id", "name" ] //ajax提交的时候,传的是id值
        },  
        data:{ // 必须使用data  
            simpleData : {  
                enable : true,  
                idKey : "id", // id编号命名   
                pIdKey : "pId", // 父id编号命名    
                rootPId : 0 
            }  
        },  
        // 回调函数  
        //?????treeId
        callback : {  
            onClick : function(event, treeId, treeNode, clickFlag) {  
                if(true) {
                    alert(" 节点id是:" + treeNode.id + ", 节点文本是:" + treeNode.name);      
                }  
            },  
            //捕获异步加载出现异常错误的事件回调函数 和 成功的回调函数  
            onAsyncSuccess : function(event, treeId, treeNode, msg){  
            }  
        }  
    };  
  
    // 过滤函数  
    function filter(treeId, parentNode, childNodes) {  
        if (!childNodes)  
            return null;  
        for ( var i = 0, l = childNodes.length; i < l; i++) {  
           childNodes[i].name = childNodes[i].name.replace(/\.n/g, '.');  
        }  
        return childNodes;  
    }  
  
    //   
    $(document).ready(function() {  
        $.fn.zTree.init($("#tree"), setting );  
    });  
</script>  
</HEAD>  
<BODY>  
  <div>  
    <!—这里的 ul 的class名字一定要是ztree,不能更改-->
        <ul id="tree" class="ztree"></ul>  
    </div>  
</BODY>  
</HTML>

提交的action 

返回一个json(其实就是一个字符串)数据,这里的json数据需要自己来拼接,拼接好后返回就行了,json数据拼接成:

[{"id":"1","pId":"0","name":"张学友","isParent":true},
{"id":"11","pId":"1","name":"吻别"},
{"id":"2","pId":"0","name":"刘德华","isParent":true},
{"id":"21","pId":"2","name":"练习" }]
就可以了。
   String json = 
[{"id":"1","pId":"0","name":"张学友","isParent":true},
{"id":"11","pId":"1","name":"吻别"},
{"id":"2","pId":"0","name":"刘德华","isParent":true},
{"id":"21","pId":"2","name":"练习" }]

注意:如果要一次性加载全部数据的话,就直接从数据库取出全部数据来拼接就行了,如果要异步加载数据的,就需要用到一个参数://获取json数据

  async : {  
            enable : true, 
            url : "${projectUtil.getWebRealPath()}/treeview/treeview!zTreeJSON.action", // Ajax 获取数据的 URL 地址  
            autoParam : [ "id", "name" ] //ajax提交的时候,传的是id值
        },

   先从数据库取出最顶级数据。然后根据id号再从数据库查询。


转发注明:www.suchso.com

点击阅读本文所属分类的更多文章: 项目实战 。和高手一起交流:346717337
友荐云推荐

未注明转发、原文均为本站原创。分享本文请注明 原文链接

给您更多信息和帮助

在这里您可以找到更多:

技术交流群:346717337 Jquery插件交流

投稿:suchso@vip.qq.com

承接:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/业务咨询

抢天猫双11红包
推荐使用阿里云服务器
echarts教程系列
本月最热文章

微信扫一扫,徜徉悠嘻网,您的休闲乐园

微信公众号:快乐每一天

随机文章
标签

技术交流群:346717337

投稿:suchso@vip.qq.com

专业专注:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/付费问题咨询