Tree樹狀圖的動態增刪查改(下)修改與刪除

Xiao coldゞ發表於2019-07-16

一、整個樹狀圖中,修改和刪除可以說是比較容易理解的功能了,相比於新增操作也少了很多,也用不著把id傳來傳去的。

二、刪除節點

1、修改的位置比較特殊,所以就先說下刪除是怎麼做的吧。

2、第一步,刪除的方法必須寫在外掛自帶的remove的方法裡面,然後就是用外掛的方法獲取選中的值,再下去的就是判斷了。isParent等於true的話就說明選中的是父節點,並且下面是判斷到有子節點的,後面的兩個就是限制修改和提示選擇節點的功能了。

3、最後通過ajax提交id到資料庫,資料庫的刪除方法和普通的刪除方法是沒有什麼區別的,也是通過接收到id進行刪除的。

//刪除節點
        function remove(e) {
            var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
   nodes = zTree.getSelectedNodes(),
            isParent = nodes[0].isParent,
   treeNode = nodes[0];
            if (isParent == true) {
                return layer.msg("該分類下存在子節點,請先刪除子節點")
            }
            if (treeNode.id == 403 || treeNode.id == 1) {
                return layer.msg("系統初始化分類,不允許編輯、刪除或新增子分類。")
            }
            if (nodes.length == 0) {
                layer.msg("請先選擇一個節點");
                return;
            } else {
                $.ajax({
                    url: "/ClienteleManagement/Client/DeleteTree",
                    data: {
                        ClientfyID: treeNode.id //獲取選中節點的ID
                    },
                    type: "post",
                    success: function (data) {
                        if (data.State) {
                            var callbackFlag = $("#callbackTrigger").attr("checked");
                            zTree.removeNode(treeNode, callbackFlag);
                            $("#fontOrange2").text("");
                            $("#ClientClassifyId").val("")
                        } else {
                            layer.msg(data.Text)
                        }
                    }
                })
            }
        };

四、修改節點

1、新增和刪除的操作方法都是寫在外掛自帶的方法裡面的,但修改比較特殊,修改並不是寫在edit()的裡面的,你要是想在填寫完成後離開了節點就修改的話,這就必須把修改寫在beforeRename()裡面。
在這裡插入圖片描述

2、修改的提交方式和其他兩個方法也是一樣的,先獲取選中值再提交id和修改後的名稱到控制器,控制器的查詢和普通的修改也是一樣的,這裡就不展示了

function beforeRename(treeId, treeNode, newName) {
            var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
             nodes = zTree.getSelectedNodes(),
             treeNode = nodes[0];
            if (newName.length == 0) {
                layer.msg("節點名稱不能為空.");
                var zTree = $.fn.zTree.getZTreeObj("treeDemo");
                setTimeout(function () {
zTree.editName(treeNode) }, 10);
                return false;
            }//修改樹節點
            $.ajax({
                data: {
                    ClientClassifyID:treeNode.id,
                    ClientClassify: newName,
                    FatherID: treeNode.pId
                }, url: "/ClienteleManagement/Client/RevampTree",
                type: "post",
                success: function (data) {
                    if (data.State) { //layer.msg(data.Text); }
                    else { edit(); //分類重複重新呼叫修改
                        layer.msg(data.Text)
                    }
                }
            });
            return true;
        }

相關文章