zTree应用实例详讲

zTree应用实例详讲(1)

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

我正在考虑用什么树比较好，，在网上比较了一番，我最初的感觉是用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这个对象里面定义一些规则，刚开始我们可以不用管它，有这个对象就行了。

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

　　aaarticlea/png;base64,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" alt="" />

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

好，现在呢，我们要做一些扩展了，，，扩展什么呢，，就是扩展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记住，他用树.方法名。

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

　　　　　　效果：aaarticlea/png;base64,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" alt="" />  改成：aaarticlea/png;base64,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" alt="" />

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

　　　　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了。!!

　　　　好了，我们来实现功能二 删除一个节点：

　　　　（我先吃饭去了，吃了饭再写，见下一文）

　　　　

　　　　

　　　　

　　　　　　

　　

　　

　　

 

 

 

 

 

 

 

 

 

 

 

标签: zTree 文件树 动态树 ajax asp.net 树