1.点击编辑页面的js,关键点在于content的值要带上ip的值
else if(obj.event === 'edit'){ layer.open({ type: 2, content: "{% url 'modify_vm' %}?ip=" + data.ip, area: ['40%','80%'], title: ['修改服务器信息', 'font-size:28px;'], }); }
2.渲染表单
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <title>运维管理系统</title> <link rel="stylesheet" type="text/css" href="/static/layui/css/layui.css"> <script src="/static/layui/layui.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div class="layui-row"> <div class="layui-col-md6"> <div class="layui-card"> <div class="layui-card-body"> <form class="layui-form" action="" "return false"> <div class="layui-form-item"> <label class="layui-form-label">IP地址</label> <div class="layui-input-block"> <input type="text" id='ip' name="ip" value="" autocomplete="off" class="layui-input" disabled> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">CPU核心数</label> <div class="layui-input-block"> <input type="text" id="cpu" name="cpu" value="" required lay-verify="required|number" placeholder="请输入CPU核心数" autocomplete="on" class="layui-input"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">内存大小(G)</label> <div class="layui-input-block"> <input type="text" id="memory" name="memory" value="" required lay-verify="required|number" placeholder="请输入内存大小" autocomplete="on" class="layui-input"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">磁盘大小(G)</label> <div class="layui-input-block"> <input type="text" id="disk" name="disk" value="" required lay-verify="required|number" placeholder="请输入磁盘大小" autocomplete="on" 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="os" name="os" value="" required lay-verify="required" autocomplete="on" 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="department" name="department" value="" required lay-verify="required" autocomplete="on" 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="manager" name="manager" value="" required lay-verify="required" autocomplete="on" class="layui-input"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">服务器状态</label> <div class="layui-input-block"> <input type="radio" id="status" name="status" value="运行" title="运行" checked> <input type="radio" id="status" name="status" value="故障" title="故障"> <input type="radio" id="status" name="status" value="停机" title="停机"> <input type="radio" id="status" name="status" value="回收" title="回收"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">账号信息</label> <div class="layui-input-block"> <input type="text" id="account" name="account" value="" required lay-verify="required" placeholder="请输入账号信息" 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="text" id="label" name="label" value="" required lay-verify="required" placeholder="请输入用途" autocomplete="off" class="layui-input"> </div> </div> <div class="layui-form-item layui-form-text"> <label class="layui-form-label">详细信息</label> <div class="layui-input-block"> <textarea id="info" name="info" value="" placeholder="请输入详细信息" class="layui-textarea"></textarea> </div> </div> <div class="layui-form-item"> <div class="layui-input-block"> <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button> </div> </div> </form> </div> </div> </div> </div> <script> layui.use(['form','layer'], function(){ //导入模块 var form = layui.form; var $ = layui.jquery; var layer = layui.layer; //从后端获取数据填充到表单 var vmInfo = {{ result.data | safe }} document.getElementById('ip').value=vmInfo.ip; //修改默认值 document.getElementById('cpu').value=vmInfo.cpu; document.getElementById('memory').value=vmInfo.memory; document.getElementById('disk').value=vmInfo.disk; document.getElementById('os').value=vmInfo.os; document.getElementById('department').value=vmInfo.department; document.getElementById('manager').value=vmInfo.manager; //document.getElementById('status').value=vmInfo.status; document.getElementById('account').value=vmInfo.account; document.getElementById('label').value=vmInfo.label; document.getElementById('info').value=vmInfo.info; form.render(); //监听提交 form.on('submit(formDemo)', function(data){ $.ajax({ type: "PUT", url: "{% url 'vmApi' %}", data: data.field, success: function (result) { if (result.code == "0") { layer.msg(result.msg, { icon: 6, time: 1000, //等待1秒 }, function () { var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引 parent.layer.close(index); //关闭弹出层 window.parent.location.reload(); //刷新父页面 } ); } else { layer.msg(result.msg, {icon: 5}) } } }) }); }); </script> </body> </html>