【ztree】zTree节点增删改-白红宇

【ztree】zTree节点增删改

阅读量：6297 次

发布时间：2019-06-22

本文共 13870 字，大约阅读时间需要 46 分钟。

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

效果:

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

使用编辑功能，必须设置 setting.edit 中的各个属性

使用编辑功能的事件回调函数，必须设置 setting.callback.beforeRemove / onRemove / beforeRename / onRename 等属性

zTree 不提供默认的增加按钮，如要实现需要利用自定义控件的方法 addHoverDom / removeHoverDom

我们利用 beforeEditName 来触发自定义的编辑操作

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

            
             zTree测试

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

/***********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 = "";    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 = "";    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   左边树相关操作**********/

效果: