<!DOCTYPE html> <HTML> <HEAD> <TITLE> ZTREE DEMO - edit</TITLE> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link rel="stylesheet" href="../../../css/demo.css" type="text/css"> <link rel="stylesheet" href="../../../css/zTreeStyle/zTreeStyle.css" type="text/css"> <script type="text/javascript" src="../../../js/jquery-1.4.4.min.js"></script> <script type="text/javascript" src="../../../js/jquery.ztree.all-3.5.min.js"></script> <script type="text/javascript" src="../../../js/jquery.ztree.exhide-3.5.min.js"></script> <SCRIPT type="text/javascript"> <!-- var setting = { view : { addHoverDom: addHoverDom, removeHoverDom: removeHoverDom, selectedMulti: true }, edit: { enable: true, editNameSelectAll: true, removeTitle : "删除", renameTitle : "编辑", showRemoveBtn: true, showRenameBtn: showRenameBtn, drag: { isCopy: false, isMove: true, prev: canPrevAndNext, next: canPrevAndNext, inner: true } }, data: { keep: { leaf: true, parent: true }, simpleData: { enable: true } }, callback: { onDrop: zTreeOnDrop, beforeRemove: zTreeBeforeRemove, beforeRename: zTreeBeforeRename, beforeDrop: zTreeBeforeDrop } }; var setting2 = { view : { dblClickExpand : true, selectedMulti: true, expandSpeed: "fast" }, edit: { enable: true, drag: { isCopy: true, isMove: false, prev: false, next: false, inner: false }, showRemoveBtn: false, showRenameBtn: false }, data : { keep: { leaf: true, parent: true }, simpleData : { enable : true } }, callback : { onDrop: zTreeOnDrop, beforeDrag: beforeDrag, beforeDrop: zTreeBeforeDrop } }; var zNodes =[ { id:1, pId:0, name:"父节点 1", open:true}, { id:11, pId:1, name:"叶子节点 1-1"}, { id:12, pId:1, name:"叶子节点 1-2"}, { id:2, pId:0, name:"父节点 2", open:true}, { id:21, pId:2, name:"叶子节点 2-1"}, { id:23, pId:2, name:"叶子节点 2-3"}, { id:3, pId:0, name:"父节点 3", open:true}, { id:32, pId:3, name:"叶子节点 3-2"}, { id:33, pId:3, name:"叶子节点 3-3"} ]; var zNodes2 =[ { id:1, pId:0, name:"父节点 1", open:true, drag:false}, { id:11, pId:1, name:"叶子节点 1-1"}, { id:12, pId:1, name:"叶子节点 1-2"}, { id:13, pId:1, name:"叶子节点 1-3"}, { id:2, pId:0, name:"父节点 2", open:true, drag:false}, { id:21, pId:2, name:"叶子节点 2-1"}, { id:22, pId:2, name:"叶子节点 2-2"}, { id:23, pId:2, name:"叶子节点 2-3"}, { id:3, pId:0, name:"父节点 3", open:true, drag:false}, { id:31, pId:3, name:"叶子节点 3-1"}, { id:32, pId:3, name:"叶子节点 3-2"}, { id:33, pId:3, name:"叶子节点 3-3"} ]; function canPrevAndNext(treeId, nodes, targetNode) { return !targetNode.isParent; } //节点后的新建文件夹图标方法 var newCount = 1; function addHoverDom(treeId, treeNode) { var sObj = $("#" + treeNode.tId + "_span"); if (!treeNode.isParent || treeNode.editNameFlag || $("#addBtn_"+treeNode.tId).length>0) return; var addStr = "<span class='button add' id='addBtn_" + treeNode.tId + "' title='新建文件夹' onfocus='this.blur();'></span>"; sObj.after(addStr); var btn = $("#addBtn_"+treeNode.tId); if (btn) btn.bind("click", function(){ var zTree = $.fn.zTree.getZTreeObj(treeId); var currentTime = GetCurrentTime(); treeNode = zTree.addNodes(treeNode, {id:currentTime, pId:treeNode.id, isParent:true, name:"新建文件夹" + (newCount++)}); if (treeNode) { zTree.editName(treeNode[0]); } else { alert("新建文件夹失败!请稍后再试"); } }); }; function removeHoverDom(treeId, treeNode) { $("#addBtn_"+treeNode.tId).unbind().remove(); }; //“新建文件夹”按钮的方法 function add(e) { var zTree = $.fn.zTree.getZTreeObj("treeDemo"), isParent = e.data.isParent, nodes = zTree.getSelectedNodes(), treeNode = nodes[0]; if (treeNode && !treeNode.isParent == true) { alert("只能在文件夹或根目录下新建文件夹!"); return; } var pId = (treeNode) ? treeNode.id : "0"; var currentTime = GetCurrentTime(); treeNode = zTree.addNodes(treeNode, {id:currentTime, pId:pId, isParent:isParent, name:"新建文件夹" + (newCount++)}); if (treeNode) { zTree.editName(treeNode[0]); } else { alert("新建文件夹失败!请稍后再试"); } }; function showRenameBtn(treeId, treeNode) { return treeNode.isParent; } //用于捕获节点被删除之前的事件回调函数,并且根据返回值确定是否允许删除操作 function zTreeBeforeRemove(treeId, treeNode) { if(!confirm(" 确认删除\""+treeNode.name +"\"及其子节点?")){ return false; } changNodesStat(treeNode); return true; } //用于捕获节点编辑名称结束(Input 失去焦点 或 按下 Enter 键)之后,更新节点名称数据之前的事件回调函数,并且根据返回值确定是否允许更改名称的操作 function zTreeBeforeRename(treeId, treeNode, newName, isCancel) { if (newName.length == 0) { alert("名称不能为空!"); var zTree = $.fn.zTree.getZTreeObj(treeId); setTimeout(function(){zTree.editName(treeNode);}, 10); return false; } } //用于捕获节点被拖拽之前的事件回调函数,并且根据返回值确定是否允许开启拖拽操作 function beforeDrag(treeId, treeNodes) { for (var i=0,l=treeNodes.length; i<l; i++) { if (treeNodes[i].drag === false) { return false; } } return true; } //用于捕获节点拖拽操作结束之前的事件回调函数,并且根据返回值确定是否允许此拖拽操作 function zTreeBeforeDrop(treeId, treeNodes, targetNode, moveType) { updateNodes(treeNodes); } function zTreeOnDrop(event, treeId, treeNodes, targetNode, moveType) { for( var i=0; i<treeNodes.length; i++) { treeNodes[i].drag = true; } }; function updateNodes(nodeList) { var zTree = $.fn.zTree.getZTreeObj("treeDemo2"); for( var i=0; i<nodeList.length; i++) { nodeList[i].drag = (nodeList[i].drag == null) ? false: !nodeList[i].drag; if(nodeList[i].drag == false ){ zTree.hideNode(nodeList[i]); }else{ zTree.showNode(nodeList[i]); } } } function changNodesStat(treeNode){ if(treeNode && treeNode.isParent === false){ var zTree2 = $.fn.zTree.getZTreeObj("treeDemo2"); var node = zTree2.getNodeByParam("id", treeNode.id); if(node) updateNodes([node]); }else { var nodes = filterNodes(treeNode); updateNodes(nodes); } } //自定义过滤器,传入treeDemo的父节点treeNode,返回treeDemo2中匹配id与treeNode下的叶子节点相同的节点 function filterNodes(treeNode){ var zTree2 = $.fn.zTree.getZTreeObj("treeDemo2"); var nodes = zTree2.getNodesByFilter(filter,false,null,treeNode); return nodes; } function filter(node,treeNode) { var flag = false; var zTree = $.fn.zTree.getZTreeObj("treeDemo"); var nodes = zTree.getNodesByParam("isParent", false , treeNode); for ( var i = 0; i < nodes.length; i++) { flag = (nodes[i].id == node.id); if(flag)break; } return flag; } function GetCurrentTime() { var myDate = new Date(); var year = myDate.getFullYear(); var month = parseInt(myDate.getMonth().toString()) + 1; //month是从0开始计数的,因此要 + 1 var date = myDate.getDate(); var hour = myDate.getHours(); var minute = myDate.getMinutes(); var second = myDate.getSeconds(); var millisecond = myDate.getMilliseconds(); if (month < 10) month = "0" + month.toString(); if (date < 10) date = "0" + date.toString(); if (hour < 10) hour = "0" + hour.toString(); if (minute < 10) minute = "0" + minute.toString(); if (second < 10) second = "0" + second.toString(); if(millisecond < 10){ millisecond = "00" + millisecond.toString(); }else if(millisecond < 100){ millisecond = "0" + millisecond.toString(); } var currentTime = year.toString() + month.toString() + date.toString() + hour.toString() + minute.toString() + second.toString() + millisecond.toString(); //返回时间的数字组合 return currentTime; } $(document).ready(function(){ $.fn.zTree.init($("#treeDemo"), setting, zNodes); $.fn.zTree.init($("#treeDemo2"), setting2, zNodes2); $("#addParent").bind("click", {isParent:true}, add); changNodesStat(); //获取全部节点 //var zTree2 = $.fn.zTree.getZTreeObj("treeDemo2"); //var nodes = zTree2.getNodesByParam("null", null , null); //alert(nodes.length); }); //--> </SCRIPT> <style type="text/css"> .ztree li span.button.add {margin-left:2px; margin-right: -1px; background-position:-144px 0; vertical-align:top; *vertical-align:middle} </style> </HEAD> <BODY> <div class="content_wrap"> <div class="zTreeDemoBackground left"> 常用指标:<input type="button" id="addParent" value="新建文件夹" onclick="return false;"> <ul id="treeDemo" class="ztree"></ul> </div> <div class="zTreeDemoBackground right"> 全量指标: <ul id="treeDemo2" class="ztree"></ul> </div> </div> </BODY> </HTML>
相关推荐
ztree实现左右两棵树的节点移动,左边移动到右边,在右边树上添加节点,左边树上删除节点,右移左,逻辑一致
* 【修改】异步加载时,对于未加载子节点的父节点使用 expandNode 方法时, sonSign 设置为 true后,导致异步加载的节点无法正常显示的bug * 【修改】一次性加载全部数据,如果父节点 A 未展开,但下一级的父节点 ...
ZTree树节点的增删改及本树或者本树与其他树节点之间的拖拽
zTree 是一个依靠 jQuery 实现的多功能 “树插件”。... 灵活的编辑(增/删/改/查)功能,可随意拖拽节点,还可以多节点拖拽哟 在一个页面内可同时生成多个 Tree 实例 简单的参数配置实现 灵活多变的功能
•zTree v3.0 将核心代码按照功能进行了分割,不需要的代码...•灵活的编辑(增/删/改/查)功能,可随意拖拽节点,还可以多节点拖拽哟 •在一个页面内可同时生成多个 Tree 实例 •简单的参数配置实现 灵活多变的功能
zTree 是利用 JQuery 的核心代码,实现一套能完成大部分常用功能的 Tree 插件。它与 IE、FireFox、Chrome 等浏览器保持兼容,在一个页面内可同时生成多个Tree 实例,支持一次性静态生成和Ajax 异步加载两种方式,...
zTree 是一个功能很强大的树插件。这里有好多演示,有自定义json数据,自定义树节点图标,异步加载,更新节点图标,拖拽节点控制等等。
Tree 感兴趣或者愿意资助 zTree 继续发展下去,可以进行捐助。...灵活的编辑(增/删/改/查)功能,可随意拖拽节点,还可以多节点拖拽哟 在一个页面内可同时生成多个 Tree 实例 简单的参数配置实现 灵活多变的功能
开箱即用的ztree封装:右键事件、拖动节点、一键展开关闭节点、windows风格图标等等
jq ztree相关用法。包括节点添加、删除、更新。拖拽,丰富的事件和属性,功能强大
zTree 是一个依靠 jQuery 实现的多功能 “树插件”。... 灵活的编辑(增/删/改/查)功能,可随意拖拽节点,还可以多节点拖拽哟 在一个页面内可同时生成多个 Tree 实例 简单的参数配置实现 灵活多变的功能
zTree 是利用 JQuery 的核心代码,实现一套能完成大部分常用功能的 Tree 插件。它与 IE、FireFox、Chrome 等浏览器保持兼容,在一个页面内可同时生成多个Tree 实例,支持一次性静态生成和Ajax 异步加载两种方式,...
zTree 是一个依靠 jQuery 实现的多功能 “树插件”。...灵活的编辑(增/删/改/查)功能,可随意拖拽节点,还可以多节点拖拽哟 在一个页面内可同时生成多个 Tree 实例 简单的参数配置实现 灵活多变的功能
前面的话:zTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 ...3:可以把其他父节点里面的子节点元素拖动到刚刚新建的父节点里面。 下面开始撸代码: 1:首先要引入一些必
1.zTree 是一个依靠 jQuery 实现的多功能 “树插件”。...6.灵活的编辑(增/删/改/查)功能,可随意拖拽节点,还可以多节点拖拽哟 7.在一个页面内可同时生成多个 Tree 实例 8.支持任意更换皮肤 / 自定义图标
bootStrap风格的树图,实现了树图的增删改和节点拖拽移动,并在右侧有节点详情添加
很好的js树形结构,可以自由的拖动节点,异步绑定数据,而且加载数据比较快
js+ztree 实现左侧树将节点拖到右侧面板,动态加载div,动态加载样式
asp + access 树操作 使用zTree开发,支持数据增加、修改、删除、拖拽操作改变结点的顺序和父子关系。里面带数据库 将目录放在网站根目录下可以直接运行