jQuery zTree v3.5 实例4 对树的节点进行编辑和删除

实现效果如下:

实现代码如下:

[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.     <link href=”<%=basePath %>/css/zTreeStyle.css” rel=”stylesheet” type=”text/css”/>
  16.     <script type=”text/javascript”>
  17.     var zTree;
  18.     var setting = {
  19.             view:{
  20.                 selectedMulti:false
  21.             },
  22.             edit: {
  23.                 enable: true,
  24.                 editNameSelectAll:true,
  25.                 removeTitle:’删除’,
  26.                 renameTitle:’重命名’
  27.             },
  28.             data: {
  29.                 keep:{
  30.                     parent:true,
  31.                     leaf:true
  32.                 },
  33.                 simpleData: {
  34.                     enable: true
  35.                 }
  36.             },
  37.             callback:{
  38.                 beforeRemove:beforeRemove,//点击删除时触发,用来提示用户是否确定删除
  39.                 beforeEditName: beforeEditName,//点击编辑时触发,用来判断该节点是否能编辑
  40.                 beforeRename:beforeRename,//编辑结束时触发,用来验证输入的数据是否符合要求
  41.                 onRemove:onRemove,//删除节点后触发,用户后台操作
  42.                 onRename:onRename,//编辑后触发,用于操作后台
  43.                 beforeDrag:beforeDrag,//用户禁止拖动节点
  44.                 onClick:clickNode//点击节点触发的事件
  45.             }
  46.         };
  47.     var zNodes =[
  48.                 { id:1, pId:0, name:”父节点 1″, open:true},
  49.                 { id:11, pId:1, name:”去百度”,url:’http://www.baidu.com’,target:’_blank’},
  50.                 { id:12, pId:1, name:”叶子节点 1-2″},
  51.                 { id:13, pId:1, name:”叶子节点 1-3″},
  52.                 { id:2, pId:0, name:”父节点 2″, open:true},
  53.                 { id:21, pId:2, name:”叶子节点 2-1″},
  54.                 { id:22, pId:2, name:”叶子节点 2-2″},
  55.                 { id:23, pId:2, name:”叶子节点 2-3″},
  56.                 { id:3, pId:0, name:”父节点 3″, open:true},
  57.                 { id:31, pId:3, name:”叶子节点 3-1″},
  58.                 { id:32, pId:3, name:”叶子节点 3-2″},
  59.                 { id:33, pId:3, name:”叶子节点 3-3″}
  60.             ];
  61.     $(document).ready(function(){
  62.         zTree = $.fn.zTree.init($(“#tree”), setting, zNodes);
  63.     });
  64.     function beforeRemove(e,treeId,treeNode){
  65.         return confirm(“你确定要删除吗?”);
  66.     }
  67.     function onRemove(e,treeId,treeNode){
  68.         if(treeNode.isParent){
  69.             var childNodes = zTree.removeChildNodes(treeNode);
  70.             var paramsArray = new Array();
  71.             for(var i = 0; i < childNodes.length; i++){
  72.                 paramsArray.push(childNodes[i].id);
  73.             }
  74.             alert(“删除父节点的id为:”+treeNode.id+”\r\n他的孩子节点有:”+paramsArray.join(“,”));
  75.             return;
  76.         }
  77.         alert(“你点击要删除的节点的名称为:”+treeNode.name+”\r\n”+”节点id为:”+treeNode.id);
  78.     }
  79.     function beforeEditName(treeId,treeNode){
  80.         if(treeNode.isParent){
  81.             alert(“不准编辑非叶子节点!”);
  82.             return false;
  83.         }
  84.         return true;
  85.     }
  86.     function beforeRename(treeId,treeNode,newName,isCancel){
  87.         if(newName.length < 3){
  88.             alert(“名称不能少于3个字符!”);
  89.             return false;
  90.         }
  91.         return true;
  92.     }
  93.     function onRename(e,treeId,treeNode,isCancel){
  94.         alert(“修改节点的id为:”+treeNode.id+”\n修改后的名称为:”+treeNode.name);
  95.     }
  96.     function clickNode(e,treeId,treeNode){
  97.         if(treeNode.id == 11){
  98.             location.href=treeNode.url;
  99.         }
  100.     }
  101.     function beforeDrag(treeId,treeNodes){
  102.         return false;
  103.     }
  104.     </script>
  105. <body>
  106.     <ul id=”tree” class=”ztree”></ul>
  107. </body>
  108. </html>

标签