首页 > 其他分享 >layui - - - 批量删除图书、Iframe 弹出层(图书管理系统)

layui - - - 批量删除图书、Iframe 弹出层(图书管理系统)

时间:2024-08-31 23:24:58浏览次数:6  
标签:删除 批量 layui 弹出 选中 Iframe 图书

1.头部工具栏事件

在“组件”中,选择“表格”,然后选择“事件”,在“事件”中找 toolbar 头部工具栏事件。

image.png

image.png

头部工具栏“批量删除”和“添加”按钮添加 lay-event="xx" 属性,点击“批量删除”和“添加”按钮就会触发 toolbar 事件。

image.png

代码中编写 toolbar 事件,打印回调函数的参数。 toolbar(filter) 参数 filter 是表格属性 lay-filter="xx" 的值。

image.png

image.png

选中一行,然后点击“批量删除”按钮,控制台打印出回调函数的参数。

image.png

2.获取选中行数据

通过 table.checkStatus(id) 获取选中行数据,并打印到控制台。

image.png

checkStatus.data 就是选中的数据。

image.png

获取选中的图书列表,如果选中为空或选中的图书列表为 0,就提示“没有选择要删除的数据”,否则就执行删除操作。

image.png

3.批量删除选中行

执行删除操作前打开一个弹出层提示框,点“确定”按钮后执行批量删除操作,删除结束后关闭弹出层。

image.png

构建一个数组,数组中存要批量删除的“图书编号”。

image.png

使用 AJAX 发送 HTTP 请求进行批量删除,批量删除成功后重新加载表格数据。

image.png

运行项目,使用 Chrome 浏览器打开。进行批量删除。

image.png

image.png

4.Iframe 弹出层

在“组件”中,选择“弹出层”,然后选择“弹层类型”,在“弹层类型”中使用 Iframe 弹层类型。

image.png

点击代码,查看 Iframe 弹出层代码。

image.png

点击“基础属性”,查看弹出层每个属性的描述。

image.png

在项目下新建一个添加图书的页面:book-add.html

image.png

在头部工具栏“添加”按钮的点击事件中,弹出 Iframe 弹出层。

image.png

运行项目,使用 Chrome 浏览器打开。

image.png

标签:删除,批量,layui,弹出,选中,Iframe,图书
From: https://blog.51cto.com/zicl/11884514

相关文章

  • (附论文)基于Springboot和Vue的图书管理系统(532)
    获取源码请滑到最底部访问官网项目配套调试视频和相对应的软件安装包1、项目描述具体请看视频演示2、项目开发工具开发工具:Idea或Eclipse数据库:MysqlJar包仓库:Maven前端框架:Vue2后端框架:Springboot3、项目图片4、演示视频(附论文)基于Springboot和Vue的图书管理......
  • 什么是iframe,火爆的微前端解决方案方案,教你快速看懂使用
    iframe(InlineFrame)是一种HTML标签,它允许在一个网页内部嵌套加载另一个网页,从而实现在主页面中展示外部网页内容的功能。iframe创建了一个独立的浏览上下文,拥有自己的文档对象模型(DOM)和执行环境,这意味着它不会与主页面共享JavaScript变量或CSS样式,提供了较好的隔离性。......
  • ✨✨使用jq+layui的layer+laytpl实现横屏查看功能✨✨
    使用jq+layui的layer+laytpl实现横屏查看功能✨一、实现功能......
  • 【精品毕设推荐】基于SSM+jsp的图书管理系统设计与实现
    点击下载原文及代码,可辅助在本地配置运行摘 要现代经济快节奏发展以及不断完善升级的信息化技术,让传统数据信息的管理升级为软件存储,归纳,集中处理数据信息的管理方式。本图书管理系统就是在这样的大环境下诞生,其可以帮助管理者在短时间内处理完毕庞大的数据信息,使用这种软......
  • 页面结构分析与iframe内联框架
    页面结构分析导航栏头部侧边栏网页主体页底元素名描述header标注头部区域的内容(用于页面或页面中的一块区域)footer标注脚部区域的内容(用于页面或页面中的一块区域)sectionWeb页面中的一块独立区域article独立文章内容aside相关内容或应用(常用于侧......
  • java+vue计算机毕设图书馆自习室管理系统【源码+开题+论文】
    本系统(程序+源码)带文档lw万字以上文末可获取一份本项目的java源码和数据库参考。系统程序文件列表开题报告内容研究背景随着高等教育的普及与知识经济的蓬勃发展,图书馆作为知识传播与学术交流的重要场所,其服务功能日益多元化与精细化。近年来,图书馆自习室因其安静的学习......
  • uiotos和iframe有什么区别?
    尽管都能嵌套,UIOTOS主要是界面嵌套,而iframe是网页嵌套。其他多个方面存在显著的区别,以下是对两者主要区别的详细对比:1.定义与用途UIOTOS:UIOTOS是一款无需编程的前端开发工具,通过独特的专利技术,帮助非开发者快速定制复杂的WEB应用。它专注于解决前端界面开发定制难题,提供常......
  • 除了iframe,不用写代码还有什么办法实现界面嵌套?
    除了iframe,不用写代码实现界面嵌套的方法相对有限,但以下是一些可能的选择:1.使用可视化网站构建器可视化网站构建器(如Wix、Squarespace等)允许用户通过拖拽界面元素来创建和编辑网页,这些平台通常提供了一些基本的嵌套功能,比如通过容器组件将多个模块组合在一起,形成嵌套结构。用户......
  • uiotos和iframe在嵌套上的区别?
    UIOTOS与iframe在嵌套方面的对比区别主要体现在技术实现、功能整合、开发效率及维护性等多个方面。1.技术实现UIOTOS:UIOTOS通过其独特的页面嵌套技术,允许用户将不同的页面或组件无缝地集成在一起。这种嵌套不仅仅是界面上的整合,更重要的是实现了功能上的深度融合。UIOTOS支......
  • 基于Node.js+vue图书管理系统(程序+论文+开题报告)-计算机毕业设计
    本系统(程序+源码+数据库+调试部署+开发环境)带文档lw万字以上,文末可获取源码系统程序文件列表开题报告内容研究背景随着信息技术的飞速发展,传统的手工图书管理方式已难以满足现代图书馆高效、便捷的管理需求。图书馆作为知识传播与积累的重要场所,其管理效率直接影响到读者......