zTree删除父节点

Tony_Tony_ 发布于 2017/07/31 09:43
阅读 597
收藏 0

【开源中国 APP 全新上线】“动弹” 回归、集成大模型对话、畅读技术报告”

@zTree 你好,想跟你请教个问题:请问一下大神,zTree在删除父节点时,需要判断是否有子节点,如果有就提示不能删除,如果没有,就可以删除了?我用的beforeRemove。。。

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
    String path = request.getContextPath();
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>用户管理系统</title>
<link href="<%=path%>/bootstrap_ace/ace/css/bootstrap.css" rel="stylesheet" />
<link href="<%=path%>/bootstrap_ace/bootstrap-table/bootstrap-table.css" rel="stylesheet" />
<link href="<%=path%>/plugins/select2/select2.min.css" rel="stylesheet" />
<link href="<%=path%>/js/jAlert/alert.css" rel="stylesheet" />

<link rel="stylesheet" href="<%=path%>/bootstrap_ace/ace/css/datepicker.css" />
<link rel="stylesheet" href="<%=path%>/bootstrap_ace/ace/css/bootstrap-timepicker.css" />
<link rel="stylesheet" href="<%=path%>/bootstrap_ace/ace/css/daterangepicker.css" />
<link rel="stylesheet" href="<%=path%>/bootstrap_ace/ace/css/chosen.css" />
<%-- <link rel="stylesheet" href="<%=path%>/css/zTreeStyle/metro.css"> --%>
<link rel="stylesheet" href="<%=path%>/css/css/demo.css">
<link rel="stylesheet" href="<%=path%>/css/css/zTreeStyle/zTreeStyle.css">

<script src="<%=path%>/js/ace/jquery.js"></script>
<%-- <script src="<%=path%>/js/ace/bootstrap.js"></script> --%>
<script src="<%=path%>/js/ace/jquery.ztree.all-3.5.js"></script>
<script src="<%=path%>/js/ace/jquery.ztree.core-3.5.js"></script>
<script src="<%=path%>/js/ace/jquery.ztree.excheck-3.5.js"></script>
<script src="<%=path%>/js/ace/jquery.ztree.exedit-3.5.js"></script>
<script src="<%=path%>/bootstrap_ace/ace/js/bootstrap-multiselect.js"></script>
<script src="<%=path%>/bootstrap_ace/bootstrap-table/bootstrap-table.js"></script>
<script src="<%=path%>/bootstrap_ace/bootstrap-table/extensions/filter-control/bootstrap-table-filter-control.js"></script>
<script src="<%=path%>/bootstrap_ace/bootstrap-table/bootstrap-table-zh-CN.js"></script>
<script src="<%=path%>/plugins/select2/select2.js"></script>
<script src="<%=path%>/js/jAlert/alert.js"></script>
<script src="<%=path%>/js/jAlert/myAlert.js"></script>
<script    src="<%=path%>/js/myCommon.js?v=<%=com.htfg.vpms.common.SysConfig.sysVersion%>"></script>

<script src="<%=path%>/Scripts/AllocationManager/Allocation.js?v=<%=com.htfg.vpms.common.SysConfig.sysVersion%>"></script>
<%-- <script src="<%=path%>/bootstrap_ace/ace/js/date-time/bootstrap-datepicker.js"></script>
<script src="<%=path%>/bootstrap_ace/ace/js/date-time/bootstrap-timepicker.js"></script> --%>
<script src="<%=path%>/bootstrap_ace/ace/js/date-time/moment.js"></script>
<script src="<%=path%>/bootstrap_ace/ace/js/date-time/daterangepicker.js"></script>
<%-- <script src="<%=path%>/bootstrap_ace/ace/js/ace-elements.js"></script> --%>
<!-- <script src="<%=path%>/bootstrap_ace/ace/js/date-time/locales/bootstrap-datetimepicker.zh-CN.js"></script>-->
<%-- <script src="<%=path%>/bootstrap_ace/ace/js/chosen.jquery.js"></script> --%>
<style type="text/css">
/* .form-control {
  height: 30px;
} */
body {
    font-size: 12px;
    overflow-x : hidden;
    overflow-y : visible;
}
.ztree li span.button.add {
    margin-left: 2px;
    margin-right: -1px;
    background-position: -144px 0;
    vertical-align: top;
    *vertical-align: middle
}
.modal{
  overflow: auto !important;
  width:auto;
}
.scroll {
    height: 260px;
    width: 100%;
    border: 1px solid #cecece;
    overflow-y: scroll;
    text-align: center;
    background-color: #F0F0F0;
}
.modal-dialog {
    width: 750px;
    margin-top: 30px;
}
.audiotest{
    cursor: pointer;
}

.audiotest:hover {
    background:#ccc;
    text-decoration: none;
}
.msg {
    background-color: #6fb3e0;
    /* font-size: 15px; */
    font-weight: bolder;
    color: white;
}

.msg a {
    color: white;
}
.radio, .checkbox {
    position: relative;
    display: block;
    margin-left:5px;
    margin-top: 0;
    margin-bottom: 0;
}
.myselect{
    display: inline-block;
    height: 34px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #555555;
    background-color: #ffffff;
    background-image: none;
    border: 1px solid #cccccc;
    border-radius: 4px;
}
.select2-container-multi .select2-choices {
    min-height: 34px;
  max-height: 34px;
  overflow-y:auto;
}
.select2-container .select2-selection--multiple {
    box-sizing: border-box;
    cursor: pointer;
    display: block;
    min-height: 34px;
    max-height:34px;
    overflow-y:auto;
    user-select: none;
    -webkit-user-select: none;
}
.select2-container--default .select2-selection--multiple .select2-selection__rendered {
    box-sizing: border-box;
    list-style: none;
    margin: 0;
    padding: 0 5px;
    width: 100%;
    line-height: 20px;
}
.select2-container .select2-selection--single {
    box-sizing: border-box;
    cursor: pointer;
    display: block;
    height: 34px;
    user-select: none;
    -webkit-user-select: none;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #444;
    line-height: 34px;
}
.select2-container--default.select2-container--focus .select2-selection--multiple{
border:solid #66afe9 1px;
outline:0;
}
</style>
</head>
<body style="margin: auto;height:100%;">
<script>
    var zTree;
    var newCount=0;
    var demoIframe;
    var treeNodes;
    
    //增加时绑定删除
    function removeHoverDom(treeId, treeNode) {
       $("#addBtn_"+treeNode.tId).unbind().remove();
       $("#removeBtn_"+treeNode.tId).unbind().remove();
       $("#editBtn_"+treeNode.tId).unbind().remove();
    };
    
    //配置
    var setting = {
        check: {//复选框
            enable: false
        },
        view: {
            expandSpeed : "slow",  
            addHoverDom: addHoverDom,
            removeHoverDom: removeHoverDom,
            dblClickExpand: false,
            showLine: true,
            selectedMulti: false
        },
        data: {
            key:{
                children: "children",
            },
            simpleData: {
                enable:true,
                idKey: "id",
                pIdKey: "pId",
                rootPId: ""
            },
            keep:{
                leaf:true,
                parent:true
                }
        },
        edit: {
            enable: true,
            showRemoveBtn: showRemoveBtn,
            showRenameBtn: showRenameBtn,
            //showRemoveBtn: true,
            //removeTitle: "删除节点",
            //showRenameBtn: true,
            //renameTitle: "编辑节点名称",
            editNameSelectAll:true//修改时,节点内容全部选中
        },
         callback: {
             //beforeExpand:beforeExpand,
             //onAsyncSuccess:onAsyncSuccess,
             //onAsyncError:onAsyncError,
            // beforeDrag:beforeDrag,
             beforeRemove : beforeRemove,  
             //beforeEditName:beforeEditName,
             beforeRename : beforeRename,
             /* onClick:function zTreeOnClick(event, treeId, treeNode){
                    alert(treeNode.tId + ", " + treeNode.name+", "+treeId);
                    var ids=[];
                    ids=getChildren(ids,treeNode); */
             //onCheck:onCheck
             /* beforeClick: function(treeId, treeNode) {
                var zTree = $.fn.zTree.getZTreeObj("tree");
                if (treeNode.isParent) {
                    zTree.expandNode(treeNode);
                    return false;
                } else {
                    demoIframe.attr("src",treeNode.file + ".html");
                    return true;
                }
            }  */
        }
         }
        //}
  
    //是否显示编辑按钮    
    function showRenameBtn(treeId, treeNode) {    
       //获取节点所配置的noEditBtn属性值              
       if (treeNode.noEditBtn != undefined && treeNode.noEditBtn) {    
           return false;    
    } else    
           return true;    
    }
    
    //是否显示删除按钮   
    function showRemoveBtn(treeId, treeNode) {    
       //获取节点所配置的noEditBtn属性值              
       if (treeNode.noRemoveBtn != undefined && treeNode.noRemoveBtn) {    
           return false;    
    } else    
           return true;    
    }
    
    //初始化目录树
    $(document).ready(function(){        
        $.ajax({  
            async : false,  
            cache:false,  
            type: 'POST',  
            url: "<%=path%>/CaseLibrary/caseLibraryQuery.do",
            error: function () {//请求失败处理函数  
                alert('请求失败');  
            },  
            success:function(data){ //请求成功后处理函数。    
                /* var zTree = $.fn.zTree.getZTreeObj("tree");
                var srcNode = zTree.getSelectedNodes();
                var isNode = srcNode[0];
                if(isNode.children.length()>0){
                    alert(1);
                    } */
                treeNodes = data.rows;
                $.each(treeNodes,function(index,node){
                    if(node.level==1){
                        node.noRemoveBtn=true;
                        node.noEditBtn=true;
                        node.open=true;
                        node.isParent=true;
                        //return false;
                    }
                    if(node.level==2){
                        node.open=true;
                        node.isParent=true;
                    }
                    
                    
                });
                var t = $("#tree");
                t = $.fn.zTree.init(t, setting, treeNodes);
                demoIframe = $("#testIframe");
                demoIframe.bind("load", loadReady);
                var zTree = $.fn.zTree.getZTreeObj("tree");
            }  
        }); 
    });
    
    //节点展开
    /* function beforeExpand(treeNode){
        if(!treeNodes.isAjaxing){
            startTime=new Date();
            treeNode.times=1;
            ajaxGetNodes(treeNode,"refresh");
            return true;
        }else{
            alert("zTree正在下载数据中,请稍后展开节点。。。");
            return false;
        }
    } */

    
   /*  if(treeNode.isParent){  
        var childNodes = zTree.removeChildNodes(treeNode);  
        var paramsArray = new Array();  
        for(var i = 0; i < childNodes.length; i++){  
            paramsArray.push(childNodes[i].id);  
        }  
        alert("删除父节点的id为:"+treeNode.id+"\r\n他的孩子节点有:"+paramsArray.join(","));  
        return;  
    }  
    alert("你点击要删除的节点的名称为:"+treeNode.name+"\r\n"+"节点id为:"+treeNode.id);   */
    
    /**  
     * 删除选中的子节点  
     */  
    /* function removeChildNodes()  
    {  
        var treeObj = $.fn.zTree.getZTreeObj("tree");  
        //选中节点  
        var nodes = treeObj.getSelectedNodes();  
        for (var i=0, l=nodes.length; i < l; i++)   
        {  
            //删除选中的子节点  
            treeObj.removeChildNodes(nodes[i]);  
        }  
    }  */ 
    
    /* function treenodeClick(event, treeId, treeNode, clickFlag) {
        //此处treeNode 为当前节点
         var str ='' ;
         str = getAllChildrenNodes(treeNode,str);
         alert(str); //所有叶子节点ID
    }
     
    function getAllChildrenNodes(treeNode,result){
          if (treeNode.isParent) {
            var childrenNodes = treeNode.children;
            if (childrenNodes) {
                for (var i = 0; i < childrenNodes.length; i++) {
                    result += ',' + childrenNodes[i].id;
                    result = getChildNodes(childrenNodes[i], result);
                }
            }
        }
        return result;
    } */
    
    /* function getChildren(ids,treeNode){
        ids.push(treeNode.id);
         if (treeNode.isParent){
                for(var obj in treeNode.children){
                    getChildren(ids,treeNode.children[obj]);
                }
            }
         return ids;
    } */
    
    //删除节点
    function beforeRemove(treeId, treeNode) {
        debugger;
        myConfirm('消息提示框','确认删除--'+ treeNode.name +'--节点吗?',function(){
            //debugger;
            var param = "id=" + treeNode.id;
            
            /* if(treeNode.isParent){
            var childNodes = zTree.removeNode(treeNode);  
            var paramsArray = new Array();  
            for(var i = 0; i < childNodes.length; i++){  
                paramsArray.push(childNodes[i].id);  
            }
            } */
            
            $.ajax({
                url: "<%=path%>/CaseLibrary/DataBaseSUD.do?type=3&"+param,
                type: "POST",
                async: false,
                success: function (res) {
                    if (res = "success") {
                        //myAlert("消息提示框","删除成功!",function(){
                            window.location.reload();
                        //});                        
                    } else {
                        myAlert("消息提示框","删除失败!",function(){
                            window.location.reload();
                        });
                    }
                }
            });
            
            });
         return false;
        }
    
    
    //修改节点
    function beforeRename(treeId,treeNode,newName){
        if(newName.length==0){
            myAlert("消息提示框","节点名称不能为空");
            setTimeout(function(){zTree.editName(treeNode)},10);
            return false;
        }
        var param="id="+treeNode.id+"&level="+treeNode.level+"&sort="+treeNode.sort+"&pId="+treeNode.pId+"&name="+newName+"&remark="+treeNode.remark;
        $.post("<%=path%>/CaseLibrary/DataBaseSUD.do?type=2&"+param,function(data){});
    }
    
    /*
    if (addbtn) addbtn.bind("click", function(){
            var zTree = $.fn.zTree.getZTreeObj("tree");
            //$("#addDiv").show();
            zTree.addNodes(treeNode, {id:(1000 + newCount), pId:treeNode.id, name:"子节点" + (newCount++)});
            return false; 
        }) /* else{
            var zTree = $.fn.zTree.getZTreeObj("tree");
            $("#addDiv").hide();
        }; 
    */
    
    //新增节点
    function addHoverDom(treeId, treeNode) {
        var addStr;
        if(treeNode.level<2){
            //if(treeNode.name.indexOf("结束")<0){
                addStr = "<span class='button add' id='addBtn_" + treeNode.tId + "' title='添加节点'></span>";
            //}
        }
        var sObj = $("#" + treeNode.tId + "_span");
        if (treeNode.editNameFlag || $("#addBtn_"+treeNode.tId).length>0) return;             
        sObj.after(addStr);
        var addbtn = $("#addBtn_"+treeNode.tId);
        if (addbtn) addbtn.bind("click", function(){
            var zTree = $.fn.zTree.getZTreeObj("tree");
            $("#addDiv").show();
            var pId = treeNode.id;
            $("#addPId").val(pId);
            var level = treeNode.level+2;
            $("#addLevel").val(level);
        });
    };
    
    //取消添加案例
    function removeAddDiv(){
        $("#addCase").val(null);
        $("#addDiv").hide();
    }
    
    <%-- $("#btn_save").click(function(){
        $.post("<%=path%>/CaseLibrary/caseLibraryQuery.do",function(data){
            var treeNodes = data.rows;
            alert(treeNodes);
        })
    }) --%>
        
    
    
    //保存按钮的方法
    function saveAddDiv(){
        debugger;
        var reg=/^[\u4e00-\u9fa5a-zA-Z0-9]+$/;
        var name = $("#addCase").val();
        var pId = $("#addPId").val();
        var level =$("#addLevel").val();
        if(name==""){
            myAlert("消息提示框","案例名称不能为空!");
            return;
        }else if(!reg.test(name)){
            myAlert("消息提示框","案例名称只能是字母、数字和汉字,请重新填写!");
            return;
        }else{
            var param = "pId="+pId+"&level="+level+"&name="+name;
            $.ajax({
                url: "<%=path%>/CaseLibrary/DataBaseSUD.do?type=1&"+param,
                type: "POST",
                async: false,
                success: function (res) {
                    if (res = "success") {
                        //myAlert("消息提示框","新增成功!",function(){
                            window.location.reload();
                            $("#addCase").val("");
                            $("#addDiv").hide();
                        //});                        
                    } else {
                        myAlert("消息提示框","新增失败!",function(){
                            window.location.reload();
                            $("#addCase").val("");
                            $("#addDiv").hide();
                        });
                    }
                }
            });
        }
        return false;
    }
    

    <%-- var Ppname = prompt("请输入新节点名称 : ");
            if(Ppname==null){
                return;
            }else if(Ppname==""){
                alert("节点名称不能为空");
            }else{
                var temp = treeNode.level+2;
                var param = "pId="+treeNode.id+"&level="+temp+"&name="+Ppname;
                var zTree = $.fn.zTree.getZTreeObj("tree");
                $.post("<%=path%>/CaseLibrary/DataBaseSUD.do?type=1&"+param,function(data){
                    if($.trim(data)!=null){
                        var treenode = $.trim(data);
                        console.log(treenode);
                        alert("----------"+treeNode.id);
                        zTree.addNodes(treeNode,{id:treenode,pId:treeNode.id,name:Ppname},true);
                    }
                });
            }
            return false; --%>
            
    
    //控制高度
    function loadReady() {
        var bodyH = demoIframe.contents().find("body").get(0).scrollHeight,
                htmlH = demoIframe.contents().find("html").get(0).scrollHeight,
                maxH = Math.max(bodyH, htmlH), minH = Math.min(bodyH, htmlH),
                h = demoIframe.height() >= maxH ? minH:maxH ;
        if (h < 2000) h = 2000;
        demoIframe.height(h);
    }
</script>
<div class="span">
<div class="col-sm-4">
<div>
 <ul id="tree" class="ztree"></ul>                    
</div>
</div>

<div class="col-sm-8" style="margin-top:20px" id="addDiv" hidden>
<div class="panel panel-default" id="hideOrShow" style="width:400px;">
    <div class="panel-heading">新增案例</div>
    <div class="panel-body">
    <form id="formSearch" class="form-horizontal">
        <div class="form-group"  style="margin-top:20px">
            <label class="control-label col-sm-4" for="addCase">案例名称</label>
            <div class="col-sm-6">
                <input type="text" class="form-control" name="addCase" id="addCase">
               </div>
        </div>
        
        <div class="form-group">
            <div class="col-sm-6">
                <input type="hidden" class="form-control" name="addPId" id="addPId">
               </div>
        </div>
        
        <div class="form-group">
            <div class="col-sm-6">
                <input type="hidden" class="form-control" name="addLevel" id="addLevel">
               </div>
        </div>
        
        
        <div class="form-group" style="margin-top:20px;margin-bottom:20px">
        <div class="col-sm-1" >
            <!-- <button type="button" class="btn btn-default" style="margin-left:140px" data-dismiss="modal" id="btn_save">
                <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>保存
            </button> -->
                <button type="button" style="margin-left:140px" id="btn_save" class="btn btn-primary" onClick="saveAddDiv();">保存</button>
            </div>
            <div class="col-sm-1" style="text-align:left;">
                <button type="button" class="btn btn-default" style="margin-left:210px" data-dismiss="modal" id="btn_del" onClick="removeAddDiv();">
                    <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>取消
                </button>
            </div>
        </div>
     </form>
     </div>
</div>
</div>
</div>                        
</body>
</html>

加载中
OSCHINA
登录后可查看更多优质内容
返回顶部
顶部