|
|
<%@ page language="java" contentType="text/html; charset=UTF-8"
|
|
|
pageEncoding="UTF-8"%> // 设置页面的语言为Java，字符编码为UTF-8,设置页面的编码为UTF-8
|
|
|
<!DOCTYPE html> <!-- 声明HTML文档类型为HTML5 -->
|
|
|
<html lang="en"> <!-- 设置网页的语言为英语 -->
|
|
|
<head>
|
|
|
<meta charset="UTF-8"> <!-- 设置字符集为UTF-8，确保正确显示中文等字符 -->
|
|
|
<title>test</title> <!-- 设置网页的标题为“test” -->
|
|
|
<!-- 引入layui样式 -->
|
|
|
<link rel="stylesheet" href="../public/layui/css/layui.css"> <!-- 引入layui的CSS文件 -->
|
|
|
<script src="../public/layui/layui.js"></script> <!-- 引入layui的JavaScript文件 -->
|
|
|
<style>
|
|
|
.layui-table{ // 自定义样式，设置layui表格的外边距
|
|
|
margin-top: 0px; // 设置表格的上外边距为0
|
|
|
}
|
|
|
</style>
|
|
|
</head>
|
|
|
<body>
|
|
|
<table id="demo" lay-filter="test"> <!-- 创建一个表格，id为demo，lay-filter属性指定表格的过滤器 -->
|
|
|
</table>
|
|
|
<script type="text/html" id="operate"> <!-- 定义一个操作模板，用于在表格的每行展示操作按钮 -->
|
|
|
<button type="button" class="layui-btn layui-btn-warm">修改</button> <!-- 修改按钮 -->
|
|
|
<button type="button" class="layui-btn layui-btn-danger">删除</button> <!-- 删除按钮 -->
|
|
|
</script>
|
|
|
<script>
|
|
|
layui.use('table', function(){ // 使用layui的table组件
|
|
|
var table = layui.table; // 获取table组件实例
|
|
|
table.render({ // 渲染表格
|
|
|
elem: '#demo' // 表格容器的选择器
|
|
|
,height: 600 // 设置表格的高度为600px
|
|
|
//,url: './data.json' // 这里是一个注释掉的代码，表示数据源可以是JSON文件
|
|
|
,url: './bookList' // 设置表格数据的接口地址
|
|
|
,title: '数据表单' // 设置表格的标题为“数据表单”
|
|
|
,toolbar: true // 启用表格的工具栏
|
|
|
,page: true // 启用分页功能
|
|
|
,size: 'lg' // 设置表格的尺寸为“大”
|
|
|
,cols: [[ // 定义表格的列
|
|
|
{field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'} // ID列，宽度为80，支持排序，固定在左侧
|
|
|
,{field: 'name', title: '姓名', width:120} // 姓名列，宽度为120
|
|
|
,{field: 'library_name', title: '图书馆', width:80} // 图书馆列，宽度为80
|
|
|
,{field: 'sort_id', title: '分类', width: 177} // 分类列，宽度为177
|
|
|
,{field: 'position_id', title: '位置', width: 80, sort: true} // 位置列，宽度为80，支持排序
|
|
|
,{field: 'state', title: '状态', width: 80, sort: true} // 状态列，宽度为80，支持排序
|
|
|
,{field: 'descript', title: '描述', width: 80} // 描述列，宽度为80
|
|
|
,{field: 'operate', title: '操作', width: 200, templet: '#operate'} // 操作列，宽度为200，使用之前定义的操作模板
|
|
|
]]
|
|
|
});
|
|
|
});
|
|
|
</script>
|
|
|
</table>
|
|
|
</body>
|
|
|
</html>
|
