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这个对象里面定义一些规则，刚开始我们可以不用管它，有这个对象就行了。

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

　　

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

 

 

好，现在呢，我们要做一些扩展了，，，扩展什么呢，，就是扩展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了。!!

 

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

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

 

 

　　　　

 

　　　　

　　　　

 

　　　　　　

 

　　

 

 

 

 

　　

　　

 

 

 

 

 

 

 

 

 

 

 

 

 

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