【ztree】zTree节点增删改

最新推荐文章于 2021-03-27 21:48:00 发布

weixin_33856370

最新推荐文章于 2021-03-27 21:48:00 发布

阅读量201

点赞数

文章标签： javascript ViewUI

　　今天遇到一个需求是对zTree的节点进行增删改,经过查阅资料总结如下:

效果:

完成增删改，要注意几个关键点：

使用编辑功能，必须设置 setting.edit 中的各个属性
使用编辑功能的事件回调函数，必须设置 setting.callback.beforeRemove / onRemove / beforeRename / onRename 等属性
zTree 不提供默认的增加按钮，如要实现需要利用自定义控件的方法 addHoverDom / removeHoverDom
我们利用 beforeEditName 来触发自定义的编辑操作

首先，我们来看看具体的配置信息（详细内容见代码中的注释）:

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>zTree测试</title>
        <link rel="stylesheet" type="text/css" href="css/demo.css" />
        <link rel="stylesheet" type="text/css" href="css/zTreeStyle/zTreeStyle.css" />
        <script src="js/jquery-1.4.4.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="js/jquery.ztree.all.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <script type="text/javascript">
    var zTree;
    var setting = {
            view:{
                addHoverDom:addHoverDom,
                removeHoverDom:removeHoverDom,
                selectedMulti:false
            },
            edit: {
                enable: true,
                editNameSelectAll:true,
                removeTitle:'删除',
                renameTitle:'重命名'
            },
            data: {
                /* keep:{
                    parent:true,
                    leaf:true
                }, */
                simpleData: {
                    enable: true
                }
            },
            callback:{
                beforeRemove:beforeRemove,//点击删除时触发，用来提示用户是否确定删除（可以根据返回值 true|false 确定是否可以删除）
                beforeEditName: beforeEditName,//点击编辑时触发，用来判断该节点是否能编辑
                beforeRename:beforeRename,//编辑结束时触发，用来验证输入的数据是否符合要求(也是根据返回值 true|false 确定是否可以编辑完成)
                onRemove:onRemove,//(beforeRemove返回true之后可以进行onRemove)删除节点后触发，用户后台操作
                onRename:onRename,//编辑后触发，用于操作后台
                beforeDrag:beforeDrag,//用户禁止拖动节点
                onClick:clickNode//点击节点触发的事件
            }
        };
    var zNodes =[
                 { id:1, pId:0, name:"父节点 1", open:true},
                 { id:11, pId:1, name:"去百度",url:'http://www.baidu.com',target:'_blank'},
                 { id:12, pId:1, name:"叶子节点 1-2"},
                 { id:13, pId:1, name:"叶子节点 1-3"},
                 { id:2, pId:0, name:"父节点 2", open:true},
                 { 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},
                 { id:31, pId:3, name:"叶子节点 3-1"},
                 { id:32, pId:3, name:"叶子节点 3-2"},
                 { id:33, pId:3, name:"叶子节点 3-3"}
             ];
    $(document).ready(function(){
        zTree = $.fn.zTree.init($("#tree"), setting, zNodes);
    });
    function beforeRemove(e,treeId,treeNode){
        return confirm("你确定要删除吗？");
    }
    function onRemove(e,treeId,treeNode){
        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 beforeEditName(treeId,treeNode){
        /* if(treeNode.isParent){
            alert("不准编辑非叶子节点！");
            return false;
        } */
        return true;
    }
    function beforeRename(treeId,treeNode,newName,isCancel){
        if(newName.length < 3){
            alert("名称不能少于3个字符！");
            return false;
        }
        return true;
    }
    function onRename(e,treeId,treeNode,isCancel){
        alert("修改节点的id为："+treeNode.id+"\n修改后的名称为："+treeNode.name);
    }
    function clickNode(e,treeId,treeNode){
        if(treeNode.id == 11){
            location.href=treeNode.url;
        }else{
            alert("节点名称："+treeNode.name+"\n节点id："+treeNode.id);
        }
    }
    function beforeDrag(treeId,treeNodes){
        return false;
    }
    var newCount = 1;
    function addHoverDom(treeId,treeNode){
        var sObj = $("#" + treeNode.tId + "_span");
        if (treeNode.editNameFlag || $("#addBtn_"+treeNode.tId).length>0) return;
        var addStr = "<span class='button add' id='addBtn_" + treeNode.tId
            + "' title='添加子节点' οnfοcus='this.blur();'></span>";
        sObj.after(addStr);
        var btn = $("#addBtn_"+treeNode.tId);
        if (btn) btn.bind("click", function(){
            //在这里向后台发送请求保存一个新建的叶子节点，父id为treeNode.id,让后将下面的100+newCount换成返回的id
            //zTree.addNodes(treeNode, {id:(100 + newCount), pId:treeNode.id, name:"新建节点" + (newCount++)});
            alert("开始添加节点")
            return false;
        });
    }
    function removeHoverDom(treeId,treeNode){
        $("#addBtn_"+treeNode.tId).unbind().remove();
    }
    </script>
<body>
    <ul id="tree" class="ztree"></ul>
</body>
</html>

最后附一个完整的与后台交互的例子:

/***********S  QLQ*********************/
var zTree;
var setting = {
    view : {
        addHoverDom : addHoverDom,
        removeHoverDom : removeHoverDom,
        selectedMulti : false
    },
    edit : {
        enable : true,
        editNameSelectAll : true,
        removeTitle : '删除',
        renameTitle : '重命名'
    },
    data : {
        key : {
            name:"typeName"
        },
        /* keep:{
            parent:true,
            leaf:true
        }, */
        simpleData : {
            enable : true,
            idKey: "typeId",
            pIdKey: "upId",
            rootPId: 1
        }
    },
    callback : {
        beforeRemove : beforeRemove,//点击删除时触发，用来提示用户是否确定删除
        beforeEditName : beforeEditName,//点击编辑时触发，用来判断该节点是否能编辑,是否进入编辑状态
        beforeRename : beforeRename,//编辑结束时触发，用来验证输入的数据是否符合要求
        onRemove : onRemove,//删除节点后触发，用户后台操作
        onRename : onRename,//编辑后触发，用于操作后台
        onClick : clickNode
    //点击节点触发的事件
    }
};
function geneTypeTree(){
    $.getJSON(contextPath+"/trainacontentType_getTraincontenttypeTree.action",function(response){
        var zNodes = response.traincontenttypeTree;
        zTree = $.fn.zTree.init($("#tree"),setting,zNodes);
    });
}

$(document).ready(function() {
    geneTypeTree();
                });


/******S  删除*******/
function beforeRemove(treeId, treeNode) {
    if(confirm("确认删除?\n将会删除下面的所有视频！")){
        if(treeNode.isParent){
            alert("该目录下面还有子目录，请从最底层目录开始删除!");
            return false;
        }
        return true;
    }
    return false;
}
function onRemove(e, treeId,treeNode) {
    var typeId = treeNode.typeId;
    $.post(contextPath+"/trainacontentType_deleteTrainContentTypeById.action",
            {"typeId":typeId},
            function(repsonse){
                alert(repsonse.result);
                if("删除成功"==repsonse.result)//删除成功之后执行查询
                    btnFindFy();
            }
            ,'json')
    
    
}
/******E  删除*******/

function beforeEditName(treeId,treeNode) {
    /* if(treeNode.isParent){
        alert("不准编辑非叶子节点！");
        return false;
    } */
    return true;
}

function beforeRename(treeId,treeNode, newName,isCancel) {
    if (newName.length < 3) {
        alert("名称不能少于3个字符！");
        return false;
    }
    return true;
}
function onRename(e, treeId,treeNode, isCancel) {
    if(confirm("您确认修改类别名称?")){
        $.post(contextPath+"/trainacontentType_updateTraincontenttypeName.action",
                {
            "traincontenttype.typeid":treeNode.typeId,
            "traincontenttype.typename":treeNode.typeName
                },
                function(response){
                    if(response != null){
                        if("修改成功"==response.result){
                            alert(response.result);
                        }
                    }
                }
                ,
        'json');
    }
}

/************S   点击事件*********/
function clickNode(e, treeId,treeNode) {
    $("#trainContentTypeId").val(treeNode.typeId);//向隐藏的类别编号赋值
    $("[name='typeId']").val(treeNode.typeId);//向隐藏的类别编号赋值
    $("#yeHao").val("1");
    btnFindFy();
}
/************E   点击事件*********/


function addHoverDom(treeId,treeNode) {
    var sObj = $("#"+ treeNode.tId+ "_span");
    if (treeNode.editNameFlag|| $("#addBtn_"+ treeNode.tId).length > 0)
        return;
    var addStr = "<span class='button add' id='addBtn_"+ treeNode.tId+ "' title='添加子节点' οnfοcus='this.blur();'></span>";
    sObj.after(addStr);
    var btn = $("#addBtn_"+ treeNode.tId);
    if (btn)btn.bind("click",function() {
                            if(confirm("确认在该目录下面添加培训内容类别?")){
                                var typeName = prompt("请输入类别名称");//获取到的名字
                                if(typeName != null){//点击确定
                                    if(typeName.length>1){
                                        var upId = treeNode.typeId;//上级编号
                                        $.post(contextPath+"/trainacontentType_addTraincontenttype.action",
                                                {
                                                    "traincontenttype.upid":upId,
                                                    "traincontenttype.typename":typeName
                                                },
                                                function(response){
                                                    if(response!=null){
                                                        alert(response.result);
                                                    }
                                                    if(response.result == "添加成功" ){
                                                        var traincontenttype = response.traincontenttype;//获取返回来的数据
                                                        zTree.addNodes(treeNode, {typeId:traincontenttype.typeid, upId:treeNode.id, typeName:typeName});
                                                    }
//                                                    geneTypeTree();
                                                },
                                            'json');
                                    }else{
                                        alert("请输入正确的类别名称")
                                    }
                                }
                            }
                            //在这里向后台发送请求保存一个新建的叶子节点，父id为treeNode.id,让后将下面的100+newCount换成返回的id
                            //zTree.addNodes(treeNode, {id:(100 + newCount), pId:treeNode.id, name:"新建节点" + (newCount++)});
                            return false;
                        });
}
function removeHoverDom(treeId,treeNode) {
    $("#addBtn_" + treeNode.tId).unbind().remove();
}

下面附一个更加详细的最近用到的树：　　（包含展开所有节点，点击，重命名，删除，添加等事件，以及验证操作）

/********S   左边树相关操作**********/
/**
 * 查询课程类别树结构
 */
function getTypeTree(){
    $.getJSON(contextPath + '/courseType/getTypeTree.do',{"trainSchemeId":$("#trainSchemeId").val()},geneTypeTree);
}

/**
 * 生成课程类别树函数
 * @param typeTree  返回的课程类别信息(多一条虚拟的课程类别节点)
 */
function geneTypeTree(typeTree){
    var setting = {
        view : {
            addHoverDom : addHoverDom,//用于当鼠标移动到节点上时，显示用户自定义控件，显示隐藏状态同 zTree 内部的编辑、删除按钮
            removeHoverDom : removeHoverDom,//用于当鼠标移出节点时，隐藏用户自定义控件，显示隐藏状态同 zTree 内部的编辑、删除按钮
            selectedMulti : false //设置是否允许同时选中多个节点。
        },
        edit : {
            enable : true,//设置 zTree 是否处于编辑状态
            editNameSelectAll : true,//节点编辑名称 input 初次显示时,设置 txt 内容是否为全选状态。
            removeTitle : '删除课程类别',
            renameTitle : '重命名课程类别'
        },
        data : {
            simpleData : {
                enable : true,
                idKey : "typenum",
                pIdKey : "uptypenum",
                rootPId : "1"
            },
            key : {
                name : "typename",
            }
        },
        callback : {
            beforeRemove : beforeRemove,//点击删除时触发，用来提示用户是否确定删除
            beforeEditName : beforeEditName,//点击编辑时触发，用来判断该节点是否能编辑
            beforeRename : beforeRename,//编辑结束时触发，用来验证输入的数据是否符合要求
            onRemove : onRemove,//删除节点后触发，用户后台操作
            onRename : onRename,//编辑后触发，用于操作后台
            onClick : clickNode//点击节点触发的事件
        }
    };
    var treeNodes = typeTree;//树节点数据(从后台获取)
    $.fn.zTree.init($("#treeDiv"), setting, treeNodes);//在界面生成一颗树
    openAllTreenode();//展开树的所有节点
}

/**
 * 展开树的所有节点
 */
function openAllTreenode(){

    // 获取树对象
    var treeObj = $.fn.zTree.getZTreeObj("treeDiv");
    /* 获取所有树节点 */
    var nodes = treeObj.transformToArray(treeObj.getNodes());
    // 展开除第一级之外的其他节点
    for (var i = 0, length_1 = nodes.length; i < length_1; i++) {
        if(nodes[i].level == 0){
            continue;
        }
        nodes[i].open = true;
    }
    //展开第一级节点
    treeObj.expandNode(nodes[0], true);

}



/******S  删除*******/
/**
 * 删除前的询问(验证是否可以删除)
 * @param treeId
 * @param treeNode  需要删除的树节点
 * @returns {boolean} 是否可以执行删除函数
 */
function beforeRemove(treeId, treeNode) {
    var layer =getLauiLayer();
    if(treeNode.level == 0){
        layer.msg("您不可以删除根节点!请从二级节点开始操作!",{icon:2,shade: [0.8, '#393D49']})
        return false;
    }
    if(treeNode.isParent){
        layer.msg("该目录下面还有子目录，请从最底层目录开始删除!",{icon:2,shade: [0.8, '#393D49']})
        return false;
    }
    //如果表格中有数据就不让删除
    if($("#trainCourseTbody").children("tr").length>0){
        layer.msg("该节点已经排有课程，不允许删除课程类别!先删除培养方案课程!",{icon:2,time:2*1000,shade: [0.8, '#393D49']});
        return false;
    }
    if(confirm("确认删除?")){
        return true;
    }
    return false;
}

/**
 * 删除的操作
 * @param e 事件
 * @param treeId    树的界面中的ID
 * @param treeNode  节点
 */
function onRemove(e, treeId,treeNode) {
    var layer = getLauiLayer();
    var trainSchemeId = getTrainSchemeId();//培养方案编号
    var typeNum = treeNode.typenum;//类别num
    $.post(contextPath+"/courseType/deleteCourseType.do",{"trainSchemeId":trainSchemeId,"typeNum":typeNum},function (response) {
        layer.msg(response,{time:2*1000,shade: [0.8, '#393D49']},function () {
            if("删除成功" == response){
                getTypeTree();//重新生成树
                //1.清空条件
                var form = $("#queryTrainCourseForm");
                form.find("input").not("#queryTrainCourseTrainshemeId").val("");
                form.find("select").val("");
                //2.重新查询一次
                queryTrainCourseByCondition();
            }
        })
    },'text')
}
/******E  删除*******/



/****S  编辑根节点****/
/**
 * 验证是否可以进入编辑模式
 * @param treeId
 * @param treeNode
 * @returns {boolean}   true|false代表是否进入编辑模式
 */
function beforeEditName(treeId,treeNode) {
    var layer;
    layui.use(['layer'],function () {
        layer = layui.layer;
    });
    //如果是根节点不允许编辑
    if(treeNode.level == 0 ){
        layer.msg("您不能编辑根节点!",{icon:2,shade: [0.8, '#393D49']});
        return false;
    }
    return true;
}

/**
 * 用于捕获节点编辑名称结束（Input 失去焦点 或 按下 Enter 键）之后，更新节点名称数据之前的事件回调函数，并且根据返回值确定是否允许更改名称的操作
 * @param treeId
 * @param treeNode
 * @param newName
 * @param isCancel
 * @returns {boolean}   是否成功
 */
function beforeRename(treeId,treeNode, newName,isCancel) {
    var layer;
    layui.use(['layer'],function () {
        layer = layui.layer;
    })
    if (($.trim(newName)).length < 2) {
        layer.alert("名称不能少于2个字符！")
        return false;
    }
    return true;
}

/**
 * 修改名称的操作(正经的修改传到后台进行操作)
 * @param e
 * @param treeId
 * @param treeNode
 * @param isCancel
 */
function onRename(e, treeId,treeNode, isCancel) {
    //如果选择了取消，重新查一下树
    if(isCancel == true){
        getTypeTree()
        return false;
    }
    if(confirm("您确认修改类别名称?")) {
        $.post(contextPath+"/courseType/updateCourseType.do",
            {
                "trainSchemeId":$("#trainSchemeId").val(),
                "typeNum":treeNode.typenum,
                "typeName":treeNode.typename
            },
            function(response){
                if(response != null){
                    var layer;
                    layui.use("layer",function () {
                        layer = layui.layer;
                    });
                    layer.msg(response,{shade: [0.8, '#393D49'],time:2*1000,icon:1},function () {
                        if("修改成功"==response){
                            getTypeTree();//修改成功之后重新查一下树
                        }
                    })
                }
            }
            ,
            'text');
    }else {//如果选择了取消重新查一下树
        getTypeTree();//取消之后重新查树
    }

}


/****E  编辑根节点****/

/************S   点击事件*********/
/**
 * 点击事件
 * @param e 事件
 * @param treeId    树节点的ID
 * @param treeNode  树节点
 */
function clickNode(e, treeId,treeNode) {
    $("#trainCourseTypeNum").val(treeNode.typenum);//向隐藏的课程类别编号赋值(最后添加到表单中传到后台保存)
    $("#trainCourseTypeName").val(treeNode.typename);//
    $("#typeNum_0").val(treeNode.typenum);//向隐藏的课程类别编号赋值
    // queryTrainCourseByCondition();//分页查询培养方案课程信息
    clearConditionAndQueryTrainCourse();
}
/************E   点击事件*********/

/**
 * 增加一个课程类别事件(自定义组件),用于当鼠标移动到节点上时，显示用户自定义控件，显示隐藏状态同 zTree 内部的编辑、删除按钮
 * @param treeId    树节点在界面的编号
 * @param treeNode      树节点
 */
function addHoverDom(treeId,treeNode) {
    //1.初始化layer模块
    var layer;
    layui.use(['layer'],function () {
        layer = layui.layer;
    })
    //2.
    var sObj = $("#"+ treeNode.tId+ "_span");
    if (treeNode.editNameFlag|| $("#addBtn_"+ treeNode.tId).length > 0)
        return;
    var addStr = "<span class='button add' id='addBtn_"+ treeNode.tId+ "' title='添加子节点' οnfοcus='this.blur();'></span>";
    sObj.after(addStr);
    var btn = $("#addBtn_"+ treeNode.tId);
    if (btn)btn.bind("click",function() {//增加的业务逻辑写在这里
        var name = treeNode.typename ; //获取到当前的节点的名称
        var typenum = treeNode.typenum ; //获取到当前的节点的编号
        var layer = getLauiLayer();
        //如果是叶子节点并且排有课程不允许再添加
        if(!treeNode.isParent &&$("#trainCourseTbody").children("tr").length>0){
            layer.msg("该节点已经排有课程，不允许添加课程类别!",{icon:2,time:2*1000,shade: [0.8, '#393D49']});
            return;
        }
        if(confirm("确认在类别  "+name+"  下添加新的类别?")){
            //1.向隐藏的地方赋值
            $(".clear-input").val("");//清空残留的数据
            $("#addType_uptypenum").val(typenum);//上级编号
            $("#add_trainingschemeid").val($("#trainSchemeId").val());//培养方案编号
            $("#addType_upTypeName").val(name);//上级类别名称
            $("#addType_remark").val("无");//描述默认无
            //2.打开模态框
            var index = layer.open({
                title:'添加课程类别',
                area: [$(window).width()*0.80+'px', $(window).height()*0.70 +'px'],//大小
                fix: true, //不固定
                maxmin: true,
                zIndex:500,
                shadeClose: false,
                shade:0.4,
                type:1,
                content:$('#addTypeModal')
            });
            //向页面隐藏index
            $("#hidden_addType_index").val(index);
        }
    });
}

/**
 *用于当鼠标移出节点时，隐藏用户自定义控件，显示隐藏状态同 zTree 内部的编辑、删除按钮
 * @param treeId
 * @param treeNode
 */
function removeHoverDom(treeId,treeNode) {
    $("#addBtn_" + treeNode.tId).unbind().remove();
}
/********S   左边树相关操作**********/

效果:

weixin_33856370

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【ztree】zTree节点增删改

　　今天遇到一个需求是对zTree的节点进行增删改,经过查阅资料总结如下: 效果: 完成增删改，要注意几个关键点：使用编辑功能，必须设置 setting.edit 中的各个属性使用编辑功能的事件回调函数，必须设置 setting.callback.beforeRemove / onRemove / beforeRename / onRename...
复制链接

扫一扫