zTree应用实例详讲(4)

最新推荐文章于 2019-01-18 01:12:27 发布

小七的玩偶

最新推荐文章于 2019-01-18 01:12:27 发布

阅读量888

点赞数

分类专栏： zTree

zTree 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

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

好，现在开始工作：

　　首先，第一步：我们要在页面上去新建一个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里的改动，就是我前面讲的，还有就是加一个全局的变量。

（如果原理懂了，自已也得把它搞出来，小伙子不要怕！）

本节完，，，测试的效果：