jQuery zTree v3.5 实例5 对树节点的增、删、改,添加时包含添加同级节点和子节点

最终效果如下:

当鼠标移动到节点时,后面会出现三个小图标,依次代表添加、修改和删除。修改和删除可以参看上一篇文章,这篇重点在于添加。在点击添加小图标时,效果如下:

会弹出对话框,提示用户是添加同级节点还是子节点,如果当前节点是叶子节点,则不能添加同级节点,因为这可以由它的父节点添加子节点来完成。这样一来,添加的同级节点都是父节点,即isParent:true。

弹出的对话框使用到了artDialog,可网上下载。

代码如下:

[html][/html] view plaincopy

  1. <%@ page language=”java” contentType=”text/html; charset=utf-8″
  2.     pageEncoding=”utf-8″%>
  3.         <%
  4. String path = request.getContextPath();
  5. String basePath = request.getScheme()+”://”+request.getServerName()+”:”+request.getServerPort()+path+”/”;
  6. %>
  7. <!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
  8. <html>
  9. <head>
  10. <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″>
  11. <title>Insert title here</title>
  12. </head>
  13. <script type=”text/javascript” src=”<%=basePath %>/js/jquery-1.8.1.js”></script>
  14.     <script type=”text/javascript” src=”<%=basePath %>/js/jquery.ztree.all-3.5.min.js”></script>
  15.     <script type=”text/javascript” src=”<%=basePath %>/js/jquery.artDialog.js”></script>
  16.     <link href=”<%=basePath %>/css/zTreeStyle.css” rel=”stylesheet” type=”text/css”/>
  17.     <link href=”<%=basePath %>/css/idialog.css” rel=”stylesheet” type=”text/css”/>
  18.     <script type=”text/javascript”>
  19.     var zTree;
  20.     var setting = {
  21.             view:{
  22.                 addHoverDom:addHoverDom,
  23.                 removeHoverDom:removeHoverDom,
  24.                 selectedMulti:false
  25.             },
  26.             edit: {
  27.                 enable: true,
  28.                 editNameSelectAll:true,
  29.                 removeTitle:’删除’,
  30.                 renameTitle:’重命名’
  31.             },
  32.             data: {
  33.                 /* keep:{
  34.                     parent:true,
  35.                     leaf:true
  36.                 }, */
  37.                 simpleData: {
  38.                     enable: true
  39.                 }
  40.             },
  41.             callback:{
  42.                 beforeRemove:beforeRemove,//点击删除时触发,用来提示用户是否确定删除
  43.                 beforeEditName: beforeEditName,//点击编辑时触发,用来判断该节点是否能编辑
  44.                 beforeRename:beforeRename,//编辑结束时触发,用来验证输入的数据是否符合要求
  45.                 onRemove:onRemove,//删除节点后触发,用户后台操作
  46.                 onRename:onRename,//编辑后触发,用于操作后台
  47.                 beforeDrag:beforeDrag,//用户禁止拖动节点
  48.                 onClick:clickNode//点击节点触发的事件
  49.             }
  50.         };
  51.     var zNodes =[
  52.                 { id:1, pId:0, name:”父节点 1″, open:true},
  53.                 { id:11, pId:1, name:”去百度”,url:’http://www.baidu.com’,target:’_blank’},
  54.                 { id:12, pId:1, name:”叶子节点 1-2″},
  55.                 { id:13, pId:1, name:”叶子节点 1-3″},
  56.                 { id:2, pId:0, name:”父节点 2″, open:true},
  57.                 { id:21, pId:2, name:”叶子节点 2-1″},
  58.                 { id:22, pId:2, name:”叶子节点 2-2″},
  59.                 { id:23, pId:2, name:”叶子节点 2-3″},
  60.                 { id:3, pId:0, name:”父节点 3″, open:true},
  61.                 { id:31, pId:3, name:”叶子节点 3-1″},
  62.                 { id:32, pId:3, name:”叶子节点 3-2″},
  63.                 { id:33, pId:3, name:”叶子节点 3-3″}
  64.             ];
  65.     $(document).ready(function(){
  66.         zTree = $.fn.zTree.init($(“#tree”), setting, zNodes);
  67.     });
  68.     function beforeRemove(e,treeId,treeNode){
  69.         return confirm(“你确定要删除吗?”);
  70.     }
  71.     function onRemove(e,treeId,treeNode){
  72.         if(treeNode.isParent){
  73.             var childNodes = zTree.removeChildNodes(treeNode);
  74.             var paramsArray = new Array();
  75.             for(var i = 0; i < childNodes.length; i++){
  76.                 paramsArray.push(childNodes[i].id);
  77.             }
  78.             alert(“删除父节点的id为:”+treeNode.id+”\r\n他的孩子节点有:”+paramsArray.join(“,”));
  79.             return;
  80.         }
  81.         alert(“你点击要删除的节点的名称为:”+treeNode.name+”\r\n”+”节点id为:”+treeNode.id);
  82.     }
  83.     function beforeEditName(treeId,treeNode){
  84.         /* if(treeNode.isParent){
  85.             alert(“不准编辑非叶子节点!”);
  86.             return false;
  87.         } */
  88.         return true;
  89.     }
  90.     function beforeRename(treeId,treeNode,newName,isCancel){
  91.         if(newName.length < 3){
  92.             alert(“名称不能少于3个字符!”);
  93.             return false;
  94.         }
  95.         return true;
  96.     }
  97.     function onRename(e,treeId,treeNode,isCancel){
  98.         alert(“修改节点的id为:”+treeNode.id+”\n修改后的名称为:”+treeNode.name);
  99.     }
  100.     function clickNode(e,treeId,treeNode){
  101.         if(treeNode.id == 11){
  102.             location.href=treeNode.url;
  103.         }else{
  104.             alert(“节点名称:”+treeNode.name+”\n节点id:”+treeNode.id);
  105.         }
  106.     }
  107.     function beforeDrag(treeId,treeNodes){
  108.         return false;
  109.     }
  110.     var newCount = 1;
  111.     function addHoverDom(treeId,treeNode){
  112.         var sObj = $(“#” + treeNode.tId + “_span”);
  113.         if (treeNode.editNameFlag || $(“#addBtn_”+treeNode.tId).length>0) return;
  114.         var addStr = “<span class=’button add’ id=’addBtn_” + treeNode.tId
  115.             + “‘ title=’添加子节点’ onfocus=’this.blur();’></span>”;
  116.         sObj.after(addStr);
  117.         var btn = $(“#addBtn_”+treeNode.tId);
  118.         if (btn) btn.bind(“click”, function(){
  119.             //在这里向后台发送请求保存一个新建的叶子节点,父id为treeNode.id,让后将下面的100+newCount换成返回的id
  120.             //zTree.addNodes(treeNode, {id:(100 + newCount), pId:treeNode.id, name:”新建节点” + (newCount++)});
  121.             art.dialog({
  122.                 id: ‘testID’,
  123.                 content: ‘您想要添加同级节点还是子节点?’,
  124.                 button: [
  125.                     {
  126.                         name: ‘同级节点’,
  127.                         callback: function () {
  128.                             if(!treeNode.isParent){
  129.                                 art.dialog({
  130.                                     content:’叶子节点不能建立同级节点’,
  131.                                     ok:function(){}
  132.                                 });
  133.                                 return;
  134.                             }
  135.                            var parentNode = treeNode.getParentNode();
  136.                            var pId = 0;
  137.                            if(parentNode != null){
  138.                                pId = parentNode.id;
  139.                            }
  140.                            zTree.addNodes(parentNode,{‘id’:(100+newCount),’pId’:pId,’name’:’新建同级节点’,’isParent’:true});
  141.                         },
  142.                         focus: true
  143.                     },
  144.                     {
  145.                         name: ‘子节点’,
  146.                         callback: function () {
  147.                             zTree.addNodes(treeNode, {id:(100 + newCount), pId:treeNode.id, name:”新建子节点” + (newCount++)});
  148.                         },
  149.                         focus:true
  150.                     },
  151.                     {
  152.                         name: ‘取消’
  153.                     }
  154.                 ]
  155.             });
  156.             return false;
  157.         });
  158.     }
  159.     function removeHoverDom(treeId,treeNode){
  160.         $(“#addBtn_”+treeNode.tId).unbind().remove();
  161.     }
  162.     </script>
  163. <body>
  164.     <ul id=”tree” class=”ztree”></ul>
  165. </body>
  166. </html>

 

PS:如果引入了zTreeStyle.css,前面的加号小图标仍无法显示,需在改文件中添加:

[css][/css] view plaincopy

  1. .ztree li span.button.add {margin-right:2px; background-position:-143px 0px; vertical-align:top; *vertical-align:middle}

 

标签