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>