用layui写一个用户信息管理页面,有ID,姓名,性别,电话,地址,状态(是否已故),操作,
时间: 2024-06-08 15:05:59 浏览: 92
养老保险信息管理系统.docx
5星 · 资源好评率100%
HTML代码如下:
```
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>用户信息管理</title>
<link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.5.6/css/layui.min.css">
</head>
<body>
<!-- 用户信息表格 -->
<table class="layui-table" lay-filter="userTable" lay-data="{height: 'full-200', url: 'data.json', page: true, limit: 10, id: 'userTable'}">
<thead>
<tr>
<th lay-data="{field:'id', sort:true}">ID</th>
<th lay-data="{field:'name'}">姓名</th>
<th lay-data="{field:'gender'}">性别</th>
<th lay-data="{field:'phone'}">电话</th>
<th lay-data="{field:'address'}">地址</th>
<th lay-data="{field:'status'}">状态</th>
<th lay-data="{field:'oper', toolbar:'#barDemo'}">操作</th>
</tr>
</thead>
</table>
<!-- 操作栏工具模板 -->
<script type="text/html" id="barDemo">
<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<!-- 引入layui.js -->
<script src="https://cdn.staticfile.org/layui/2.5.6/layui.min.js"></script>
</body>
</html>
```
其中,我们使用了Layui框架的表格组件和工具栏模板,通过AJAX请求获取JSON格式的用户信息数据,渲染到表格中。
接下来,我们还需要编写data.json文件,用于存储用户信息数据。示例代码如下:
```
{
"code": 0,
"msg": "",
"count": 100,
"data": [
{
"id": 10001,
"name": "张三",
"gender": "男",
"phone": "13888888888",
"address": "北京市海淀区",
"status": "未故"
},
{
"id": 10002,
"name": "李四",
"gender": "女",
"phone": "13999999999",
"address": "上海市浦东新区",
"status": "未故"
},
// ...省略其他用户信息
]
}
```
最后,我们还需要编写JavaScript代码,为表格添加编辑和删除功能。示例代码如下:
```
<script>
layui.use('table', function(){
var table = layui.table;
// 监听工具栏按钮点击事件
table.on('tool(userTable)', function(obj){
var data = obj.data; // 获取当前行数据
if(obj.event === 'edit'){ // 编辑
layer.msg('ID:'+ data.id + ' 的用户信息已编辑');
} else if(obj.event === 'del'){ // 删除
layer.confirm('确定删除 ID 为 '+ data.id +' 的用户信息吗?', function(index){
obj.del(); // 删除表格中对应数据
layer.close(index);
});
}
});
});
</script>
```
通过Layui框架的工具栏模板和事件监听,我们可以轻松实现表格中编辑和删除按钮的功能。
阅读全文