zTree应用实例详讲(3)

zTree应用实例详讲(3)

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

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

aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJEAAABCCAIAAADYEKP1AAAEOklEQVR4nO2ZzWrbQBSF553Sd8g6bxDwK2ShTTfedNVdC3qGhEA3ojFdhECgNLYhDoE0JTRtE4L7QxrS/FEb1IWIOpm5986VLMm6yR0ORpZmRuPzzZFkjbm4OeVoMBgwa6rqlpn7CFRFxWVWLmeazjqkOZOn+edsctb7PXrhaHLWm7s1rdX8czbud9PJW0fnH1/9/XOINVlYWCC+2vv9glUj+sEOEeedZdiVMePnbH1zN4oTX+ubu3xm0+u1cb9ra/Jtvejv93f6rWyQ/oYPHmzlH/KnSHAw1TPjK4qTNE2n08nd3e3V1eXF+Y9f309Ovh5FcQLWP91emV6vBXW6vQJSoW1i5gxEhf3A4PwAJ4E/BnpUFTDj5yyKkxyYMSYD9vnooA5mtJvMqQ0yI2Bg3YJTxG+C7ameGV9RnOQJM8ZkwA4PRgSz25+vg8qZ+bOVYFY0hVjNCyQ09MzABhmcW9UwK5SzLGF22d/byZhl/di9HW8sc5gdbyxjvxPzjikiZ0RofIRYfWxiEeethhlfUZzk9zBjzOHBaH9vZzTcwnI2OzPwKzNDTBODUwSkgo2H7qoyZoVylt/DsoSNhlsf3r/DmA1XFy+/PA9quLpYyESCKGgoAYPOmTMGfs5qZ8ZXFCf5PSwHVh8zYoLbdYiQ0REJGu37zokpdrRKZvX9P5uFGdMd0BQnNw4/EAmWMyxk/ikaZVafxv3ucHUxqHG/GwSGQeXXxBoSGw5sjAoW9BqZtecNvW9WcF6DdUC7MQZEXJyYFsoZePbKmKnaI3k5U1WTs7S3pCqnGpnROUt7S+nZG1Vh1cosnLNyg74vxpjUK+BOYn+JoyW6opsESpPMmDnDFp0JZs6bSXtP7pF/yKnDtzXvhwNANjNmzohFZzpnhZzyHfdZgmiJDbtzZidlSt3M+G80aGbgorOdMwcG6CPhps8S20Mz9h2WlzP+inPOjL+AaefMv17ZPhIkMCTgHrBDmgp4IpJZ0jGmk2BfG2HGXHEuzQyc7BjCFMoHDYk4SgMAR8JglmHKOCUdY569/PTgaAPMmCvONjPmojPx3Bh0inCtKmbE0fC1Melk88kFljbCjLninDPjL2DSz42+NcycYc3pTogcY8PjQHtwVWyMGXPFeRZmtpug6b5TQdewCoVyhhEKnf3+kvj/ImmVBpgxV5xzZvzFMOe5Eft07MPmPsfrQgCIKUIye3gP87E1wIy54lyamRMmcCO1HvmCRhOtwIYl0DKujXhp4f+zEjmzzQWtsTeIewwHZJAZp59WM+PL/k/NXHQm3oM85tJCZoX11MpjYPbENWdmqratearaI2UmT8pMnpSZPCkzeVJm8qTM5EmZyZMykydlJk/KTJ6UmTwpM3lSZvKkzORJmcmTMpMnZSZPykyelJk8KTN5UmbypMzkSZnJkzKTJ2UmT8pMnpSZPCkzefoHe6tBOaK3/EAAAAAASUVORK5CYII=" alt="" />

现在开始：

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

<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
    }
}

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

　　

　　此功能完成。

　　

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

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

　　

　　

 

 

 

标签: zTree 文件树 动态树 ajax asp.net 树