【简】ZTree 【增、删、改、查、】的前后端交互

本文讲解 新手如何使用ZTree

---

1.首先引入ZTree相关文件   点我下载

---

 

   

   

   

    

---

2.创建一个ul 的标签

     

---

3.完整代码如下，  

  // 树 代码

    var setting = {

        view: {

            addHoverDom: addHoverDom,

            removeHoverDom: removeHoverDom,

            selectedMulti: false,

            showIcon: true

        },

        edit: {

            removeTitle: "删除",

            renameTitle: "编辑",

            enable: true,

            editNameSelectAll: true,

            showRemoveBtn: showRemoveBtn,

            showRenameBtn: showRenameBtn,

        },

        data: {

            simpleData: {

                enable: true,

                rootPId: "group_all_id"

            }

        },

        callback: {

            onClick: onClick,

            beforeDrag: beforeDrag,

            beforeEditName: beforeEditName,

            beforeRemove: beforeRemove,

            beforeRename: beforeRename,

            onRemove: onRemove,

            onRename: onRename

        }

    };



    var log, className = "dark";



    function beforeDrag(treeId, treeNodes) {

        return false;

    }



    var treeName;



    function beforeEditName(treeId, treeNode, newname) {

        treeName = treeNode.name;

    }



    function beforeRemove(treeId, treeNode) {

        var zTree = $.fn.zTree.getZTreeObj(treeId);

        layer.confirm("确认删除 分组  " + treeNode.name + " 吗？", {

            btn: ['是', '否']

        }, function(index) {

            var loading = layer.load(2, {

                shade: [0.2, '#000']

            });

            $.ajax({

                url: config.testConfig.APIURL

                type: 'get',

                data: {

                    id: treeNode.id,

                },

            success: function(r) {

                    if(JSON.parse(r).error == 0) {

                        layer.msg('删除成功', {

                            icon: 6

                        });

                        zTree.removeNode(treeNode);

                        layer.close(index);



                    } else {

                        layer.msg('删除失败', {

                            icon: 5

                        });

                        error(r); //如果error!=0;

                    }

                    layer.close(loading);

                    loadTree()

                },

                error: function(s) {

                    layer.msg('删除出错了');

                }

            });

        }, function(index) {

            layer.close(index);

        });

        return false;

    }



    function onRemove(e, treeId, treeNode) {

        showLog("[ " + getTime() + " onRemove ]     " + treeNode.name);

    }



    function beforeRename(treeId, treeNode, newName, isCancel) {

        className = (className === "dark" ? "" : "dark");

        showLog((isCancel ? "" : "") + "[ " + getTime() + " beforeRename ]     " + treeNode.name + (isCancel ? "" : ""));

        if(newName.length == 0 || newName.trim().length == 0) {

            setTimeout(function() {

                var zTree = $.fn.zTree.getZTreeObj("treeDemo");

                zTree.cancelEditName();

                layer.msg('节点名不能为空', {

                    icon: 2

                });

            }, 0);

            return false;

        }

        if(newName.length > 8) {

            setTimeout(function() {

                var zTree = $.fn.zTree.getZTreeObj("treeDemo");

                zTree.cancelEditName();

                layer.msg('节点名称过长', {

                    icon: 2

                });

            }, 0);

            return false;

        }

        return true;

    }



    function onRename(e, treeId, treeNode, isCancel) {

        if(isCancel) {

            return;

        }



        var zTree = $.fn.zTree.getZTreeObj("treeDemo");

        var onodes = zTree.getNodes();

        if(treeName == treeNode.name) {



        } else {



            //发送请求修改节点信息

            var loading = layer.load(2, {

                shade: [0.2, '#000']

            });

            $.ajax({

                url: config.testConfig.APIURL ，
                type: 'get',

                data: {

                    Id: treeNode.id,

                    title: treeNode.name,

                 

                },

              

                success: function(r) {

                    if(JSON.parse(r).error == 0) {

                        layer.msg('修改成功', {

                            icon: 6

                        });

                    } else {

                        layer.msg('修改失败', {

                            icon: 5

                        });

                        error(r); //如果error!=0;



                    }

                    layer.close(loading);

                    loadTree()

                },

                error: function(s) {

                    layer.msg('修改出错了');

                }

            });



        }



    }



    function showRemoveBtn(treeId, treeNode) {

        if(treeNode.id == "group_all_id" || treeNode.id == "group_default_id") {

            return false;

        }

        return !treeNode.isParent;

    }



    function showRenameBtn(treeId, treeNode) {

        if(treeNode.id == "group_all_id" || treeNode.id == "group_default_id") {

            return false;

        }

        return true

    }



    function showLog(str) {

        if(!log) log = $("#log");

        log.append("" + str + "");

        if(log.children("li").length > 8) {

            log.get(0).removeChild(log.children("li")[0]);

        }

    }



    function getTime() {

        var now = new Date(),

            h = now.getHours(),

            m = now.getMinutes(),

            s = now.getSeconds(),

            ms = now.getMilliseconds();

        return(h + ":" + m + ":" + s + " " + ms);

    }



    var newCount = 1;



    function addHoverDom(treeId, treeNode) {

        if(treeNode.id == "group_default_id") {

            return false;

        }



        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 zTree = $.fn.zTree.getZTreeObj("treeDemo");

            var name = "新节点" + (newCount++);

            var newNode;

            //发送请求保存一个新建的节点，后台返回ID，用返回的ID新增节点

            var loading = layer.load(2, {

                shade: [0.2, '#000'],

                content: '正在新增节点....',

                success: function(layero) {

                    layero.find('.layui-layer-content').css({

                        'padding': '40px 0',

                        'width': '100px',



                    });

                }

            });

            var name = "新节点" + (newCount++);

            $.ajax({

                url: config.testConfig.APIURL 

                type: 'get',

                data: {

                    parentId: treeNode.id,

                    title: name,

                  
                },

           

                success: function(r) {

                    if(JSON.parse(r).error == 0) {

                        layer.msg('添加成功', {

                            icon: 6

                        });

                        newNode = zTree.addNodes(treeNode, {

                            id: (100 + newCount),

                            pId: treeNode.id,

                            name: name

                        });

                        //  zTree.editName(newNode[0]) //新增的节点进入编辑状态

                    } else {

                        layer.msg('添加失败', {

                            icon: 5

                        });

                        error(r); //如果error!=0;



                    }

                    layer.close(loading);

                    loadTree()

                },

                error: function(s) {

                    layer.msg('添加失败');

                    // window.location.reload();

                }

            });



            return false;

        });



    };



    function removeHoverDom(treeId, treeNode) {

        $("#addBtn_" + treeNode.tId).unbind().remove();

    };



    function selectAll() {

        var zTree = $.fn.zTree.getZTreeObj("treeDemo");

        zTree.setting.edit.editNameSelectAll = $("#selectAll").attr("checked");

    }



    $(document).ready(function() {

        loadTree();

        $("#selectAll").bind("click", selectAll);

    });

    //加载树

    function loadTree() {

        var loading = layer.load(2, {

            shade: [0.4, '#000']

        });

        $.ajax({

            type: 'GET',

            url: config.testConfig.APIURL 

          


            success: function(data) {

                if(JSON.parse(data).error == 0) {

                    $.fn.zTree.init($("#treeDemo"), setting, JSON.parse(data).data);

                } else {

                    error(data); //如果error!=0;出错执行此函数;

                }

                layer.close(loading);

            },

            error: function() {

                layer.close(loading);

            }

        })

    }



    //点击树加载表格数据

    function onClick(event, treeId, treeNode) {

        //点击树节点 去操作其他数据

    }

 

如有其他问题，请在下方留言评论噢