ztree--插件实现增删改查demo(完整版)

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了ztree--插件实现增删改查demo(完整版)相关的知识,希望对你有一定的参考价值。

ztree--插件实现增删改查demo(完整版)

 

var setting = {

 

                async: {

 

                    enable: true,       //开启异步加载处理

 

                    dataFilter: filter  //用于对 Ajax 返回数据进行预处理的函数

 

                },

 

                view: {

 

                    addHoverDom: addHoverDom,

 

                    removeHoverDom: removeHoverDom,

 

                    selectedMulti: false,

 

                },

 

                check: {

 

                    enable: false

 

                },

 

                data: {

 

                    simpleData: {

 

                        enable: true

 

                    }

 

                },

 

                edit: {

 

                    enable: true,

 

                    removeTitle: "删除",

 

                    renameTitle: "编辑名称"

 

                },

 

                callback: {

 

                    //用于捕获节点被删除之前的事件回调函数,并且根据返回值确定是否允许删除操作

 

                    beforeRemove: beforeRemove,

 

                    //用于捕获节点编辑名称结束(Input 失去焦点 或 按下 Enter 键)之后,

 

                    //更新节点名称数据之前的事件回调函数,并且根据返回值确定是否允许更改名称的操作

 

                    beforeRename: beforeRename,

 

                    //用于捕获节点被点击的事件回调函数

 

                    onClick: zTreeOnClick

 

                }

 

            };

 

            var zNodes = date;

 

            $.fn.zTree.init($("#treeDemo"), setting, zNodes);

 

            $(‘.ico_open‘).remove();

 

            $(‘.ico_docu‘).remove();

 

            //添加新的节点

 

            function addHoverDom(treeId, treeNode) {

 

                if (treeNode.level === 2) {

 

                    return false;

 

                } else {

 

                    var sObj = $("#" + treeNode.tId + "_span");

 

                    if (treeNode.editNameFlag || $("#addBtn_" + treeNode.tId).length > 0) return;

 

                    if (treeNode.level === 0) {

 

                        var addStr = "<span class=‘button add‘ id=‘addBtn_" + treeNode.tId

 

                            + "‘ title=‘添加部门‘ onfocus=‘this.blur();‘></span>";

 

                        sObj.after(addStr);

 

                    }

 

                    if (treeNode.level === 1) {

 

                        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 () {

 

                        if (treeNode.name) {

 

                            var parentId = treeNode.id;

 

                            var orgName = treeNode.name;

 

                            $.ajax({

 

                                url: baseUrl + ‘system/department/add‘,

 

                                type: "post",

 

                                data: {

 

                                    orgName: orgName,

 

                                    parentId: parentId

 

                                },

 

                                success: function (res) {

 

                                    if (res.status == "0000") {

 

                                        toastr.success(‘添加成功!‘)

 

                                        me.ztree()

 

                                    } else {

 

                                        toastr.error(‘添加失败!‘)

 

                                    }

 

                                }

 

                            });

 

                        }

 

                    });

 

                }

 

            };

 

            function removeHoverDom(treeId, treeNode) {

 

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

 

            };

 

            //删除节点信息

 

            function beforeRemove(treeId, treeNode) {

 

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

 

                zTree.selectNode(treeNode);

 

                if (treeNode.name) {

 

                    var sids = [];

 

                    sids.push(treeNode.id)

 

                    $.ajax({

 

                        url: baseUrl + ‘system/department/delete‘,

 

                        type: "post",

 

                        data: {

 

                            sids: sids

 

                        },

 

                        success: function (res) {

 

                            if (res.status == "0000") {

 

                                toastr.success(‘删除成功‘)

 

                            } else {

 

                                toastr.error(res.message)

 

                                me.ztree()

 

                            }

 

                        }

 

                    });

 

                } else {

 

                    window.location.reload();

 

                }

 

            }

 

            //修改节点信息

 

            function beforeRename(treeId, treeNode, newName) {

 

                if (newName.length == 0) {

 

                    toastr.error(‘节点名称不能为空‘)

 

                    return false;

 

                } else if (newName.length >= 15) {

 

                    toastr.error(‘节点名称长度不得超出14个字符‘)

 

                    return false;

 

                } else if (/^\s+$/gi.test(newName)) {

 

                    toastr.error(‘节点名称不能以空格‘)

 

                    return false;

 

                }

 

                var pNode = treeNode.getParentNode();

 

                var parentId;

 

                var sid = treeNode.id;

 

                if (pNode == null) {

 

                    parentId = 0;

 

                } else {

 

                    parentId = pNode.id;

 

                }

 

                $.ajax({

 

                    url: baseUrl + ‘system/department/edit‘,

 

                    type: "post",

 

                    data: {

 

                        sid: sid,

 

                        orgName: newName,

 

                        parentId: parentId

 

                    },

 

                    success: function (res) {

 

                        if (res.status == "0000") {

 

                            toastr.success(‘修改成功!‘)

 

                        } else {

 

                            toastr.error(‘修改失败!‘)

 

                        }

 

                    }

 

                });

 

            }

 

            //修改异步获取到的节点name属性

 

            function filter(treeId, parentNode, childNodes) {

 

                if (!childNodes) return null;

 

                for (var i = 0, l = childNodes.length; i < l; i++) {

 

                    childNodes[i].name = childNodes[i].name.replace(/\.n/g, ‘.‘);

 

                }

 

                return childNodes;

 

            }

 

            //点击节点后, 弹出该节点的 tId、name 的信息

 

            function zTreeOnClick(event, treeId, treeNode) {

 

                if (treeNode.pId === null || treeNode.pId==0) {

 

                    $(‘#table‘).bootstrapTable(‘refresh‘, {

 

                        url: baseUrl + ‘system/person/list?organizationId=‘ + ""

 

                    })

 

                } else {

 

                    $(‘#table‘).bootstrapTable(‘refresh‘, {

 

                        url: baseUrl + ‘system/person/list?organizationId=‘ + treeNode.id

 

                    })

 

                }

 

            };

 

以上是关于ztree--插件实现增删改查demo(完整版)的主要内容,如果未能解决你的问题,请参考以下文章

练习:WinForm--DataGridView增删改查完整版

ztree树在SSSM中的增删改查

Springboot+Vue单页完整版增删改查练习(学校+老师的简单系统)(一步一步详教)

ztree : 增删改功能demo与自定义DOM功能demo的结合

Ztree 仿淘宝树结构完美实现 移动 右键增删改

SpringBoot整合MyBatis实现增删改查案例完整版(附源代码)