记ztree插件删除节点结合layer.confirm询问框问题

博客指出layer.confirm无法阻塞js执行,导致ztree插件beforeRemove回调函数未等用户确定就移除界面节点,可能造成前后台数据不一致。解决方案是不使用ztree默认删除功能,在layer.confirm中手动调用removeNode方法实现前后台数据同步删除。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

问题:layer.confirm无法阻塞js执行,导致ztree插件的beforeRemove回调函数未等待用户确定删除便已经移除界面中的节点, 因此可能会出现前后台数据不一致情况,正常逻辑理应删除后台数据然后移除界面中的ztree节点元素。

解决方案:不使用ztree提供的默认删除功能(beforeRemove函数返回false即可),在layer.confirm中手动调用removeNode方法实现前台与后台的数据同步删除(舍弃ztree提供的自动删除功能)。代码如下:

//beforeRemove回调函数
function zTreeBeforeRemove(treeId, treeNode) {
      var zTree = $.fn.zTree.getZTreeObj("zTree");
      layer.confirm("确认删除节点 -> " + treeNode.name + " 吗?", {btn: ['确定', '取消']},
        function (index) {//确定
          $.ajax({
            url: url,
            data: {"id": treeNode.id},
            type: "POST",
            async: false,
            success: function (data) {
              if (!data) {
                layer.alert("该接口已经被申请!");
              } else {
                //手动移除节点
                zTree.removeNode(treeNode);
                layer.alert("删除成功!");
              }
            },
            error: function () {
              layer.alert("删除失败!");
            }
          });
        },
        function (index) {//取消
          layer.close(index);
        });
      //注意:返回false便不会触发onRemove事件
      return false;
    }

参考文献:https://blog.youkuaiyun.com/yqwayward/article/details/78312424

<!-- 端页面完整代码 --> @{ Layout = null; } <!DOCTYPE html> <html> <head> <link href="~/Scripts/layui/css/layui.css" rel="stylesheet" /> <script src="~/Scripts/layui/layui.js"></script> <script src="~/Scripts/jquery-3.4.1.js"></script> <style> body { padding: 10px 20px 20px 20px; width: 90% } .but { margin-top: -5px } </style> </head> <body> <fieldset class="layui-elem-field"> <legend> <span class="layui-breadcrumb"> <a href="">首页</a> <a href="">职位管理</a> </span> </legend> <div class="layui-field-box"> <div class="layui-form-item"> <div class="layui-inline"> <label class="layui-form-label">职位名称</label> <div class="layui-input-block"> <input type="text" name="name" id="name" autocomplete="off" class="layui-input"> </div> </div> <div class="layui-inline"> <label class="layui-form-label">职位代码</label> <div class="layui-input-inline"> <input type="text" name="code" id="code" autocomplete="off" class="layui-input"> </div> </div> <button type="button" class="layui-btn layui-btn-radius but" id="searchButton" onclick="Search()"><i class="layui-icon layui-icon-search"></i>查询</button> <button type="button" class="layui-btn layui-bg-blue but" onclick="AddJob()"><i class="layui-icon layui-icon-addition"></i>添加</button> </div> </div> </fieldset> <fieldset class="layui-elem-field"> <table class="layui-hide" id="test" lay-filter="test"></table> <script type="text/html" id="toolDemo"> <div class="layui-clear-space"> <a class="layui-btn layui-btn-xs" lay-event="edit" id="Edit"><i class="layui-icon layui-icon-edit"></i>编辑</a> <a class="layui-btn layui-btn-xs layui-bg-orange" lay-event="del" id="del"><i class="layui-icon layui-icon-clear"></i>删除</a> </div> </script> </fieldset> <script> var tableIns; layui.use(['table', 'layer', 'form'], function () { var table = layui.table; var layer = layui.layer; // 创建渲染实例 tableIns = table.render({ elem: '#test', url: '/JobManagem/GetList', page: true, cols: [[ { type: 'numbers', width: '15%', title: '序列号' }, { field: 'JobName', width: '20%', title: '职位名称' }, { field: 'JobCode', width: '20%', title: '职位代码' }, { field: 'ModifyDate', width: '20%', title: '修改时间', templet: function (d) { return formatDate(d.ModifyDate); } }, { title: '操作', width: '25%', templet: '#toolDemo' } ]], }); // 编辑删除事件 table.on('tool(test)', function (obj) { var data = obj.data; if (obj.event === 'edit') { EditJob(data); } else if (obj.event === 'del') { DeleteJob(data, obj); } }); }); function formatDate(dateStr) { if (!dateStr) return ''; // 提取时间戳(兼容 "/Date(123456789)/" 格式) var timestamp = parseInt(dateStr.replace(/\/Date$(\d+)$\//, '$ 1')); var date = new Date(timestamp); return date.getFullYear() + '-' + ('0' + (date.getMonth() + 1)).slice(-2) + '-' + // 月份从0开始,需+1 ('0' + date.getDate()).slice(-2); } // 添加职位弹窗 function AddJob() { layer.open({ type: 1, title: '添加职位', content: ` <div style="padding:20px"> <div class="layui-form-item"> <label class="layui-form-label">职位名称</label> <div class="layui-input-block"> <input type="text" id="add_name" class="layui-input"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">职位代码</label> <div class="layui-input-block"> <input type="text" id="add_code" class="layui-input"> </div> </div> </div> `, btn: ['保存', '取消'], yes: function (index) { $.post('/JobManagem/AddJob', { JobName: $('#add_name').val(), JobCode: $('#add_code').val() }, function (res) { if (res.code == 0) { layer.close(index); Search(); // 刷新列表 } else { layer.msg('操作失败:' + res.msg); } }); } }); } // 编辑职位弹窗 function EditJob(data) { layer.open({ type: 1, title: '编辑职位', content: ` <div style="padding:20px"> <div class="layui-form-item"> <label class="layui-form-label">职位名称</label> <div class="layui-input-block"> <input type="text" id="edit_name" value="${data.JobName}" class="layui-input"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">职位代码</label> <div class="layui-input-block"> <input type="text" id="edit_code" value="${data.JobCode}" class="layui-input"> </div> </div> </div> `, btn: ['更新', '取消'], yes: function (index) { $.post('/JobManagem/UpdateJob', { ID: data.ID, JobName: $('#edit_name').val(), JobCode: $('#edit_code').val() }, function (res) { if (res.code == 0) { layer.close(index); Search(); } else { layer.msg('更新失败:' + res.msg); } }); } }); } // 删除职位 function DeleteJob(data, obj) { layer.confirm('真的删除行 [' + data.JobName + '] 么', function (index) { $.post('/JobManagem/DeleteJob', { ID: data.ID }, function (res) { if (res.code == 0) { obj.del(); layer.close(index); } else { layer.msg('删除失败:' + res.msg); } }); }); } // 查询重载 function Search() { var nameVal = $('input[name="name"]').val().trim(); var codeVal = $('input[name="code"]').val().trim(); tableIns.reload({ where: { name: nameVal, code: codeVal }, page: { curr: 1 } // 重置分页 }); } </script> </body> </html> 这是一个vs.net mvc +layui+sqlsever数据库开发的游戏管理系统的用户管理模块,我希望你根据这段代码以及我下面提供的sql建表资料以及用户管理模块的控制器代码,研究代码风格和习惯帮我续写组织管理模块,表单要求有树形表格,给我提供完整代码表名:组织机构表(OrganizationStructure) 字段描述 字段名 数据类型 长度 是否主键 是否外键 是否必填 组织机构表主键 ID uniqueidentifier 16 1 FALSE TRUE 组织机构名称 OrgName varchar 200 0 FALSE TRUE 组织机构代码 OrgCode varchar 200 0 FALSE FALSE 级别 Leve int 4 0 FALSE FALSE 父节点 ParentId uniqueidentifier 16 0 FALSE FALSE 创建时间 CreateDate datetime 8 0 FALSE FALSE 修改时间 ModifyDate datetime 8 0 FALSE FALSE
最新发布
07-11
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值