这篇博客介绍了如何使用Layui框架创建数据表格，包括动态添加数据、导出与打印功能。示例代码展示了如何配置table元素，如设置字段名、标题、固定项和排列方式，并通过layui的table模块进行渲染。此外，还提到了将HTML静态表格转化为Layui动态表格的方法。
Layui数据表格
实现功能:
1.table表格
2在table表格中动态添加数据
3可以导出与打印
需要:layui框架, 自行创建数据库;
网页效果:
代码:
<link href="~/content/bootstrap-4.5.0-dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="~/content/layui/css/layui.css" rel="stylesheet" />
<div class="container mt-3">
<table id="demo" lay-filter="demo"></table>
</div>
<script src="~/content/jquery-3.2.1.min.js"></script>
<script src="~/content/layui/layui.js"></script>
<script>
layui.use('table', function () {
var table = layui.table;
table.render({
elem: '#demo',
url: '/index/select',
toolbar:'defaultToolbar',
cols: [[
{ title: '序号', fixed: 'left',type:'numbers' },
{ field: 'academeName', title: '学院名', align: 'center' },
{ field: 'gradeName', title: '年级名称', align: 'center' },
{ field: 'specialtyName', title: '专业名称', align: 'center' },
{ field: 'className', title: '班级名称', align: 'center' },
{ field: 'studentName', title: '学生名', align: 'center' },
{ field: 'studentSex', title: '性别', align: 'center' },
{ field: 'studentIDNum', title: '身份证号码', align: 'center' },
{ field: 'studentNumber', title: '学生编号', align: 'center' }
]]
})
})
$.post("/index/select", function (myg) {//印证有没有获取数据
console.log(myg);
})
</script>
这个表格用的是layui框架中的内置模块中的数据表格使用方法渲染方式完成的；
方法渲染是”自动化渲染”的手动模式,本质类似，只是”方法级渲染”将基础参数的设定放在js代码中且原始的table标签只需要一个;
下面说一下上面配置项的作用吧;
elem 类型 string/DOM 指定原始table容器的选择器或DOM,方法渲染必填
url 异步数据接口*相关参数.其中url参数为必填项
toolbar类型 string/DOM/Boolean 开启表格头部工具栏区域这其中的defaultToolbar 的作用是自由配置头部工具栏右侧的图标数组支持以下可选值:
Filter:显示筛选图标;
Exports:显示导入图标 ；
Print:显示打印图标；使用该配置项实现了导入和打印功能;
Cols 类型 Array 设置表头。值是一个二维数组,方法渲染方式必填
Field 类型string 设置字段名.字段名的设置非常重要,且是表格数据列的唯一标识;
title 类型 string 设置标题名称;
fixed 类型 string 固定项这上面设定的是left固定在左.一旦设定,对应的项会被固定在左或右,不随滚动条而滚动;
align 类型 string单元格排列方式.
接下来是转换静态表格;将HTML中的表格通过layui框架转换为静态表格
代码如下:
<body>
<table lay-filter="demo">
<thead>
<tr>
<th lay-data="{field:'username',width:100}">学院名</th>
<th lay-data="{field:'experience',width:80,sort:true}">学生名</th>
<th lay-data="{field:'sign'}">编号</th>
</tr>
</thead>
<tbody>
<tr>
<td>迦南中学</td>
<td>小明</td>
<td>1</td>
</tr>
<tr>
<td>迦南中学</td>
<td>小明</td>
<td>1</td>
</tr>
<tr>
<td>迦南中学</td>
<td>小明</td>
<td>1</td>
</tr>
</tbody>
</table>
<script src="~/content/layui/layui.js"></script>
<script>
var table = layui.table;
table.init('demo', {
height: 315,
limit:10
})
</script>
</body>
这其中width 类型 Number 设置容器宽度.table容器的默认宽度是跟随它的父元素铺满,你也可以设定定一个固定值,当容器中的内容
超出该宽度是,会自动出现横向滚动条;
扫一扫
2667
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
