zTree应用实例详讲(2)

上一讲，我们已经实现了重命名的操作，而且，，也把往后我们要动态改新数据库的模型整出来了，以后用ajax就可以很轻易的实现了。可能你会说，我一开始的时候树上数据也是从数据库取取出来的，，不要急吗，这个只是静态的例了，，一步一步来，急毛线！！！讲到异步获取的时候你就觉得好简单了。

　　现在呢，我们来实现删除的功能

　　会了第一个重命名的例子，这个就简单多了。

　　第一步：在页面加入一个按钮：

　　

<input type="button" value = "删除某人" onclick="del()" />

　 第二步：把点击事件写出来：写在你aspx对应的点js文件里哈，，，分离，记住，，，！

　　

   //删除点击事件  function del() {      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++) {          delNow(nodes[nodes_i]);      }  }  function delNow(node) {      var treeObj = $.fn.zTree.getZTreeObj("treeDemo");      treeObj.removeNode(node,true);//必须要设置为true,否则没法调用事件  }

　　看到了吗，上面我提取了一个方法出来，，知道为什么吗？为什么不直接就删除呢，，告你这是一个js写法的bug在一讲我就讲过，，你看上一讲最终重命名的是不是最后一个选择的吗？现在上面这种写法就可以修正上一讲中的那个bug,他就不会再是最后一个，而是全部搞定，你可以自己去修正上一讲讲到的那个bug,,看看效果。js作用链搞懂了，这个就简单了。上一讲我说是js的bug这种说法不对，是自已js写法的一个bug.

　　来，看一下，这个事件函数中，都干了些什么批东西：

　　1.var treeObj = $.fn.zTree.getZTreeObj("treeDemo"); 这个东西不用多说了吧，上一讲就说过了，，得到那个树。

　　2.var nodes = treeObj.getSelectedNodes();得到选中的所有节点，返回的是一个数组。

　　3.循环数组，把所有选中的节点删除掉。提取了一个方法delNow()传入一个节点。

　　4.delNow中的treeObj.removeNode(node,true); 看到这个removeNode了吗？它是api上的一个方法，意思是删除节点，，废话，，日！它有两个参数，第一个参是要删除的节点。第二个参数是，这个删除节点是否引发事件：如果是true它总共会引发四个事件，这里我们用不到这么多个事件。

　　5.即然它会引发事件，那个这个件事，是怎么回事，它在哪里，，我们要怎么操作？

　　6.到setting中指定删除的事件。还记得callback吗？上一讲我们指定了一个重命名的回调函数，其实这里是一样的。

　　7.setting中配置：加入两个新事件

　　

 callback: {        onRename: zTreeOnRename,        beforeRemove: zTreeBeforeRemove,        onRemove: zTreeOnRemove    }

　　　　onReaname是我们上一讲，讲到的，这里就不多说了。

　　　　beforeRemove意思是在删除执行之前我们要执行哪个事件,很明显是：zTreeBeforeRemove

　　　　onRemove:意思是删除执行完了过后，我们要执行哪个事件：zTreeOnRemove  注意格式每个属性间用,号各开。

　　8.我们去把这两个事件写出来：

　　

//删除之前的回调function zTreeBeforeRemove(treeId, treeNode) {    alert("删除之前");    return true; //返回false设置不能删除 返回true设置为删除}//执行删除function zTreeOnRemove(event, treeId, treeNode) {    alert(treeNode.id + ",删除完成" + treeNode.name);    //ajax去执行删除}

　　知道这两个事件有什么用吗？用处很大的。第一个，你可以判断一些不可以删除的节点，treeNode是不可以删除的，你就返回false那么第二个XXXonRemove就不会执行了.

　　在zTreeOnRemove你可以写ajax去更新数据库，，，其实这个模型是不是很明显了。离后期的动态又近一步了。

 

　　参数不用我再说了吗，？这些参数都是固定的，有些是可选择的，见api，不过还是全部把它写上吗，死不了人。

 

　　删除就算完了，，操作一下试试：

　　删除前：删除后：

 

看到了吗，这里还有一个bug当凤姐夫没有儿子过后，文件的类型给变了，哈哈，，这个bug怎么修正呢？这是因为我们用的是zTree自带的图标，它默认在操作过后，如果没有子节点就改变图标，而在我们新建的时候，那果指定isParent:true,它就会展示为一个文件夹，如果它有childen然后初删除了，它就会改变，这个是个小问题，只需要我们不用它的图自已指定一个图标就ok了。

在你创建凤姐夫节点的时候加入 iconClose:"/img/close.gif" 和, iconClose:"/img/close.gif"就可以了。这个根据你自已项目而定了，想加什么加什么时候，加一个美女也可以的。这里我们不用管它，在我们做ajax异步的时候再来完善，模型很重要。不要急，，，也不要跑偏了，，，，跟着主线走。

 

好了，删除操作是完成了，而且呢，我们的模型也有了，后期只需要加入ajax代码就可以更新数据库了，，，。

 

 

实现功能三，新建文件夹，，，如果你看到现在，有点感觉了，你个人照着api也可以把这个功能给实现了，，参照上面两个例子来做，，。

具体实现见下文。(三)