html 循环list取值放入生成的表格中，当超过指定数量时，新生成表格存放未存完的数据

时间: 2023-06-15 14:08:26 浏览: 120

在Layui中操作数据表格,给指定单元格添加事件示例

最近入坑Layui这个为服务端程序员量身定做的前端框架。为什么不用vue结合各种流行前端框架Element、iView啊什么，后台大哥们不会啊！！！只好我来迁就他们呢，还得一点一点儿的学起来。当我们在操作数据表格的时候，并不是一定要点击表格工具栏中的“查看”按钮，来进行查看，而是点击某一特定的列来进行某些数据查看。例如下图这样。这就涉及到表格的自定义事件。代码如下： <table id='task-list' lay-filter='task-list'></table> // 需要渲染的表格 var tableInit = function (data) { table.re 在Layui中，操作数据表格是常见的前端开发任务，特别是在与后端接口进行交互时。Layui是一个轻量级的前端框架，特别适合不熟悉复杂前端技术的服务端开发者。本篇将详细介绍如何在Layui的数据表格中给指定单元格添加事件。我们需要创建一个基本的表格结构。在HTML中，可以使用如下的代码创建一个带有ID `task-list` 的表格，并设置lay-filter属性为`task-list`，这是用于监听表格事件的关键： ```html <table id='task-list' lay-filter='task-list'></table> ``` 接下来，我们需要使用JavaScript来初始化并渲染这个表格。这里使用了Layui的`table`模块，通过`table.render()`方法配置表格的各项参数。例如，设置表格的高度、标题、每页显示的条目数、分页样式等。下面是一个简单的例子： ```javascript var tableInit = function (data) { table.render({ elem: '#task-list', height: 472, title: '决策场景信息', limit: data.length + 1, page: { theme: '#1E9FFF', layout: ['prev', 'page', 'next', 'skip', 'count', 'limit'], // 自定义分页布局 limit: 10, groups: 1, // 只显示 1 个连续页码 first: false, // 不显示首页 last: false // 不显示尾页 }, cols: [ // 列定义 ], cellMaxWidth: 100, parseData: function (res) { return res; }, data: data, id: 'task-list' }); } ``` 在列定义`cols`中，我们可以通过`event`属性为特定单元格绑定自定义事件。例如，如果想在点击“报告”列时触发某个操作，可以这样设置： ```javascript { field: 'report', title: '报告', width: 60, event: 'viewReport', // 设置事件名称 templet: "#reportID", style: 'font-size: 12px; color: #666; cursor:pointer' }, ``` 这里的`event: 'viewReport'`定义了一个名为`viewReport`的事件，`templet: "#reportID"`则是用来设置单元格的模板，可以根据实际需求填充内容。我们需要监听这个自定义事件。使用`table.on()`方法，传入`lay-event`（即我们在`event`中定义的事件名）和回调函数，处理业务逻辑： ```javascript table.on('tool(task-list)', function (obj) { let event = obj.event; if (event === "viewReport") { // 处理你的业务逻辑 console.log('点击了报告列，执行自定义逻辑'); } }); ``` 通过这种方式，我们可以为Layui数据表格的特定单元格添加自定义事件，实现更灵活的交互功能。这不仅方便了用户操作，也能提升整体应用的用户体验。在实际项目中，可以结合具体需求，对事件处理函数进行扩展，实现如查看详细信息、编辑数据、删除记录等多种功能。

可以使用 JavaScript 来实现这个功能。具体步骤如下： 1. 定义一个数组，存放需要循环的数据。 2. 定义一个变量，表示每个表格最多存放的数据数量。 3. 使用循环语句遍历数组中的数据，将每个数据放入一个新的数组中。 4. 判断新的数组中的数据数量是否已经达到指定数量，如果达到了，则将新的数组中的数据生成一个新的表格，并将新的数组清空，继续存放后面的数据。 5. 使用 JavaScript 动态生成 HTML 表格，并将数据填充到表格中。下面是实现这个功能的代码示例： ```html <!DOCTYPE html> <html> <head> <title>循环生成表格</title> </head> <body> <div id="table-container"></div> <script> // 定义需要循环的数据 var dataList = ['数据1', '数据2', '数据3', '数据4', '数据5', '数据6', '数据7', '数据8', '数据9', '数据10', '数据11', '数据12', '数据13', '数据14', '数据15', '数据16', '数据17', '数据18', '数据19', '数据20']; // 定义每个表格最多存放的数据数量 var maxCount = 5; // 定义一个数组，存放每个表格中的数据 var tableDataList = []; // 循环遍历数据 for (var i = 0; i < dataList.length; i++) { // 将数据存放到新的数组中 tableDataList.push(dataList[i]); // 判断新的数组中的数据数量是否已经达到指定数量 if (tableDataList.length >= maxCount) { // 如果达到了，则生成一个新的表格，并将新的数组清空 createTable(tableDataList); tableDataList = []; } } // 判断新的数组中是否还有数据未存放到表格中 if (tableDataList.length > 0) { // 如果有，则生成一个新的表格，并将新的数组中的数据存放到表格中 createTable(tableDataList); } // 定义生成表格的函数 function createTable(dataList) { // 创建一个新的表格元素 var table = document.createElement('table'); // 循环遍历数据，生成表格行和单元格，并将数据填充到单元格中 for (var i = 0; i < dataList.length; i++) { // 创建一个新的表格行元素 var tr = document.createElement('tr'); // 创建一个新的表格单元格元素，并将数据填充到单元格中 var td = document.createElement('td'); td.innerHTML = dataList[i]; // 将单元格添加到行中 tr.appendChild(td); // 将行添加到表格中 table.appendChild(tr); } // 将表格添加到页面中 document.getElementById('table-container').appendChild(table); } </script> </body> </html> ``` 在上面的代码中，我们定义了一个名为 `dataList` 的数组，其中存放了需要循环的数据。然后，我们定义了一个名为 `maxCount` 的变量，表示每个表格最多存放的数据数量。接着，我们使用循环语句遍历数组中的数据，将每个数据放入一个新的数组中。然后，判断新的数组中的数据数量是否已经达到指定数量，如果达到了，则将新的数组中的数据生成一个新的表格，并将新的数组清空，继续存放后面的数据。最后，使用 JavaScript 动态生成 HTML 表格，并将数据填充到表格中。

阅读全文

html 循环list取值放入生成的表格中，当超过指定数量时，新生成表格存放未存完的数据

相关推荐

thymeleaf循环遍历集合并呈现在表格中

基于JavaScript代码实现自动生成表格

根据数据生成表格 并将表格转换成gif文件保存

页面表格数据生成excel文件下载

java 中如何从LIST 对象取值

动态生成表格工具类

Java 原生生成表格图片

python读取excel表格生成erlang数据

list-card:sensor在表格中显示传感器列表数据

安卓使用smartTable生成表格

动态生成表格（ASP）

mfc下导出listctrl数据到excel表格

echarts 生成统计图时，自动保存图片到服务器，并使用freemarker生成带图片和循环表格的word

html表格数据排序

写一个使用table表格的动态Tree/List生成脚本

SpringBoot_Freemarker生成Word_多个表格+两层嵌套循环

VC 将List Control中的数据写入Excel表格---- 数据库操作法

vc 将List Control中的数据写入Excel表格---- 数据库操作法

最新推荐

Vue实现数据表格合并列rowspan效果

Layui数据表格 前后端json数据接收的方法

Layui实现数据表格默认全部显示(不要分页)

Python导入数值型Excel数据并生成矩阵操作

java根据模板动态生成PDF实例

C语言数组操作：高度检查器编程实践

管理建模和仿真的文件

【KUKA系统变量进阶】：揭秘从理论到实践的5大关键技巧

如何使用Python编程语言创建一个具有动态爱心图案作为背景并添加文字'天天开心（高级版）'的图形界面？

基于Swift开发的嘉定单车LBS iOS应用项目解析

根据数据生成表格并将表格转换成gif文件保存

Layui数据表格前后端json数据接收的方法