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也能够把这个功能给实现了，，参照上面两个例子来作，，。

具体实现见下文。(三)