用layui写监狱管理系统前端
时间: 2024-05-12 17:08:23 浏览: 158
好的,下面是一个简单的监狱管理系统前端的代码示例,使用了layui框架:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>监狱管理系统</title>
<link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.5.5/css/layui.css">
</head>
<body>
<div class="layui-container">
<div class="layui-row">
<div class="layui-col-md9">
<div class="layui-card">
<div class="layui-card-header">犯人管理</div>
<div class="layui-card-body">
<table class="layui-table" lay-data="{url:'/api/prisoners', page:true, limit:10, id:'prisonersTable'}" lay-filter="prisoners">
<thead>
<tr>
<th lay-data="{field:'name', sort:true}">姓名</th>
<th lay-data="{field:'gender', sort:true}">性别</th>
<th lay-data="{field:'age', sort:true}">年龄</th>
<th lay-data="{field:'crime', sort:true}">罪名</th>
<th lay-data="{field:'sentence', sort:true}">刑期</th>
<th lay-data="{field:'cellNumber', sort:true}">所在牢房</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
<div class="layui-col-md3">
<div class="layui-card">
<div class="layui-card-header">添加犯人</div>
<div class="layui-card-body">
<form class="layui-form" action="">
<div class="layui-form-item">
<label class="layui-form-label">姓名</label>
<div class="layui-input-block">
<input type="text" name="name" 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="radio" name="gender" value="男" title="男" checked>
<input type="radio" name="gender" value="女" title="女">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">年龄</label>
<div class="layui-input-block">
<input type="number" name="age" 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" name="crime" 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" name="sentence" 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" name="cellNumber" required lay-verify="required" placeholder="请输入牢房号" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" lay-submit lay-filter="addPrisoner">添加</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.staticfile.org/layui/2.5.5/layui.js"></script>
<script>
layui.use(['table', 'form'], function(){
var table = layui.table;
var form = layui.form;
//监听提交
form.on('submit(addPrisoner)', function(data){
//提交表单
$.ajax({
type: "POST",
url: "/api/prisoners",
data: JSON.stringify(data.field),
contentType: "application/json;charset=utf-8",
success: function(result){
//添加成功后重新渲染表格
table.reload('prisonersTable', {
page: {
curr: 1 //重新从第 1 页开始
}
});
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
alert("添加失败,请重试!");
}
});
return false;
});
});
</script>
</body>
</html>
```
这个示例使用了layui的表格和表单组件,以及jQuery库。其中,表格使用了异步加载数据的方式,通过ajax请求后端API获取数据并渲染表格;表单使用了ajax提交数据的方式,将表单数据以JSON格式提交到后端API进行处理。你可以根据实际需求进行修改和扩展。
阅读全文