【ztree】zTree節點增刪改

我是小紅花發表於2019-07-30

今天遇到一個需求是對zTree的節點進行增刪改,經過查閱資料總結如下: 效果: 完成增刪改，要注意幾個關鍵點： 使用 編輯功能，必須設定 setting.edit 中的各個屬性使用 編輯功能的事件回撥函式，必須設定 setting.callback.beforeRemove / onRemove / beforeRename / onRename 等屬性zTree 不提供預設的增加按鈕，如要實現需要利用自定義控制元件的方法 addHoverDom / removeHoverDom 我們利用 beforeEditName 來觸發自定義的編輯操作 首先，我們來看看具體的配置資訊（詳細內容見程式碼中的註釋）:

<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</span><span style="background-color: #f5f5f5; color: #000000;">',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='新增子節點' onfocus='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>
    最後附一個完整的與後臺互動的例子:/**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+"/trainacontentTypeaddTraincontenttype.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(){
    KaTeX parse error: Expected '}', got 'EOF' at end of input: …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(.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, length1 = 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:21000,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:21000,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(“您確認修改類別名稱?”)) {
    KaTeX parse error: Expected '}', got 'EOF' at end of input: …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:21000,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 = KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲addBtn"+ treeNo…("#trainCourseTbody").children(“tr”).length>0){
    layer.msg(“該節點已經排有課程，不允許新增課程類別!”,{icon:2,time:21000,shade: [0.8, ‘#393D49’]});
    return;
    }
    if(confirm(“確認在類別 “+name+” 下新增新的類別?”)){
    //1.向隱藏的地方賦值
    $(".clear-input").val("");//清空殘留的資料
    $("#addType_uptypenum").val(typenum);//上級編號
    KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲add_trainingsch…("#trainSchemeId").val());//培養方案編號
    $("#addType_upTypeName").val(name);//上級類別名稱
    KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲addType_remark"…(window).width()0.80+‘px’, (window).height()0.70+′px′],//大小fix:true,//不固定maxmin:true,zIndex:500,shadeClose:false,shade:0.4,type:1,content:(window).height()0.70 +&#x27;px&#x27;],//大小 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 左邊樹相關操作*/今天遇到一個需求是對zTree的節點進行增刪改,經過查閱資料總結如下: 效果:  完成增刪改，要注意幾個關鍵點： 使用 編輯功能，必須設定 setting.edit 中的各個屬性使用 編輯功能的事件回撥函式，必須設定 setting.callback.beforeRemove / onRemove / beforeRename / onRename 等屬性zTree 不提供預設的增加按鈕，如要實現需要利用自定義控制元件的方法 addHoverDom / removeHoverDom 我們利用 beforeEditName 來觸發自定義的編輯操作 首先，我們來看看具體的配置資訊（詳細內容見程式碼中的註釋）:

    <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</span><span style="background-color: #f5f5f5; color: #000000;">',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='新增子節點' onfocus='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>
              最後附一個完整的與後臺互動的例子:/**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+"/trainacontentTypeaddTraincontenttype.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(){
      KaTeX parse error: Expected '}', got 'EOF' at end of input: …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(.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, length1 = 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:21000,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:21000,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(“您確認修改類別名稱?”)) {
      KaTeX parse error: Expected '}', got 'EOF' at end of input: …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:21000,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 = KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲addBtn"+ treeNo…("#trainCourseTbody").children(“tr”).length>0){
      layer.msg(“該節點已經排有課程，不允許新增課程類別!”,{icon:2,time:21000,shade: [0.8, ‘#393D49’]});
      return;
      }
      if(confirm(“確認在類別 “+name+” 下新增新的類別?”)){
      //1.向隱藏的地方賦值
      $(".clear-input").val("");//清空殘留的資料
      $("#addType_uptypenum").val(typenum);//上級編號
      KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲add_trainingsch…("#trainSchemeId").val());//培養方案編號
      $("#addType_upTypeName").val(name);//上級類別名稱
      KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲addType_remark"…(window).width()0.80+‘px’, (window).height()0.70+′px′],//大小fix:true,//不固定maxmin:true,zIndex:500,shadeClose:false,shade:0.4,type:1,content:(window).height()0.70 +&#x27;px&#x27;],//大小 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 左邊樹相關操作*/

      相關文章