锁定老帖子 主题:zTree 正式搬家到 iteye
该帖已经被评为精华帖
|
|
---|---|
作者 | 正文 |
发表时间:2011-09-15
欢迎~~支持一下。
|
|
返回顶楼 | |
发表时间:2011-09-16
冬之语2008 写道 flex版的tree也可以的吧!
zTree就是 js版的,没有flex 版的哟 |
|
返回顶楼 | |
发表时间:2011-09-16
最近项目就是用这个, 非常不错的插件 当时用的是2.5版, 美中不足就是点击打开关闭树节点时有点抖动过大,不知道后续版本是否已经改进?
|
|
返回顶楼 | |
发表时间:2011-09-16
汉唐铁骑破虏用刀 写道 最近项目就是用这个, 非常不错的插件 当时用的是2.5版, 美中不足就是点击打开关闭树节点时有点抖动过大,不知道后续版本是否已经改进?
帮忙看看 v3.0 beta,看看还有没有你说的抖动问题,如果有情况赶紧告诉我, 希望在正式版发布前尽可能解决更多的问题。 |
|
返回顶楼 | |
发表时间:2011-09-17
恩 支持zTree,上一次我差点也用zTree了,感觉界面显示和高数据量都没问题,只是不支持表格!
|
|
返回顶楼 | |
发表时间:2011-09-19
虽然不知道 你是谁,但是好像很牛B的样子。
|
|
返回顶楼 | |
发表时间:2011-09-27
mu0001 写道 虽然不知道 你是谁,但是好像很牛B的样子。 怎么看得出人家很NB的样子了,我看楼主很谦虚的希望完善问题,你上来就说人家很牛B的样子,我看你要么就是不会说话,要么就很装! |
|
返回顶楼 | |
发表时间:2011-09-28
<script type="text/javascript"> // zTree 的参数配置 var setting = { view: { //用于当鼠标移动到节点上时,显示用户自定义控件,显示隐藏状态同 zTree 内部的编辑、删除按钮 addHoverDom: addHoverDom, removeHoverDom: removeHoverDom, //设置是否允许同时选中多个节点。 selectedMulti: false }, edit: { enable: true, removeTitle: "删除维修类别", renameTitle: "编辑维修类别" }, data: { simpleData: { enable: true } }, async:{ enable: true }, //设置一些回调函数 callback: { beforeDrag: beforeDrag, //用于捕获节点被删除之前的事件回调函数,并且根据返回值确定是否允许删除操作 beforeRemove: beforeRemove, beforeRename: beforeRename, onExpand: onExpand } }; //zTree 的数据属性 var zNodes = <%= seriesData.ToString() %>; var className = "dark"; //禁止拖拽 function beforeDrag(treeId, treeNodes) { return false; } function onExpand(event, treeId, treeNode) { curExpandNode = treeNode; } //删除之前 function beforeRemove(treeId, treeNode) { className = (className === "dark" ? "" : "dark"); var zTree = $.fn.zTree.getZTreeObj("treeDemo"); zTree.selectNode(treeNode); $("#hidTranTypeId").val(treeNode.id); //判断是否是根节点 if($("#hidTranTypeId").val()==0){ alert("根节点禁止删除!"); return false; } if(confirm("确认删除 " + treeNode.name + " 事务分类吗?")){ if(!chenkTransTypeInEngineer(treeNode)&&!chenkTransTypeInRepairs(treeNode)){ removeNode(treeId, treeNode); }else{ alert("有维修人或维修单选择此事务,所以不允许删除!"); return false; } } } //判断是否是第一级的事务分类,是第一级,则返回true function validateIsFirst(treeNode){ var flag = true; $.ajax({ type: "POST", url: "AutoHandler.ashx", data: "type=validateIsFirst&id=" + treeNode.id, async: false, success: function (data) { if(data=="notFirst"){ flag=false; } } }); return flag; } //检查删除的事务在维修人员(一级),存在则返回true function chenkTransTypeInEngineer(treeNode){ var flag = true; if(!validateIsFirst(treeNode)){ flag = true; } $.ajax({ type: "POST", url: "AutoHandler.ashx", data: "type=chenkTransTypeInEngineer&id=" + treeNode.id, async: false, success: function (data) { if(data=="notHave"){ flag = false; } } }); return flag; } //检查删除的事务在维修单(一级、二级、三级)中是否存在,存在则返回true function chenkTransTypeInRepairs(treeNode){ var flag = true; $.ajax({ type: "POST", url: "AutoHandler.ashx", data: "type=chenkTransTypeInRepairs&id=" + treeNode.id, async: false, success: function (data) { if(data=="notHave"){ flag = false; } } }); return flag; } //删除节点 function removeNode(treeId, treeNode){ alert("准备删除"); $.post('AutoHandler.ashx', { type: 'deleteTranType', query: treeNode.id}, function (data) { if(data>0){ alert("删除成功"); }else{ // onRemove(treeId, treeNode) window.location.reload(); alert("删除失败"); } }); } function onRemove(treeId, treeNode){ var zTree = $.fn.zTree.getZTreeObj("treeDemo"); zTree.reAsyncChildNodes(treeNode, "refresh"); } //用于捕获节点编辑名称结束(Input 失去焦点 或 按下 Enter 键)之后 function beforeRename(treeId, treeNode, newName) { var zTree = $.fn.zTree.getZTreeObj("treeDemo"); className = (className === "dark" ? "" : "dark"); var regex = /^[^<>&;\'\"]*$/; //正则定义两种形式: //var pattern = new RegExp("\\d{9}","g"); //var pattern = /\d{9}/; if(!regex.test(newName)){ alert("不允许有特殊字符"); return false; } var flagName = true; //验证事务分类名称是否重复 $.ajax({ type: "POST", url: "AutoHandler.ashx", data: "type=chenkTransTypeByName&id=" + treeNode.id+"&name="+newName, async: false, success: function (data) { if(data=="error"){ alert("存在此名称"); flagName = false; } } }); if(!flagName){ return false; } if ((newName.length == 0) || (newName.length>15)) { alert("节点名称不能在1到15个字符."); return false; }else{ editName(treeId, treeNode, newName); } } //编辑名称 function editName(treeId, treeNode, newName){ var startName = treeNode.name; var zTree = $.fn.zTree.getZTreeObj("treeDemo"); $.post('AutoHandler.ashx', { type: 'updateTranType', query: treeNode.id,newName:newName}, function (data) { if(data>0){ zTree.updateNode(treeNode); }else{ treeNode.name=startName; zTree.updateNode(treeNode); alert("修改名称出错"); } }); } var newCount = 1; function addHoverDom(treeId, treeNode) { var sObj = $("#" + treeNode.tId + "_span"); if ($("#addBtn_" + treeNode.id).length > 0) return; var addStr = "<button type='button' class='add' id='addBtn_" + treeNode.id + "' title='添加维修类别' onfocus='this.blur();'></button>"; sObj.append(addStr); var level = treeNode.level; //限定只允许显示到系统第三级,树上显示到第四级(根节点) if(level>=3){ // $(".add").attr("display","none"); alert("只允许分类到第三级"); return false; } var btn = $("#addBtn_" + treeNode.id); if (btn) btn.bind("click", function () { //ajax获取准备插入数据的id,为取名排除重复 var beforeId=0; $.ajax({ type: "POST", url: "AutoHandler.ashx", data: "type=getID", async: false, success: function (result) { beforeId=result; } }); var zTree = $.fn.zTree.getZTreeObj("treeDemo"); //ajax添加事务分类 var resultId = 0;//返回的事务分类id $.ajax({ type: "POST", url: "AutoHandler.ashx", data: "type=addTranType&name=新事务分类"+beforeId+"&pId="+treeNode.id, async: false, success: function (data) { if(data>0){ resultId = data; return true; }else{ window.location.reload(); alert("添加事务分类出错"); return false; } } }); zTree.addNodes(treeNode, {id:resultId,pId: treeNode.id, name: "新事务分类"+beforeId },true); var node = zTree.getNodeByParam("id", resultId, null); //使得刚添加的事务分类处于编辑状态 zTree.editName(node); }); }; //用于当鼠标移出节点时,隐藏用户自定义控件,显示隐藏状态同 zTree 内部的编辑、删除按钮 function removeHoverDom(treeId, treeNode) { $("#addBtn_" + treeNode.id).unbind().remove(); }; $(document).ready(function () { //init,zTree 初始化方法,创建 zTree 必须使用此方法 $.fn.zTree.init($("#treeDemo"), setting, zNodes); }); </script> 1、这里的beforeRename方法为什么我回车,整个树都不显示了,但是当失去input焦点缺正常 2、removeNode方法中如果删除失败了,树上的应该仍然继续显示删除前的数据,我现在用window.location.reload(); 来进行显示删除前的数据,但是我不想这样,因为我的树默认是闭合的,如果刷新又会闭合了,所以,我想直接调用ztree里是否提供了什么方法,来显示删除前的数据。 求解!
|
|
返回顶楼 | |
发表时间:2011-10-23
关心节点异步取值。
|
|
返回顶楼 | |
发表时间:2011-10-25
xdwangiflytek 写道
<script type="text/javascript"> // zTree 的参数配置 var setting = { view: { //用于当鼠标移动到节点上时,显示用户自定义控件,显示隐藏状态同 zTree 内部的编辑、删除按钮 addHoverDom: addHoverDom, removeHoverDom: removeHoverDom, //设置是否允许同时选中多个节点。 selectedMulti: false }, edit: { enable: true, removeTitle: "删除维修类别", renameTitle: "编辑维修类别" }, data: { simpleData: { enable: true } }, async:{ enable: true }, //设置一些回调函数 callback: { beforeDrag: beforeDrag, //用于捕获节点被删除之前的事件回调函数,并且根据返回值确定是否允许删除操作 beforeRemove: beforeRemove, beforeRename: beforeRename, onExpand: onExpand } }; //zTree 的数据属性 var zNodes = <%= seriesData.ToString() %>; var className = "dark"; //禁止拖拽 function beforeDrag(treeId, treeNodes) { return false; } function onExpand(event, treeId, treeNode) { curExpandNode = treeNode; } //删除之前 function beforeRemove(treeId, treeNode) { className = (className === "dark" ? "" : "dark"); var zTree = $.fn.zTree.getZTreeObj("treeDemo"); zTree.selectNode(treeNode); $("#hidTranTypeId").val(treeNode.id); //判断是否是根节点 if($("#hidTranTypeId").val()==0){ alert("根节点禁止删除!"); return false; } if(confirm("确认删除 " + treeNode.name + " 事务分类吗?")){ if(!chenkTransTypeInEngineer(treeNode)&&!chenkTransTypeInRepairs(treeNode)){ removeNode(treeId, treeNode); }else{ alert("有维修人或维修单选择此事务,所以不允许删除!"); return false; } } } //判断是否是第一级的事务分类,是第一级,则返回true function validateIsFirst(treeNode){ var flag = true; $.ajax({ type: "POST", url: "AutoHandler.ashx", data: "type=validateIsFirst&id=" + treeNode.id, async: false, success: function (data) { if(data=="notFirst"){ flag=false; } } }); return flag; } //检查删除的事务在维修人员(一级),存在则返回true function chenkTransTypeInEngineer(treeNode){ var flag = true; if(!validateIsFirst(treeNode)){ flag = true; } $.ajax({ type: "POST", url: "AutoHandler.ashx", data: "type=chenkTransTypeInEngineer&id=" + treeNode.id, async: false, success: function (data) { if(data=="notHave"){ flag = false; } } }); return flag; } //检查删除的事务在维修单(一级、二级、三级)中是否存在,存在则返回true function chenkTransTypeInRepairs(treeNode){ var flag = true; $.ajax({ type: "POST", url: "AutoHandler.ashx", data: "type=chenkTransTypeInRepairs&id=" + treeNode.id, async: false, success: function (data) { if(data=="notHave"){ flag = false; } } }); return flag; } //删除节点 function removeNode(treeId, treeNode){ alert("准备删除"); $.post('AutoHandler.ashx', { type: 'deleteTranType', query: treeNode.id}, function (data) { if(data>0){ alert("删除成功"); }else{ // onRemove(treeId, treeNode) window.location.reload(); alert("删除失败"); } }); } function onRemove(treeId, treeNode){ var zTree = $.fn.zTree.getZTreeObj("treeDemo"); zTree.reAsyncChildNodes(treeNode, "refresh"); } //用于捕获节点编辑名称结束(Input 失去焦点 或 按下 Enter 键)之后 function beforeRename(treeId, treeNode, newName) { var zTree = $.fn.zTree.getZTreeObj("treeDemo"); className = (className === "dark" ? "" : "dark"); var regex = /^[^<>&;\'\"]*$/; //正则定义两种形式: //var pattern = new RegExp("\\d{9}","g"); //var pattern = /\d{9}/; if(!regex.test(newName)){ alert("不允许有特殊字符"); return false; } var flagName = true; //验证事务分类名称是否重复 $.ajax({ type: "POST", url: "AutoHandler.ashx", data: "type=chenkTransTypeByName&id=" + treeNode.id+"&name="+newName, async: false, success: function (data) { if(data=="error"){ alert("存在此名称"); flagName = false; } } }); if(!flagName){ return false; } if ((newName.length == 0) || (newName.length>15)) { alert("节点名称不能在1到15个字符."); return false; }else{ editName(treeId, treeNode, newName); } } //编辑名称 function editName(treeId, treeNode, newName){ var startName = treeNode.name; var zTree = $.fn.zTree.getZTreeObj("treeDemo"); $.post('AutoHandler.ashx', { type: 'updateTranType', query: treeNode.id,newName:newName}, function (data) { if(data>0){ zTree.updateNode(treeNode); }else{ treeNode.name=startName; zTree.updateNode(treeNode); alert("修改名称出错"); } }); } var newCount = 1; function addHoverDom(treeId, treeNode) { var sObj = $("#" + treeNode.tId + "_span"); if ($("#addBtn_" + treeNode.id).length > 0) return; var addStr = "<button type='button' class='add' id='addBtn_" + treeNode.id + "' title='添加维修类别' onfocus='this.blur();'></button>"; sObj.append(addStr); var level = treeNode.level; //限定只允许显示到系统第三级,树上显示到第四级(根节点) if(level>=3){ // $(".add").attr("display","none"); alert("只允许分类到第三级"); return false; } var btn = $("#addBtn_" + treeNode.id); if (btn) btn.bind("click", function () { //ajax获取准备插入数据的id,为取名排除重复 var beforeId=0; $.ajax({ type: "POST", url: "AutoHandler.ashx", data: "type=getID", async: false, success: function (result) { beforeId=result; } }); var zTree = $.fn.zTree.getZTreeObj("treeDemo"); //ajax添加事务分类 var resultId = 0;//返回的事务分类id $.ajax({ type: "POST", url: "AutoHandler.ashx", data: "type=addTranType&name=新事务分类"+beforeId+"&pId="+treeNode.id, async: false, success: function (data) { if(data>0){ resultId = data; return true; }else{ window.location.reload(); alert("添加事务分类出错"); return false; } } }); zTree.addNodes(treeNode, {id:resultId,pId: treeNode.id, name: "新事务分类"+beforeId },true); var node = zTree.getNodeByParam("id", resultId, null); //使得刚添加的事务分类处于编辑状态 zTree.editName(node); }); }; //用于当鼠标移出节点时,隐藏用户自定义控件,显示隐藏状态同 zTree 内部的编辑、删除按钮 function removeHoverDom(treeId, treeNode) { $("#addBtn_" + treeNode.id).unbind().remove(); }; $(document).ready(function () { //init,zTree 初始化方法,创建 zTree 必须使用此方法 $.fn.zTree.init($("#treeDemo"), setting, zNodes); }); </script> 1、这里的beforeRename方法为什么我回车,整个树都不显示了,但是当失去input焦点缺正常 2、removeNode方法中如果删除失败了,树上的应该仍然继续显示删除前的数据,我现在用window.location.reload(); 来进行显示删除前的数据,但是我不想这样,因为我的树默认是闭合的,如果刷新又会闭合了,所以,我想直接调用ztree里是否提供了什么方法,来显示删除前的数据。 求解!
不好意思,居然刚看到这篇,不过貌似你是不是给我发过email了? 不管那么多,总之,这个问题就是处在 removeNode 方法也会触发beforeName回调,因此容易造成死循环,我已经将此问题记录下来,请参考 http://ztreeapi.iteye.com/blog/1169368 中的 “12、【修改】”
|
|
返回顶楼 | |