layui的复杂表头实现工具栏

最新推荐文章于 2023-05-03 15:28:25 发布

原创最新推荐文章于 2023-05-03 15:28:25 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

layui 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一种周食谱的表格设计方法，利用layui框架实现动态数据展示，包括早餐、午餐、晚餐及各餐人数统计。通过开启工具栏参数，实现了列显示隐藏、导出和打印等功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

		**效果图如下**

在这里插入图片描述

<table class="layui-table" lay-data="{url:'/项目名/itemRecipe/findlist',toolbar: true , page: true, limit: 7, limits:[7]	}">
			  <thead>
			    <tr>
			     <th lay-data="{align:'center'}" colspan="9">周食谱</th>
			    </tr>
			    <tr>
			     <th lay-data="{checkbox:true, fixed:'left'}"></th>
			      <th lay-data="{field:'week'}">周</th>
			      <th lay-data="{field:'recipeTime'}">时间</th>
			      <th lay-data="{field:'breakfast'}">早餐</th>
			      <th lay-data="{field:'breakfastNumber'}">早餐人数</th>
			      <th lay-data="{field:'lunch'}">午餐</th>
			      <th lay-data="{field:'lunchNumber'}">午餐人数</th>
			      <th lay-data="{field:'dinner'}">晚餐</th>
			      <th lay-data="{field:'dinnerNumber'}">晚餐人数</th>
			    </tr>
			  </thead>
			</table>

开启表格头部工具栏区域，该参数支持四种类型值：
toolbar: ‘#toolbarDemo’ //指向自定义工具栏模板选择器
toolbar: true //仅开启工具栏，不显示左侧模板
toolbar: ‘default’ //让工具栏左侧显示默认的内置模板
注意：
该参数为 layui 2.4.0 开始新增。
若需要“列显示隐藏”、“导出”、“打印”等功能，则必须开启该参数

详情请看layui的简介:https://www.layui.com/doc/modules/table.html#options