zTree应用实例详讲(4)

这一节,主要是讲用右击弹出菜单,实现重命名,删除,新建文件夹,且根节点,不能删除和重命名。

好,现在开始工作:

  首先,第一步:我们要在页面上去新建一个div作为我们弹出的菜单,把这个div一开始设为display:none。因为要根据是否为根节点来判断是否有可以重命名和删除,所以我们最好用动态来控制弹出的样式。

  在aspx中的任意位置加入以下div:

 

<%--   右击菜单的展示--%>
  <div id="rMenu">
            <ul id="r_addFolder"><li>增加文件夹</li></ul>
            <ul id="r_editFolder"><li>修改名称</li></ul>
            <ul id="r_delFolder"><li>删除节点</li></ul>
   </div>

  二:设置初使化右击菜单的样式:把以下的代码加入到<head>标签内:

  

 <style type="text/css">
        div#rMenu {
        background-color:#555555;
        text-align: left;
         padding:0 1px 0 1px;
        width:100px;
        position:absolute;
        display:none;
        }
        
        div#rMenu ul {
        margin:1px 0;
        padding:0 5px;
        cursor: pointer;
        list-style: none outside none;
        background-color:#DFDFDF;
        display:none;
        }
        div#rMenu ul li {
        margin:0;
        padding:2px 0;
        }
    </style>

  三:在setting的callback里面加入 

callback: {
   ...
        onRightClick: zTreeOnRightClick//把这个加进去,注意,号;如果后面还有配置就加加上哦,,,不再说第二遍了哈。
     ...
    },

四:建立zTreeOnRightClick函数:

//右击事件
function zTreeOnRightClick(event, treeId, treeNode) {
    currNode = treeNode;            //把当前的node记录一下,右击的
    if (!treeNode) return;
       //step1 确定位置
        $("#rMenu").css({//设置右键菜单的位置
                top:event.clientY+"px",
                left:event.clientX+2+"px",
                display:"block"
            });
            
            //判断是否为顶层节点,如果是的话,就不给他删除和重命名的权利
            if (treeNode.topNode) {
                showItem(["#r_addFolder"]);
            } else {
                showItem(["#r_addFolder", "#r_editFolder", "#r_delFolder"]);
            }
    
};

  看到上面的代码:

  1.参数都是api上固定的,你不要动它。

  2.currNode = treeNode; //把当前的node记录一下,右击的  这里的cuurNode是一个全局变量,你自已去定义一个。

  3.if (!treeNode) return; 这是一个过滤,什么意思呢?也就是说如果说我们不是在节点上单击的右键,那么就止结束。

  4.$("#rMenu").css({...});得到id为rMenu这个dom对象(也就是在页面的那个div),然后设置它的css 样式。之前我们加入了一个样式到head标签当中,我们在里面设置了它全部都是隐藏起来的。

  5.css()里面要的是一个对象,这个对象我们称为样式对象,里面就象一般对象那样去定义,不过有些特性是固定的:top left

  6.我们把鼠标的x y位置,分别给left和top确定弹出菜单的位置。然后把div的状态变成"显示";

  7.因为我们对于顶层的节点是不显示删除和重命名的。所以我们要对它进行一个判断。treeNode.topNode treeNode是当前右击中的节点 topNode是我们自定义的一个属性。自定义在哪里知道吗,就是在我们静态的数据当中。在这里:

var zNodes = [

   {
       name: "凤姐", //节点名称
       open: false,  //是否为展开状态
       isParent: true,
       iconOpen: "Images/bookOpen.gif",
       iconClose: "Images/bookclosse.gif",
       url:"www.baidu.com",
       id:123,
       topNode:true         //如果是顶层文档,那么就必须要加上这个.1.topNode不能被移动。
   },

  看到上面的代码了吗?找到你自已的zNodes静态数据,在某一个节点上加上topNode:true说明这个节点是一个顶级节点,它不可以删除和重命名。(为什么要这么做呢,这是因为后期我们的动态数据时方便我们操作呢,管它的,你照着整就是了,又不是猪,整不死!!)

 

  五:看到zTreeOnRightClick这个函数中的代码,我对topNode作完判断过后是去执行了另外的一个方法的:这个方法showItem接收一个数组,这个数组里面呢,你要传入要显示的项的id(每个项,比如删除,重命名,在页面中我们都有一个id 在初使化的样式中,我们根据这个id同样是把它隐藏了的,你可以仔细看一下我给出的样式。),我们把这些id传入通过showItem方显示到div中。

 

    六:showItem方法:

  

//右击事件显示
function showItem(itemArray) {
    for (var showItem_i = 0, showItem_len = itemArray.length; showItem_i < showItem_len; showItem_i++) {
        $(itemArray[showItem_i]).show(); //显示应该显示的项。
    }

    $("#rMenu").hover(function () { //弹出菜过后鼠标进入div上面
        //事件的绑定 给div中显示的项加上事件,为什么呢,因为我们要实现删除,增加,还有修改。所以分别指向三个事件。
        var x = document.getElementById("r_addFolder");  
        x.onclick = add;
        document.getElementById("r_delFolder").onclick = del;
        document.getElementById("r_editFolder").onclick = test;
    }, function () {//离开的时候,我们要把显示出来的div再次隐藏掉。
        //清楚样式
        for (var showItem_i = 0, showItem_len = itemArray.length; showItem_i < showItem_len; showItem_i++) {
            $(itemArray[showItem_i]).hide(); //隐藏。
        }
    });

}

 

   看到上面的代码,首先们是接收的一个数组,这个数组里面装的是li项的id,和一个#。为什么要用#因为要用jQuery 。通过数组把传入的id的dom元素得到然后.show()就显示出来了。

 看着后面的部份的代码:到代码中注释去看。hover接两个函数,第一个函数是鼠标放到上面就执行,第二个鼠标离开的时候就执行.

 

  因为这次是击菜单绑定的事件,并非按钮来绑定的,所以呢,这三个方法del、 test(实际是重命名,名字起的怪,将就了,你以自已改规范)、 add。

  这三个方法的代码如下:

  

   //删除点击事件 新建不能直接连到上面。只能自已写一个。
  function del() {
      var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
      delNow(currNode);  //currNode是叫你去定义的全局变量,别忘了
//      //得到选择的节点
//      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,否则没法调用事件
  }

  

//重命名点击事件
function test() {
    var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
   treeObj.editName(currNode);//指明重命名的节点 这个bug可利用
}


//新建文件夹点击事件
function add() {
    //step1 得到tree
    var treeObj = $.fn.zTree.getZTreeObj("treeDemo");

    var node = currNode;

    var newNode = {
        name: "新建文件夹",
        isParent: true,
        isNew:true,
        id:"新建的id23423",//真正使用的时候,请设为空。
        open: false  //是否为展开状态
     };
    newNode = treeObj.addNodes(node, newNode,false)[0]; //把自已 添加进去,注意,光标的定位,在回调函数中 自动展开的时候有可能会去获取子节点 在展开之前会执行异步

    //重命名新建的文件 改变数据库
    treeObj.editName(newNode);

    
    //刷新一下树 加载父节点 异步的时候使用。
    //treeObj.reAsyncChildNodes(newNode.getParentNode(), "refresh");
}

注意,只改动这几个方法,其它的不改动。有一些setting和callback里的改动,就是我前面讲的,还有就是加一个全局的变量。

 

(如果原理懂了,自已也得把它搞出来,小伙子不要怕!)

本节完,,,测试的效果:

  

  

 其它的事件和以前一样的,包括以后要做的ajax异步和更新模块都是一层不变。

 

下一讲讲移动。把文件拖来拖去的,拖到节点下面。我们定一个规则,1,不可以把子节点拖成根节点;2.根节点不可以拖动。想一下,明天我继续来完成这个功能。

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值