论坛首页 Web前端技术论坛

zTree 正式搬家到 iteye

浏览 56500 次
该帖已经被评为精华帖
作者 正文
   发表时间:2011-09-15  
欢迎~~支持一下。
0 请登录后投票
   发表时间:2011-09-16  
冬之语2008 写道
flex版的tree也可以的吧!

zTree就是 js版的,没有flex 版的哟
0 请登录后投票
   发表时间:2011-09-16  
最近项目就是用这个, 非常不错的插件 当时用的是2.5版, 美中不足就是点击打开关闭树节点时有点抖动过大,不知道后续版本是否已经改进?
0 请登录后投票
   发表时间:2011-09-16  
汉唐铁骑破虏用刀 写道
最近项目就是用这个, 非常不错的插件 当时用的是2.5版, 美中不足就是点击打开关闭树节点时有点抖动过大,不知道后续版本是否已经改进?

帮忙看看 v3.0 beta,看看还有没有你说的抖动问题,如果有情况赶紧告诉我, 希望在正式版发布前尽可能解决更多的问题。
0 请登录后投票
   发表时间:2011-09-17  
恩 支持zTree,上一次我差点也用zTree了,感觉界面显示和高数据量都没问题,只是不支持表格!
0 请登录后投票
   发表时间:2011-09-19  
B
0 请登录后投票
   发表时间:2011-09-27  
mu0001 写道
B

怎么看得出人家很NB的样子了,我看楼主很谦虚的希望完善问题,你上来就说人家很牛B的样子,我看你要么就是不会说话,要么就很装!
0 请登录后投票
   发表时间: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里是否提供了什么方法,来显示删除前的数据。

求解!

 

0 请登录后投票
   发表时间:2011-10-23  
关心节点异步取值。
0 请登录后投票
   发表时间: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、【修改】”

 

 

0 请登录后投票
论坛首页 Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics