script type='text/html' id='demo' 动态设置内容用layer弹出后渲染不了

本文探讨了使用Layer插件时遇到的问题:动态生成的表格无法在弹窗中正确显示。通过调整DOM元素类型从<script>标签改为<div>标签,并设置display为none解决了此问题。

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

// html代码
<script type="text/html" id="demo">

</script>


// js代码
var table = "<table>"
$checked.each(function () {
   var foo= $(this).val();
   table+= "<tr>";
   table+= "<td>" + foo.stuNumber + "</td>";
   table+= "<td>" + foo.name + "</td>";
   table+= "<td>" + foo.className + "</td>";
   table+= "<td>" + foo.dormNum + "</td>";
   table+= "</tr>";
                   
  }
});
table += "</table>"
$("#demo").append(table);


layer.open({
  title: "提交确认",
  type: 1,
  area: ['800px', '500px'],
  content: $("#demo").html()
});

最后发现layer弹出后,动态往#demo中添加的内容渲染不了,思考其原因应该是:<script type='text/html'>中的内容,没有算入document文档流。

因为不想用模板渲染的方式,最后还是将<script type='text/html'>换成了<div id='demo' style='display:none'>并放在页面html标签内作为文档内容来加载,layer可以成功弹出。

我现在就负责把管理员模块前端完善好,你告诉我我怎么做,以下是我现有的管理员模块代码addminadd.html: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> 管理员管理 </title> <meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="format-detection" content="telephone=no"> <script type="text/javascript" src="lib/loading/okLoading.js"></script> <link rel="stylesheet" href="css/main.css" media="all"> </head> <style> .imgs{display: none;} .picture{display: none;} </style> <body> <div class="x-body"> <form class="layui-form" id="adminadd"> <input type="hidden" name="id" value=""> <div class="layui-form-item"> <label for="username" class="layui-form-label"> <span class="x-red">*</span>登录名 </label> <div class="layui-input-inline"> <input type="text" id="name" name="name" required="" lay-verify="required" autocomplete="off" class="layui-input" value=""> </div> <div class="layui-form-mid layui-word-aux"> <span class="x-red">*</span>将会成为您唯一的登入名 </div> </div> <div class="layui-form-item"> <label for="phone" class="layui-form-label"> <span class="x-red">*</span>手机 </label> <div class="layui-input-inline"> <input type="text" id="phone" name="phone" required="" lay-verify="phone" autocomplete="off" class="layui-input" value=""> </div> <div class="layui-form-mid layui-word-aux"> <span class="x-red">*</span>将会成为您唯一的登入名 </div> </div> <div class="layui-form-item"> <label for="role" class="layui-form-label"> <span class="x-red">*</span>用户组 </label> <div class="layui-input-inline"> <select name="group_id"> <option value="">请选择角色</option> <option value="1" >超级管理员</option> </select> </div> </div> <div class="layui-form-item"> <label for="link" class="layui-form-label"> <span class="x-red">*</span>缩略图 </label> <div class="layui-input-inline"> <div class="site-demo-upbar"> <div class=" layui-upload-button" style="border:#FFFFFF ;"> <button type="button" class="layui-btn" id="test1"> <i class="layui-icon"></i>上传图片 </button> <input class="layui-upload" type="file" accept="undefined" id="previewImg" name="img" onchange="upload(this,)"> </div> </div> </div> <a href="javascript:;" style="" class="layui-btn " id="cancel"><i class="layui-icon">ဂ</i>撤销上传</a> </div> <div class="layui-form-item imgs" id="imgshow"> <label class="layui-form-label">缩略图展示 </label> <img src="" id="pimages" name="pimages" style="width: 400px;height: 200px;"/> <input id="avatar" name="image" required="" type="hidden" value=""> </div> <div class="layui-form-item"> <label for="L_pass" class="layui-form-label"> <span class="x-red">*</span>密码 </label> <div class="layui-input-inline"> <input type="password" id="L_pass" name="password" required="" lay-verify="pass" autocomplete="off" class="layui-input" value=""> </div> <div class="layui-form-mid layui-word-aux"> 6到16个字符 </div> </div> <div class="layui-form-item"> <label for="L_repass" class="layui-form-label"> <span class="x-red">*</span>确认密码 </label> <div class="layui-input-inline"> <input type="password" id="L_repass" name="repass" required="" lay-verify="repass" autocomplete="off" class="layui-input"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">状态</label> <div class="layui-input-block"> <input type="radio" name="status" value="1" title="启用" checked="checked"> <div class="layui-unselect layui-form-radio layui-form-radioed"><i class="layui-anim layui-icon layui-anim-scaleSpring"></i> <div>启用</div> </div> <input type="radio" name="status" value="0" title="禁用" checked="checked"> <div class="layui-unselect layui-form-radio"><i class="layui-anim layui-icon"></i> <div>禁用</div> </div> </div> </div> <div class="layui-form-item"> <label for="L_repass" class="layui-form-label"> </label> <button class="layui-btn" lay-filter="add" lay-submit=""> 增加 </button> </div> </form> </div> <script src="lib/layui/layui.js" charset="utf-8"> </script> <script src="js/x-layui.js" charset="utf-8"> </script> <script> layui.use(['form','layer'], function(){ $ = layui.jquery; var form = layui.form() ,layer = layui.layer; okLoading.close($); //自定义验证规则 /*form.verify({ nikename: function(value){ if(value.length < 5){ return '昵称至少得5个字符啊'; } } ,pass: [/(.+){6,12}$/, '密码必须6到12位'] ,repass: function(value){ if($('#L_pass').val()!=$('#L_repass').val()){ return '两次密码不一致'; } } });*/ //监听提交 form.on('submit(add)', function(data){ var admindate=$("#adminadd").serialize(); //var data = data.field; $.ajax({ type:'post', url:"xxx", data:admindate, datatype:"json", success:function (data) { if(data.status==1){ layer.msg(data.info,{icon:1,time:1000}); setTimeout(function(){ window.parent.location.reload(); var index = parent.layer.getFrameIndex(window.name); parent.layer.close(index); },1000); return false; }else{ layer.msg(data.info,{icon:5,time:2000});return false; } } }) return false; }); }); </script> <script> //轮播图上传 function upload(obj,id) { var formData = new FormData(); formData.append('img', $('#previewImg')[0].files[0]); formData.append('id', id);//将id追加再idlayer.msg('图片上传中', {icon: 16}); $.ajax({ type:"post", processData: false, contentType: false, url:"xxx", data:formData, success:function(data){ if(data.status == 1){ //console.log(data.image_name); layer.closeAll('loading'); //layer.msg(data.info,{icon:1,time:1000}); $("#pimages").attr('src',data.image_name); $("#avatar").val(data.image_name); $(".imgs").show(); return false; }else{ layer.msg(data.info,{icon:2,time:1000}); } } }); } </script> </body> </html> 和adminlist.html: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> 管理员列表 </title> <meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="format-detection" content="telephone=no"> <script type="text/javascript" src="lib/loading/okLoading.js"></script> <link rel="stylesheet" href="css/main.css" media="all"> <link rel="stylesheet" href="css/bootstrap.css"> </head> <body> <div class="x-nav"> <span class="layui-breadcrumb"> <a><cite>首页</cite></a> <a><cite>管理员管理</cite></a> <a><cite>管理员列表</cite></a> </span> <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" href="javascript:location.replace(location.href);" title="刷新"><i class="layui-icon" style="line-height:30px">ဂ</i></a> </div> <div class="x-body"> <form class="layui-form x-center" action="" style="width:80%"> <div class="layui-form-pane" style="margin-top: 15px;"> <div class="layui-form-item"> <label class="layui-form-label">日期范围</label> <div class="layui-input-inline"> <input class="layui-input" placeholder="开始日" id="LAY_demorange_s"> </div> <div class="layui-input-inline"> <input class="layui-input" placeholder="截止日" id="LAY_demorange_e"> </div> <div class="layui-input-inline"> <input type="text" name="username" placeholder="请输入登录名" autocomplete="off" class="layui-input"> </div> <div class="layui-input-inline" style="width:80px"> <button class="layui-btn" lay-submit="" lay-filter="sreach"><i class="layui-icon"></i></button> </div> </div> </div> </form> <xblock> <button class="layui-btn layui-btn-danger" onclick="delAll()"><i class="layui-icon"></i>批量删除</button> <button class="layui-btn" onclick="admin_add('添加用户','adminadd.html','600','500')"><i class="layui-icon"></i>添加</button> <span class="x-right" style="line-height:40px">共有数据:88 条</span> </xblock> <table class="layui-table"> <thead> <tr> <th> <input type="checkbox" name="" value=""> </th> <th> ID </th> <th> 登录名 </th> <th> 手机 </th> <th> 邮箱 </th> <th> 角色 </th> <th> 加入时间 </th> <th> 状态 </th> <th> 操作 </th> </tr> </thead> <tbody> <tr> <td> <input type="checkbox" value="1" name=""> </td> <td> 1 </td> <td> admin </td> <td > 1111111111 </td> <td > 1111111@qq.com </td> <td > </td> <td> 1970-01-01 08:00:00 </td> <td class="td-status"> <span class="layui-btn layui-btn-normal " onclick="admin_stop(this,'1',0)"> 启用 </span> </td> <td class="td-manage"> <!--<a style="text-decoration:none" onclick="admin_stop(this,'1')" href="javascript:;" title="停用"> <i class="layui-icon"></i> </a>--> <a title="编辑" href="javascript:;" onclick="admin_edit('编辑','adminadd.html','1','','510')" class="ml-5" style="text-decoration:none"> <i class="layui-icon"></i> </a> <a title="删除" href="javascript:;" onclick="admin_del(this,'1')" style="text-decoration:none"> <i class="layui-icon"></i> </a> </td> </tr> <tr> <td> <input type="checkbox" value="1" name=""> </td> <td> 2 </td> <td> admin1 </td> <td > 1111111111 </td> <td > 111111111@qq.com </td> <td > 超级管理员 </td> <td> 1970-01-01 08:00:00 </td> <td class="td-status"> <span class="layui-btn layui-btn-normal " onclick="admin_stop(this,'2',0)"> 启用 </span> </td> <td class="td-manage"> <!--<a style="text-decoration:none" onclick="admin_stop(this,'2')" href="javascript:;" title="停用"> <i class="layui-icon"></i> </a>--> <a title="编辑" href="javascript:;" onclick="admin_edit('编辑','adminadd.html','2','','510')" class="ml-5" style="text-decoration:none"> <i class="layui-icon"></i> </a> <a title="删除" href="javascript:;" onclick="admin_del(this,'1')" style="text-decoration:none"> <i class="layui-icon"></i> </a> </td> </tr> <tr> <td> <input type="checkbox" value="1" name=""> </td> <td> 3 </td> <td> admin2 </td> <td > 11111111 </td> <td > 11111111@qq.com </td> <td > 超级管理员 </td> <td> 1970-01-01 08:00:00 </td> <td class="td-status"> <span class="layui-btn layui-btn-normal " onclick="admin_stop(this,'3',0)"> 启用 </span> </td> <td class="td-manage"> <!--<a style="text-decoration:none" onclick="admin_stop(this,'3')" href="javascript:;" title="停用"> <i class="layui-icon"></i> </a>--> <a title="编辑" href="javascript:;" onclick="admin_edit('编辑','adminadd.html','3','','510')" class="ml-5" style="text-decoration:none"> <i class="layui-icon"></i> </a> <a title="删除" href="javascript:;" onclick="admin_del(this,'1')" style="text-decoration:none"> <i class="layui-icon"></i> </a> </td> </tr> <tr> <td> <input type="checkbox" value="1" name=""> </td> <td> 4 </td> <td> admin </td> <td > 1111111111 </td> <td > 111111111@qq.com </td> <td > </td> <td> 2019-07-20 17:03:28 </td> <td class="td-status"> <span class="layui-btn layui-btn-normal " onclick="admin_stop(this,'4',0)"> 启用 </span> </td> <td class="td-manage"> <!--<a style="text-decoration:none" onclick="admin_stop(this,'4')" href="javascript:;" title="停用"> <i class="layui-icon"></i> </a>--> <a title="编辑" href="javascript:;" onclick="admin_edit('编辑','adminadd.html','4','','510')" class="ml-5" style="text-decoration:none"> <i class="layui-icon"></i> </a> <a title="删除" href="javascript:;" onclick="admin_del(this,'1')" style="text-decoration:none"> <i class="layui-icon"></i> </a> </td> </tr> <tr> <td> <input type="checkbox" value="1" name=""> </td> <td> 5 </td> <td> admin </td> <td > 11111111 </td> <td > 111111111@qq.com </td> <td > </td> <td> 2019-07-20 17:03:41 </td> <td class="td-status"> <span class="layui-btn layui-btn-normal " onclick="admin_stop(this,'5',0)"> 启用 </span> </td> <td class="td-manage"> <!--<a style="text-decoration:none" onclick="admin_stop(this,'5')" href="javascript:;" title="停用"> <i class="layui-icon"></i> </a>--> <a title="编辑" href="javascript:;" onclick="admin_edit('编辑','adminadd.html','5','','510')" class="ml-5" style="text-decoration:none"> <i class="layui-icon"></i> </a> <a title="删除" href="javascript:;" onclick="admin_del(this,'1')" style="text-decoration:none"> <i class="layui-icon"></i> </a> </td> </tr> </tbody> </table> <div id="page"></div> </div> <script src="lib/layui/layui.js" charset="utf-8"></script> <script src="js/x-layui.js" charset="utf-8"></script> <script> layui.use(['laydate','element','laypage','layer'], function(){ $ = layui.jquery;//jquery laydate = layui.laydate;//日期插件 lement = layui.element();//面包导航 laypage = layui.laypage;//分页 layer = layui.layer;//弹出层 okLoading.close($); //以上模块根据需要引入 /*laypage({ cont: 'page' ,pages: 100 ,first: 1 ,last: 100 ,prev: '<' ,next: '>' }); */ var start = { min: laydate.now() ,max: '2099-06-16 23:59:59' ,istoday: false ,choose: function(datas){ end.min = datas; //开始日选好后,重置结束日的最小日期 end.start = datas //将结束日的初始值设定为开始日 } }; var end = { min: laydate.now() ,max: '2099-06-16 23:59:59' ,istoday: false ,choose: function(datas){ start.max = datas; //结束日选好后,重置开始日的最大日期 } }; document.getElementById('LAY_demorange_s').onclick = function(){ start.elem = this; laydate(start); } document.getElementById('LAY_demorange_e').onclick = function(){ end.elem = this laydate(end); } }); //批量删除提交 function delAll () { layer.confirm('确认要删除吗?',function(index){ //捉到所有被选中的,发异步进行删除 layer.msg('删除成功', {icon: 1}); }); } /*添加*/ function admin_add(title,url,w,h){ x_admin_show(title,url,w,h); } /*停用*/ function admin_stop(obj,id,e){ layer.confirm(e==1?'你确定要启用吗?':'你确定要禁用吗?',{icon: 3, title:'提示'},function(index){ $.ajax({ type:"post", url:"xxx", data:{id:id,status:e}, dataType:"json", success:function(data) { if(data.status==1){ //发异步把用户状态进行更改 $(obj).attr("class","layui-btn layui-btn-danger "); $(obj).text("隐藏"); $(obj).remove(); layer.msg(data.info,{icon: 6,time:1000}); setTimeout(function(){ window.location.reload(); },1000);return false; }else{ //发异步把用户状态进行更改 $(obj).attr("class","layui-btn layui-btn-normal "); $(obj).text("显示"); $(obj).remove(); layer.msg(data.info,{icon: 5,time:1000});return false; } } }); }); } /*启用*/ function admin_start(obj,id){ layer.confirm('确认要启用吗?',function(index){ //发异步把用户状态进行更改 $(obj).parents("tr").find(".td-manage").prepend('<a style="text-decoration:none" onClick="admin_stop(this,id)" href="javascript:;" title="停用"><i class="layui-icon"></i></a>'); $(obj).parents("tr").find(".td-status").html('<span class="layui-btn layui-btn-normal layui-btn-mini">已启用</span>'); $(obj).remove(); layer.msg('已启用!',{icon: 6,time:1000}); }); } //编辑 function admin_edit (title,url,id,w,h) { url = url+"?id="+id; x_admin_show(title,url,w,h); } /*删除*/ function admin_del(obj,id){ layer.confirm('确认要删除吗?',function(index){ //发异步删除数据 $(obj).parents("tr").remove(); layer.msg('已删除!',{icon:1,time:1000}); }); } </script> </body> </html>,这是我的admin.js:// js/admin.js const AdminManager = { // 获取所有管理员 getAll: function() { return JSON.parse(localStorage.getItem('admins')) || []; }, // 保存所有管理员 saveAll: function(admins) { localStorage.setItem('admins', JSON.stringify(admins)); }, // 获取单个管理员 getById: function(id) { return this.getAll().find(item => item.id == id); }, // 添加或更新管理员 save: function(admin) { let admins = this.getAll(); if (admin.id) { // 更新 const index = admins.findIndex(a => a.id == admin.id); if (index !== -1) { admins[index] = admin; } } else { // 新增 admin.id = this.generateId(); admin.create_time = new Date().toLocaleString(); admins.push(admin); } this.saveAll(admins); return admin; }, // 删除管理员 delete: function(id) { let admins = this.getAll().filter(a => a.id != id); this.saveAll(admins); }, // 生成ID generateId: function() { const admins = this.getAll(); return admins.length > 0 ? Math.max(...admins.map(a => a.id)) + 1 : 1; } }现在的问题是运行出来界面添加删除按钮点了没反应,我现在只需要弄好前端不需要和后端交互,添加的信息存本地就行先不连数据库,请你帮我解决一下,并且一定要给我完整的修改后的代码,
07-04
using System; using System.Collections.Generic; using System.Data.Entity; using System.Linq; using System.Web; using System.Web.Mvc; using WebApplication1.Models; using WebApplication1.Scripts; namespace WebApplication1.Controllers { [LoginActionFitter] public class OrgManagemController : Controller { AoutEntities1 db = new AoutEntities1(); ReturnJsonData jsonData = new ReturnJsonData(); Models.ReturnListJsonData orgTreeList = new Models.ReturnListJsonData(); // GET: OrgManagem public ActionResult Index() { return View(); } #region 查询 /// <summary> /// 模糊查询 /// </summary> /// <param name="page"></param> /// <param name="limit"></param> /// <param name="orgname"></param> /// <returns></returns> public ActionResult GetList(int page, int limit, string orgname) { //返回树形表格 List<object> retultlist = new List<object>(); //第一步 查找所有的一级菜单 var list = db.OrganizationStructure.Where(a => a.ParentId == Guid.Empty).ToList(); if (!string.IsNullOrEmpty(orgname)) { list = db.OrganizationStructure.Where(a => a.OrgName.Contains(orgname)).ToList(); foreach (var itme in list) { ReturnTreeListData obj = new ReturnTreeListData(); obj.ID = itme.ID; obj.parentId = itme.ParentId; obj.name = itme.OrgName; obj.OrgCode = itme.OrgCode; obj.Leve = itme.Leve; obj.CreateDate = itme.CreateDate; obj.ModifyDate = itme.ModifyDate; //验证是否还有有子集 obj.isParent = false; obj.children = null; retultlist.Add(obj); } } else { list = db.OrganizationStructure.Where(a => a.ParentId == Guid.Empty).ToList(); //循环 foreach (var itme in list) { ReturnTreeListData obj = new ReturnTreeListData(); obj.ID = itme.ID; obj.parentId = itme.ParentId; obj.name = itme.OrgName; obj.OrgCode = itme.OrgCode; obj.Leve = itme.Leve; obj.CreateDate = itme.CreateDate; obj.ModifyDate = itme.ModifyDate; //验证是否还有有子集 obj.isParent = db.OrganizationStructure.Where(a => a.ParentId == itme.ID).ToList().Count > 0 ? true : false; if (obj.isParent == true) { //查找所以子集 obj.children = BuildTree(list, itme.ID); } retultlist.Add(obj); } } orgTreeList.code = 0; orgTreeList.count = list.Count; orgTreeList.data = retultlist; return Json(orgTreeList, JsonRequestBehavior.AllowGet); } #endregion public ActionResult GetEditData(Guid nodeId) { var current = db.OrganizationStructure.Find(nodeId); if (current == null) return Json(new { success = false }); // 总公司的ParentId为null或自身(假设总公司ParentId=0或null) var isRoot = current.ParentId == null || current.ParentId == Guid.Empty; var parent = isRoot ? current : db.OrganizationStructure.Find(current.ParentId); return Json(new { parentName = parent.OrgName, parentCode = parent.OrgCode, level = current.Leve, orgName = current.OrgName, orgCode = current.OrgCode, ID = current.ID, parentID = current.ParentId, }, JsonRequestBehavior.AllowGet); } #region 递归调用 /// <summary> /// 递归调用 /// </summary> /// <param name="list"></param> /// <param name="ID"></param> /// <returns></returns> private List<object> BuildTree(List<OrganizationStructure> list, Guid ID) { List<object> Treelist = new List<object>(); List<OrganizationStructure> childList = db.OrganizationStructure.Where(a => a.ParentId == ID).ToList(); //循环 foreach (var itme in childList) { ReturnTreeListData obj = new ReturnTreeListData(); obj.ID = itme.ID; obj.parentId = itme.ParentId; obj.name = itme.OrgName; obj.OrgCode = itme.OrgCode; obj.Leve = itme.Leve; obj.CreateDate = itme.CreateDate; obj.ModifyDate = itme.ModifyDate; obj.isParent = db.OrganizationStructure.Where(a => a.ParentId == itme.ID).ToList().Count > 0 ? true : false; obj.children = BuildTree(childList, itme.ID); Treelist.Add(obj); } return Treelist; } #endregion #region 新增组织机构 /// <summary> /// 新增,修改 /// </summary> /// <returns></returns> public ActionResult Add(OrganizationStructure org) { org.ID = Guid.NewGuid(); org.Leve = 0; org.ParentId = Guid.Empty; org.CreateDate = DateTime.Now; org.ModifyDate = DateTime.Now; db.OrganizationStructure.Add(org); var result = db.SaveChanges(); if (result > 0) { jsonData.code = 0; jsonData.msg = "新增组织机构成功"; } else { jsonData.code = 1; jsonData.msg = "新增失败,请联系管理员"; } return Json(jsonData, JsonRequestBehavior.AllowGet); } #endregion #region 删除 /// <summary> /// 删除操作 /// </summary> /// <param name="id"></param> /// <returns></returns> public ActionResult DelInfo(Guid? id) { if (id == null) { jsonData.code = 1; jsonData.msg = "删除失败,未找到当行数据"; } else { //删除 var entity = db.OrganizationStructure.Find(id); if (entity == null) { jsonData.code = 1; jsonData.msg = "删除失败,未找到当前行数据"; } else { db.OrganizationStructure.Remove(entity); var result = db.SaveChanges(); if (result > 0) { jsonData.code = 0; jsonData.msg = "删除成功"; } else { jsonData.code = 1; jsonData.msg = "删除失败,请联系管理员"; } } } return Json(jsonData, JsonRequestBehavior.AllowGet); } #endregion #region 新增修改 /// <summary> /// 新增,修改 /// </summary> /// <returns></returns> public ActionResult AddTreeInfo(string neworgname, string neworgcode, OrganizationStructure org, Guid?ID, Guid ParentId) { if (ID == null || ID == Guid.Empty) { // 新增逻辑:parentId为父节点ID(新增时需传递) var newOrg = new OrganizationStructure { ID = Guid.NewGuid(), ParentId = ParentId, OrgName = neworgname, OrgCode = neworgcode, Leve = org.Leve, CreateDate = DateTime.Now, ModifyDate = DateTime.Now }; db.OrganizationStructure.Add(newOrg); } else { // 编辑逻辑:通过ID查找当前行(确保是当前行,而非总公司,依赖ID唯一性) var entity = db.OrganizationStructure.Find(ID); if (entity != null) { entity.OrgName = neworgname; entity.OrgCode = neworgcode; entity.Leve = org.Leve; entity.ModifyDate = DateTime.Now; db.Entry(entity).State = EntityState.Modified; } } var result = db.SaveChanges(); if (result > 0) { jsonData.code = 0; jsonData.msg = "保存成功"; } else { jsonData.code = 1; jsonData.msg = "保存失败,请联系管理员"; } return Json(jsonData, JsonRequestBehavior.AllowGet); } #endregion } } @{ Layout = null; } <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Demo</title> <!-- 请勿在项目正式环境中引用该 layui.css 地址 --> <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% } .editInfo { display: none; } .addeditInfo { display: none; } .addorgfrom { border-radius: 8px; width: 400px; max-width: 100%; padding: 0px 35px 0; margin: auto; position: absolute; top: 60%; left: 55%; margin: -120px 0 0 -230px; } .addform { border-radius: 8px; width: 400px; max-width: 100%; padding: 0px 35px 0; margin: auto; position: absolute; top: 40%; left: 54%; margin: -120px 0 0 -230px; } .layui-form-item { margin-left: -31px; } </style> </head> <body> <fieldset class="layui-elem-field"> <legend> <span class="layui-breadcrumb"> <a href="/Home/Index">首页</a> <a href="/JobManagem/Index">组织机构管理管理</a> </span> </legend> <div class="layui-field-box"> <div class="layui-form-item"> <div class="layui-inline"> <label class="layui-form-label" style="width:90px;">组织机构名称</label> <div class="layui-input-block" style="margin-left:120px"> <input type="text" name="orgname" id="name" autocomplete="off" class="layui-input"> </div> </div> <button type="button" class="layui-btn layui-btn but" style=" margin-bottom: 4px;" id="searchButton" onclick="Search()"><i class="layui-icon layui-icon-search"></i>查询</button> <button type="button" class="layui-btn layui-bg-blue but" style=" margin-bottom: 4px;" onclick="Add()"><i class="layui-icon layui-icon-addition"></i>添加</button> </div> </div> </fieldset> <table class="layui-hide" id="ID-treeTable-demo" lay-filter="test"></table> <script type="text/html" id="TPL-treeTable-demo-tools"> <div class="layui-btn-container"> <a class="layui-btn layui-btn-warm layui-btn-xs" lay-event="add"><i class="layui-icon layui-icon-add-circle"></i>新增</a> <a class="layui-btn layui-bg-blue layui-btn-xs" lay-event="edit"><i class="layui-icon layui-icon-edit"></i>编辑</a> <a class="layui-btn layui-bg-red layui-btn-xs" lay-event="del"><i class="layui-icon layui-icon-delete"></i>删除</a> </div> </script> <div class="editInfo"> <form class="layui-form layui-form-pane addorgfrom" action="" lay-filter="demo-val-filter"> <input type="hidden" name="ID" /> <div class="layui-form-item"> <label class="layui-form-label" style="width:130px">组织机构名称</label> <div class="layui-input-block"> <input type="text" name="orgname" autocomplete="off" placeholder="请输入组织机构名称" lay-verify="required" class="layui-input" style="width:87%"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label" style="width:130px">组织机构代码</label> <div class="layui-input-block"> <input type="text" name="orgcode" autocomplete="off" placeholder="请输入组织机构代码" lay-verify="required" class="layui-input" style="width:87%"> </div> </div> <div class="layui-form-item" style="text-align:center" id="but"> <div class="layui-input-block" style="margin-left:-53px;padding:10px"> <button type="submit" class="layui-btn" lay-submit lay-filter="demo1" id="add" style="margin:10px">保存</button> <button type="reset" class="layui-btn layui-btn-primary" style="margin-left:30px;">重置</button> </div> </div> </form> </div> @*表格内的新增*@ <div class="addeditInfo"> <form class="layui-form layui-form-pane addform" action="" lay-filter="demo-val-filter"> <input type="hidden" name="ID" /> <input type="hidden" name="ParentId" /> <div class="layui-form-item"> <label class="layui-form-label" style="width:130px">上一级菜单名称</label> <div class="layui-input-block"> <input type="text" name="orgname" autocomplete="off" disabled="disabled" placeholder="请输入组织机构名称" lay-verify="required" class="layui-input" style="width:87%"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label" style="width:130px">上一级菜单代码</label> <div class="layui-input-block"> <input type="text" name="orgncode" autocomplete="off" disabled="disabled" placeholder="请输入组织机构名称" lay-verify="required" class="layui-input" style="width:87%"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label" style="width:120px">当前级别</label> <div class="layui-input-block" style="margin-left: 121px;width:289px"> <select name="leve" lay-verify="required"> <option value="">请选择级别</option> <option value="0">集团总部</option> <option value="1">分公司</option> <option value="2">部门</option> <option value="3">其他</option> </select> </div> </div> <div class="layui-form-item"> <label class="layui-form-label" style="width:120px">组织机构名称</label> <div class="layui-input-block"> <input type="text" name="neworgname" autocomplete="off" placeholder="请输入组织机构名称" lay-verify="required" class="layui-input" style="width:90%"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label" style="width:120px">组织机构代码名称</label> <div class="layui-input-block"> <input type="text" name="neworgcode" autocomplete="off" placeholder="请输入组织机构代码名称" lay-verify="required" class="layui-input" style="width:90%"> </div> </div> <div class="layui-form-item" style="text-align:center" id="but"> <div class="layui-input-block" style="margin-left:-53px;padding:10px"> <button type="submit" class="layui-btn" lay-submit lay-filter="demo2" id="add" style="margin:10px">保存</button> <button type="reset" class="layui-btn layui-btn-primary" style="margin-left:30px;">重置</button> </div> </div> </form> </div> <script> var SearchtreeTable; layui.use(['form', 'table'], function () { var table = layui.table; var treeTable = layui.treeTable; var layer = layui.layer; var form = layui.form; // 渲染 var inst = treeTable.render({ elem: '#ID-treeTable-demo', url: '/OrgManagem/GetList', // 此处为静态模拟数据,实际使用时需换成真实接口 cols: [[ { type: 'checkbox', }, { field: 'ID', title: 'ID', hide: true }, // 隐藏但保留数据 { field: 'ParentId', title: '父ID', hide: true }, // 隐藏但保留数据 { field: 'name', title: '组织机构名称', width: '30%', }, { field: 'OrgCode', title: '组织机构代码', width: '30%', sort: true }, { field: 'Leve', title: '级别', width: '20%', sort: true, templet: function (d) { switch (d.Leve) { case 0: return "集团总部"; break; case 1: return "分公司"; break; case 2: return "部门"; break; default: return "其他"; break; } } }, { title: "操作", width: '16%', align: "center", toolbar: "#TPL-treeTable-demo-tools" } ]], tree: { iconIndex: 1, // 图标显示在第 2 列(对应“组织机构名称”列,索引从 0 开始) isParent: 'isParent', // 绑定后台的 `isParent` 字段(标识是否有子节点) // 删除 async 配置!后台已返回完整 children 数组,无需异步加载 }, page: true }); SearchtreeTable = inst; //编辑,删除 table.on('tool(test)', function (obj) { // 双击 toolDouble var data = obj.data; // 获得当前行数据 // console.log(obj) if (obj.event === 'add') { //新增子集 layer.open({ type: 1, // page 层类型 area: ['550px', '480px'], title: '新增组织机构', shade: 0.6, // 遮罩透明度 shadeClose: false, // 点击遮罩区域,关闭弹层 maxmin: false, // 允许全屏最小化 anim: 0, // 0-6 的动画形式,-1 不开启 content: $(".addeditInfo").html() }); //赋值 form.val('demo-val-filter', { "orgname": data.name, "orgncode": data.OrgCode, "ID": null, "ParentId": data.ID }); } else if (obj.event === 'edit') { //编辑 //修改编辑职位 layer.open({ type: 1, area: ['550px', '480px'], title: '编辑组织机构', shade: 0.6, // 遮罩透明度 shadeClose: false, // 点击遮罩区域,关闭弹层 maxmin: false, // 允许全屏最小化 anim: 0, // 0-6 的动画形式,-1 不开启 content: $('.addeditInfo').html(), success: function () { $.ajax({ url: '/OrgManagem/GetEditData', data: { nodeId: data.ID }, success: function (res) { // 填充数据,处理父节点不存在的情况 form.val('demo-val-filter', { "orgname": res.parentName || data.name, // 父节点不存在时显示自身名称 "orgncode": res.parentCode || data.orgCode, // 父节点不存在时显示自身代码 "leve": res.level, "neworgname": data.name, "neworgcode": data.OrgCode, "ID": res.ID, "ParentId": res.parentID }); } }); } }); } else { layer.confirm('真的删除行 [' + data.name + '] 么', function (index) { obj.del(); // 删除对应行(tr)的DOM结构 layer.close(index); // 向服务端发送删除指令 $.ajax({ url: '/OrgManagem/DelInfo', type: 'post', data: { id: data.ID }, success: function (res) { if (res.code == 0) { layer.msg(res.msg, { icon: 6, time: 1500 }, function () { Search(); }) } else { layer.msg(res.msg, { icon: 5, time: 1500 }) } } }) }); } }); // 提交事件 form.on('submit(demo1)', function (data) { var field = data.field; // 获取表单字段值 // 此处可执行 Ajax 等操作 $.ajax({ url: '/OrgManagem/Add', type: 'post', data: field, success: function (res) { if (res.code == 0) { layer.msg(res.msg, { icon: 6, time: 3000 }, function () { layer.closeAll(); // 关闭所有类型的层 Search(); }); } else { layer.msg(res.msg, { icon: 5, time: 2000 }); } } }) return false; // 阻止默认 form 跳转 }); // 提交事件 form.on('submit(demo2)', function (data) { var field = data.field; // 获取表单字段值 var leve = data.leve; var ParentId = data.ParentId; // 此处可执行 Ajax 等操作 $.ajax({ url: '/OrgManagem/AddTreeInfo', type: 'post', data: field, leve, ParentId, success: function (res) { if (res.code == 0) { layer.msg(res.msg, { icon: 6, time: 3000 }, function () { layer.closeAll(); // 关闭所有类型的层 Search(); }); } else { layer.msg(res.msg, { icon: 5, time: 2000 }); } } }) return false; // 阻止默认 form 跳转 }); }); //重载,模糊查询 function Search() { var nameVal = $('input[name="orgname"]').val().trim(); // 完整重载 - 所有属性属性(options)均可参与到重载中 SearchtreeTable.reload({ where: { // 传递数据异步请求时携带的字段 orgname: nameVal, }, height: 500 // 重设高度 }); } //添加 function Add() { // 在此处输入 layer 的任意代码 layer.open({ type: 1, // page 层类型 area: ['550px', '350px'], title: '新增组织机构', shade: 0.6, // 遮罩透明度 shadeClose: true, // 点击遮罩区域,关闭弹层 maxmin: true, // 允许全屏最小化 anim: 0, // 0-6 的动画形式,-1 不开启 content: $(".editInfo").html() }); } </script> </body> </html>按照这中代码格式和风格写出上面的添加和编辑
最新发布
07-15
@{ 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: 97% } .but { margin-top: -5px } .editInfo { display: none; } </style> </head> <body> <fieldset class="layui-elem-field"> <legend> <span class="layui-breadcrumb"> <a href="">基本信息管理</a> <a href="/UserManagem/Index" >员工管理</a> </span> </legend> <div class="layui-field-box"> <div class="layui-form-item"> <div class="layui-inline"> <label class="layui-form-label" style="width: 60px;">员工账号</label> <div class="layui-input-block"> <input type="text" name="code" id="code" autocomplete="off" class="layui-input"> </div> </div> <div class="layui-inline"> <label class="layui-form-label" style="width: 60px;">员工姓名</label> <div class="layui-input-inline"> <input type="text" name="name" id="name" 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="Add()"><i class="layui-icon layui-icon-addition"></i>添加</button> <button type="button" class="layui-btn layui-btn-danger layui-btn-radius"><i class="layui-icon layui-icon-delete"></i>批量删除</button> <button type="button" class="layui-btn layui-btn-danger layui-btn-radius"><i class="layui-icon layui-icon-export"></i>导出</button> <button type="button" class="layui-btn but" id="searchButton"><i class="layui-icon layui-icon-upload"></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"><i class="layui-icon layui-icon-clear"></i>删除</a> </div> <!-- 在视图中添加以下隐藏表单 --> <div class="editInfo" style="padding:15px;"> <form class="layui-form" id="editForm"> <input type="hidden" name="ID" id="ID"> <div class="layui-form-item"> <label class="layui-form-label">员工账号</label> <div class="layui-input-block"> <input type="text" name="UserCode" required lay-verify="required" class="layui-input"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">员工姓名</label> <div class="layui-input-block"> <input type="text" name="UserName" required lay-verify="required" class="layui-input"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">性别</label> <div class="layui-input-block"> <input type="radio" name="Sex" value="true" title="男" checked> <input type="radio" name="Sex" value="false" title="女"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">出生日期</label> <div class="layui-input-block"> <input type="text" name="BirthDay" id="BirthDay" class="layui-input"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">邮箱</label> <div class="layui-input-block"> <input type="text" name="Email" class="layui-input"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">电话</label> <div class="layui-input-block"> <input type="text" name="Tel" class="layui-input"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">地址</label> <div class="layui-input-block"> <input type="text" name="Address" class="layui-input"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">状态</label> <div class="layui-input-block"> <input type="checkbox" name="Status" lay-skin="switch" lay-text="离职|在职"> </div> </div> <div class="layui-form-item"> <div class="layui-input-block"> <button class="layui-btn" lay-submit lay-filter="saveBtn">保存</button> <button type="reset" class="layui-btn layui-btn-primary">重置</button> </div> </div> </form> </div> </script> </fieldset> <script> var tableIns; var form; var isEdit; layui.use(['table', 'form',], function () { var table = layui.table; form = layui.form; // 修正:移除重复的var声明 // 创建渲染实例 tableIns = table.render({ elem: '#test', url: '/UserManagem/GetList', page: true, cols: [[ { type: 'checkbox', width: '5%', title: '' }, { type: 'numbers', width: '5%', title: '序号' }, { field: 'UserCode', width: '8%', title: '员工账号' }, { field: 'UserName', width: '8%', title: '员工姓名' }, { field: 'Sex', width: '8%', title: '性别', templet: function (d) { return d.Sex ? "男" : "女"; // 修正:使用大写的Sex } }, { field: 'BirthDay', width: '8%', title: '出生日期', templet: function (d) { return convertJsonDate(d.BirthDay); } }, { field: 'BirthDay', width: '8%', title: '年龄', templet: function (d) { return calculateAge(d.BirthDay); } }, { field: 'Status', width: '8%', title: '是否离职', templet: function (d) { return d.Status ? "离职" : "在职"; } }, { field: 'Email', width: '8%', title: '邮箱' }, { field: 'Tel', width: '8%', title: '电话' }, { field: 'CreateDate', width: '8%', title: '创建时间', templet: function (d) { return convertJsonDate(d.CreateDate); } }, { field: 'Address', width: '8%', title: '员工住址' }, { title: '操作', width: '10.5%', templet: '#toolDemo' } ]], done: function (res, curr, count) { // 数据渲染完成后的回调 if (res.code !== 0) { // 假设0是成功状态码 layer.msg('数据加载失败: ' + res.msg, { icon: 5 }); } }, error: function () { // 请求错误的回调 layer.msg('网络请求错误,请检查接口', { icon: 5 }); } }); //编辑,删除 table.on('tool(test)', function (obj) { // 双击 toolDouble var data = obj.data; // 获得当前行数据 var field = obj.field; // 得到字段 var value = obj.value; // 得到修改后的值 var data = obj.data; // 得到所在行所有键值 // console.log(obj) if (obj.event === 'edit') { //编辑 //修改编辑职位 layer.open({ type: 1, // page 层类型 area: ['500px', '300px'], title: '编辑职位', shade: 0.6, // 遮罩透明度 shadeClose: false, // 点击遮罩区域,关闭弹层 maxmin: false, // 允许全屏最小化 anim: 0, // 0-6 的动画形式,-1 不开启 content: $(".editInfo").html() }); //赋值 form.val('demo-val-filter', { "jobname": data.JobName, "jobcode": data.JobCode, "ID": data.ID }); } else { layer.confirm('真的删除员工 [' + data.UserCode + '] 么', function (index) { obj.del(); // 删除对应行(tr)的DOM结构 layer.close(index); // 向服务端发送删除指令 $.ajax({ url: '/UserManagem/DelInfo', type: 'post', data: { id: data.ID }, success: function (res) { if (res.code == 0) { layer.msg(res.msg, { icon: 6, time: 1500 }, function () { Search(); }) } else { layer.msg(res.msg, { icon: 5, time: 1500 }) } } }) }); } }); }); // 处理日期格式函数 function convertJsonDate(jsonDate) { if (!jsonDate) return ''; try { // 提取时间戳 const timestamp = parseInt(jsonDate.match(/\d+/)[0]); // 创建 Date 对象 const date = new Date(timestamp); // 获取年、月、日 const year = date.getFullYear(); const month = (date.getMonth() + 1).toString().padStart(2, '0'); const day = date.getDate().toString().padStart(2, '0'); // 返回格式化后的日期 return `${year}-${month}-${day}`; } catch (e) { console.error('日期格式化错误:', e); return jsonDate; } } //表单提交事件,新增和编辑 form.on('submit(demo1)', function (data) { var field = data.field; // 获取表单字段值 $.ajax({ url: '/UserManagem/Add', type: 'post', data: field, success: function (res) { if (res.code == 0) { layer.msg(res.msg, { icon: 6, time: 3000 }, function () { layer.closeAll(); // 关闭所有类型的层 Search(); }); } else { layer.msg(res.msg, { icon: 5, time: 2000 }); } } }) }) //重载,模糊查询 function Search() { var nameVal = $('input[name="name"]').val().trim(); var codeVal = $('input[name="code"]').val().trim(); // 完整重载 - 所有属性属性(options)均可参与到重载中 tableIns.reload({ where: { // 传递数据异步请求时携带的字段 name: nameVal, code: codeVal }, height: 500 // 重设高度 }); } // 处理日期格式函数 function convertJsonDate(jsonDate) { // 提取时间戳 const timestamp = parseInt(jsonDate.match(/\d+/)[0]); // 创建 Date 对象 const date = new Date(timestamp); // 获取年、月、日 const year = date.getUTCFullYear(); const month = (date.getUTCMonth() + 1).toString().padStart(2, '0'); const day = date.getUTCDate().toString().padStart(2, '0'); // 返回格式化后的日期 return `${year}-${month}-${day}`; } //新增职位 function Add() { // 在此处输入 layer 的任意代码 layer.open({ type: 1, // page 层类型 area: ['500px', '300px'], title: '新建职位', shade: 0.6, // 遮罩透明度 shadeClose: false, // 点击遮罩区域,关闭弹层 maxmin: false, // 允许全屏最小化 anim: 0, // 0-6 的动画形式,-1 不开启 content: $(".editInfo").html() }); } function calculateAge(jsonBirthDate) { if (!jsonBirthDate) return ''; try { // 先转换为日期格式 const birthDate = convertJsonDateToDate(jsonBirthDate); const today = new Date(); let age = today.getFullYear() - birthDate.getFullYear(); const monthDiff = today.getMonth() - birthDate.getMonth(); if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birthDate.getDate())) { age--; } return age; } catch (e) { console.error('年龄计算错误:', e); return ''; } } // 辅助函数:将JSON日期转换为Date对象 function convertJsonDateToDate(jsonDate) { const timestamp = parseInt(jsonDate.match(/\d+/)[0]); return new Date(timestamp); } </script> </body> </html> 实现男女动态选择
07-15
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值