zTree应用实例详讲(1)

zTree 专栏收录该内容
6 篇文章 0 订阅

来源:http://www.cnblogs.com/buy360/p/3248938.html

因为项目的需要,要创建一棵动态的文件树,此树除了实现异步获取子节点外,还要实现对树节点的增、删、改、查、移动、重命名、批量删除、批量移动。 每一个操作都要和数据库打交道。任务还是挺重的。

我正在考虑用什么树比较好,,在网上比较了一番,我最初的感觉是用jsTree,因为它确实很强大,但是因为api不全,所以放弃使用jsTree。我们项目组长说用asp.NET自带的TreeView插件,,你妹啊,它每次都要back,让人很难受,实现这些功能,用它,一定会把我整死的。正当我准备用Ztree的时候,我们经理来了,他们,ZTree有问题,,问他有什么问题,他说zTree那个批东西很麻烦,,你妹啊,,麻烦确实是个问题,但是怕麻烦使终会失败!!!

 

所以我确实不要怕毛线,直接用zTree这个毛线。

 

首先先来介绍一下zTree,然后就开始一步一步实现我所说的功能。时间有限,所以我决定在项目开发的同时把这个东西放上来。

google上是这么说的:

zTree 是一个依靠 jQuery 实现的多功能 “树 插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。专门适合项目开发,尤其是 树状菜单、树状数据的Web显示、权限管理等等。
zTree 是开源免费的软件(MIT 许可证)。在开源的作用下,zTree 越来越完善,目前已经拥有了不少粉丝,并且今后还会推出更多的 zTree 扩展功能库,让 zTree 更加强大。
 
管他三七二十一,开始干吗。
 
第一步:下载Ztree 网上一大堆。
第二步:把下载好的东西解压过后,放到你的webApp中。一般放images js css三个文件夹就o了。
第三步:建立一个aspx文件.
第四步:在文件中引用如下:不要忘了jquery的引入哈。
<script src="js/jquery-1.4.4.min.js" type="text/javascript"></script>
    <link href="css/demo.css" rel="stylesheet" type="text/css" />
    <link href="css/zTreeStyle/zTreeStyle.css" rel="stylesheet" type="text/css" />
    <script src="js/jquery.ztree.core-3.4.js" type="text/javascript"></script>
    <script src="js/jquery.ztree.exedit-3.4.js" type="text/javascript"></script>

第五步:建立一个专属于aspx的js文件。为了做分离吗。你懂的!!!此文件最好与你的aspx同名,在后在aspx中引入.js 最终就要引入下面的这些东西了。

<script src="js/jquery-1.4.4.min.js" type="text/javascript"></script>
    <link href="css/demo.css" rel="stylesheet" type="text/css" />
    <link href="css/zTreeStyle/zTreeStyle.css" rel="stylesheet" type="text/css" />
    <script src="js/jquery.ztree.core-3.4.js" type="text/javascript"></script>
    <script src="js/jquery.ztree.exedit-3.4.js" type="text/javascript"></script>

    <script src="Scripts/TreeShow.js" type="text/javascript"></script>

第六步,在TreeShow.aspx中,建立你的tree模型。也就是你要给这个树一个初使的标记:zTree有一个固定的格式哦,在aspx中放入下面的代码:

 <ul id="treeDemo" class="ztree"></ul>

第七步:在你的TreeShow.js中初使化这棵树

    首先:树的初例化是这样的:

      

$(document).ready(function () {

    zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes);

}

   二: zTreeObj是一个全局的变量 ,作用不是很大,只是把初例化过后的结果返回到这个变量当中,可以不用管它,我们以后都不用它。放在这里好看,,ok,,不要多想。

   三:$.fn.zTree.init($("#treeDemo"), setting, zNodes);  treeDemo就是你那个树的id,也就是叫你放在页面当中的这个毛线:(<ul id="treeDemo" class="ztree"></ul>)的id

          setting是一个对象,它就是一个对象,做什么的,过后再说,先不管它。zNodes是一个数组,里面装的是一个一个的对象,这个对象要是json格式的。等下具体说。

    四:setting对象,因为在我们初使化数的时候用到了它,所以我们要去建一个对象 全局的哈。

  

var setting = {

};

  五:zNodes 同上,树在初使化的时候加载了它,所以我们要去建一个zNodes数组。

var zNodes = [];

  六:那么我们要在这两个对象里面做什么东西呢?我日,其实是这样的,这个树呢,它还没有成型,它需要很多人来形成,这些人呢需要手啊,脚啊之类的,所以呢,zNodes这个数组里面呢,就是我们要去给它设置一些手啊,脚啊,毛啊。这棵树里面还可能有一个未婚先那个的女的,所以呢,还有可能要给这个女的整一个儿子。说明了,这个数组里就是一些对象,这些对象是用来描述树的节点的,每个节点相当于是一个人。

     七:来吧,我们先来点静态的,也就是先不和数据库打交道,打静态的搞懂了,再来动态的,这个过程是一个过程,急不得,急毛线了,会气死的。

        首先,我们在这个数组里面放两个人(对象) 一个是凤姐,一个是凤姐他妈

   

var zNodes = [

   {
       name: "凤姐", //节点名称
       open: false,  //节点是否可以展开 凤姐家的门是开着的吗?
       isParent:true //凤姐有可能会是一个母亲吗? 是否为文件夹
       
   },
   {
       name: "凤姐他妈",
       open: true,
       id: 1,             //自定义的,可有可无  编号
       url:"sdfsldfsdf",  //自定义的,可有可无  他妈家的地址,老家的地址 点一下就去老家了。
       children: [       //自定义的,可有可无  他妈的儿孙些  为什么没有他呢?
            {
                name: "凤姐他弟"
            },
             {
                 name: "凤姐他妹",
                 children: [{
                    name:"凤姐他妹的儿子"
                 }]
             }
         ]
   }

   ];

    八:setting呢,其实就是相当于一个社会,在这个社会里面呢,有一些规则,比如说:不能让凤姐跑去打巴马哥。所以呢,我们要去setting这个对象里面定义一些规则,刚开始我们可以不用管它,有这个对象就行了。

  九:浏览一效果就是这样:

  

  怎么样,有没有一点点的成就感?如果有,那么告你,你还很多事情要做,,做什么呢,就是做一些规则,不要让凤杰乱来撒,对吧,!

 

 

好,现在呢,我们要做一些扩展了,,,扩展什么呢,,就是扩展setting来实现我们要实现在功能。

 

  功能一:为我们这些静态的数据实现重命名,,好了,现在凤姐要改名字了,,改成成冠希!

  怎么办呢? 首先们要有一个地方可以改名字,那就是你要去改名字的地方了,,找共)))产)))党。

  我们在页面中加入一个input,并为它指定一个事件,(注意这个事件,最好是在文档加载当就有,也就是不要放在:)$(document).ready(function () {}里面。

  像这样:

  

<input type="button" value="我是共(((产)))党,我可以改名字" onclick = "test()" />

 

  然后,就是声明这个事件函数,是这样的:不要管它,把代码一一考过去就是了,然后再慢慢告你,它是怎么去改名字的。

  

//重命名点击事件
function test() {
    var treeObj = $.fn.zTree.getZTreeObj("treeDemo");

    //得到选中的节点

    var nodes = treeObj.getSelectedNodes();

    for (var nodes_i = 0, nodes_len = nodes.length; nodes_i < nodes_len; nodes_i++) { 
        treeObj.editName(nodes[nodes_i]);//指明重命名的节点 这个bug可利用
    }
}

  

  三:看到了吧,这个函数里面就是他改名字的过程,他是怎么做的呢。好,我来告你,这个zTree工具改名字还是很牛B的。

      1.var treeObj = $.fn.zTree.getZTreeObj("treeDemo"); //得到这个树。这是一个固定的格式。treeDemo就是tree的id,也就是那个在页面上放的ul的id,,日,都说了几次了,以后不说了哈。

             2.var nodes = treeObj.getSelectedNodes();  //用这个树去取节点。你要改名它,你要知道是为谁改吧,所以呢,要得到这个人,。得到选中的节点。

      3. nodes是指选中的所有的节点,有可能选了很多个哦,这里默认只为最后一个改名字,知道为什么呢?这个for最终把作用域定位到了最后一个选中的节点,这是一个js问题。这里就不多说了,不懂的去看一下js的这个bug.

      4.所以呢,我们最终就用treeObj.editName(nodes[nodes_i]);给这个节点nodes[nodes_i]),改名字了。这也是一个固定的方法。editName记住,他用树.方法名。

  然后就可以运行了。点一下按钮:

      效果:  改成:

 

 

    我们试想一下,我们这样改了,刷一下页面,起不是又变成我们的静态数据了,这样不科学,所以呢,我们一般在改完名字过后,还要把它入库存起来,也就是更新数据库了,我先写一个模式,以后再来完善它。

    5.这个时候,我们就要用到我们的setting来设定规则了。在setting对象中声明一个属性:像这样:把它放在setting对象里,,不要乱放。

    

callback: {
            onRename: zTreeOnRename,
        }

    来看一下这个是干吗的,我们在setting上指明了一个规则callBack:{} 这个callBack是指回调的意思,也就是说我们的一些事件的定义呢,全部定义在这个里面。

    首先我们在改名字,所以呢,api中有一个onRename它指定一个事件zTreeOnRename,其它也就是一个函数。那么我们在改完名字过后呢,就要去执行这个函数了。

    2.我们把这个函数声明出来:它的参数是一个固定的格式,一个都不能少。

function zTreeOnRename(event, treeId, treeNode, isCancel) {
    //可以自定义属性,然后根据这些属性来完成操作
    alert(treeNode.id + ",重命名过后的回调函数 " + treeNode.name);

    //1.ajax更新数据库
   

}

    3.event就是指改名字这个事件 treeId不用管他,它就是节点的一个id这个id不是你自定义的那个,是树自已生成的一个B东西,有毛用。treeNode这个东西很有用,它就是你重命名的这个节点,isCancel得命名是否取消了。

    4.一般情况呢,我们会这样的,得到这个treeNode节点,然后从它上面取出自定义的id,是我们在Znodes数组里指定的id 用ajax的方式调用后台的方法传入id,和新名字,然后实现数据库的更新。

     5.ajax 怎样调用后台,后期完善它。 

  这个功能就结束了,怎么样,,有没有一点感觉。去网上看下api.,看不懂也先看,看了过后再来看我这里,你就觉得他妈的太easy了。!!


  • 0
    点赞
  • 0
    评论
  • 1
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值