• zTree应用实例详讲(3)


    zTree应用实例详讲(3)

    上一讲中,已经讲到了重命名与删除。那么这一讲,我们来做新建文件夹。

    其实新建是非常简单的,想一下我们想要的效果:点击新建,然后在一个节点下面出现一个新建的文件夹,并且与此同时这个新建的文件夹属于编辑的状态,也就是说它的光标正在闪亮,要求你输入文件名,输入文件名过后新建文件完成,效果图,像是这样:

    现在开始:

      第一步:在你的页面加入一个按钮,然后加入一个事件

    复制代码
    <input type="button" value = "新建文件夹" onclick="add()" />
    复制代码

     第二步:新建add方法

      像是这样:

      

    复制代码
    //新建文件夹点击事件
    function add() {
        //step1 得到tree
        var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
       var node = treeObj.getSelectedNodes()[0]; //默认为第一个选中的文件夹新建子文件
    
        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");
    }
    复制代码

      看到代码:首先是得到tree。

        二:得到选中的节点,你可以指定,如果选择了多个文件,那么你可以指定选中的为最后一个或第一个,然后为其重命名。

        三:新建一个对象,里面以json格式,把key和value都加上。

        四:treeObj.addNodes();里面有三个参数,第一个参数是在哪个节点下新建就传哪个节点 第二个参数就是我们新建的这个对象,第三个参数是指新建过后是否展开父节点,也就是是否把node展开,注意不是newNode

        五:treeObj.addNodes(node, newNode,false)[0]; 看到后面的下标0了吗?因为它返回的是一个数组,这个数组是我们建的那么新对象,(可以一次性建多个的)[0]返回第一个节点,这里是我们新建的那个节点。

        六:让新建的这个节点进入编辑状态:treeObj.editName(newNode);调用editName(新节点).

        这样,我们新建的节点就进入了编辑的状态。

        这里需要注意的是,我们的新建是进入到edit的监听事件,我们的edit本身也进入了edit监听事件,所以我们新建的节点里,加一个isNew:true,说明这是一个新建的文件夹重命名,并不是之前存在而得命名的.

    那么我们在我们的edit监听事件中,就是注意了,就该这样来写ajax:

    复制代码
    //回调函数,重命名过后,新名字被保存,然后回调到这里可以得到新名字
    function zTreeOnRename(event, treeId, treeNode, isCancel) {
        //可以自定义属性,然后根据这些属性来完成操作
        alert(treeNode.id + ",重命名过后的回调函数 " + treeNode.name);
    
        //1.修改 数据库中存在的重命名 看是否为isNew来决定
        // 2.数据库中不存在的重命名,就是新建 id就是null 新是新建,然后要去得到父节点的id ajax传过去,就ok了。   同样要结合js的ajax来执行
        if (treeNode.isNew&&treeNode.isNew!='undefined') {
            //调用新建的ajax
        } else { 
            //调用重命名的ajax
        }
    }
    复制代码

      上面这个回调函数是上一节讲到过的,所以呢,这里不作详讲。

      

      此功能完成。

      

      想象一下,我们所讲的几个功能都是通过按钮来完成了,如果说我们不通过页面按钮,而通过右击菜单,要怎么做呢。

      下一讲,我们去实现右击菜单来操作增,册,改,查。

      

      

     
     
     
  • 相关阅读:
    eclipse禁用svg文件Validation
    在centos上安装jenkins
    5.volatile的应用
    4.资源限制
    linux git保存用户名密码(避免每次push输用户名密码)
    mysql 从库落后主库太多优化
    mfs使用指引
    Asura监控---AsuraMonitor,阿修罗监控开源
    docker overlay网络实现
    ELK+kafka日志收集
  • 原文地址:https://www.cnblogs.com/Leo_wl/p/3253563.html
Copyright © 2020-2023  润新知