layui怎么实现删除数据?

layui怎么实现删除数据?下面本篇文章给大家介绍一下在layui中实现删除数据效果的方法。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

使用layui+jQuery实现点击删除单行数据

首先要用到layui的官网手册

地址:https://www.layui.com/

注意

  1. 此功能是在使用layui展示数据的基础上实现

  2. 数据展示步骤连接:https://www.cnblogs.com/glwuzhang/p/11252987.html

  3. 记得引用文件

1、进入手册页面的 ”示例“

1.png

2、在示例中找到 “数据表格” -> “数据操作” -> "查看代码" 。这就是layui内置的数据操作代码,分别复制红框,绿框,紫色框的代码到你的页面。

2.png

3、将红色框的代码复制,在数据展示列后追加一行 如下图。

将绿色框的代码复制到 html->body 中,不要放在js代码中,如下图。一个标签代表一个按钮,多余的删除即可。

将紫色框的代码放置到 js代码 layui.use 中任意位置 ,如下图。

我只做了删除所以把多余的代码都删了。

3.png

4、在监听工具条中,自带声明了一个 data ,这个data中是包含了点击当前行的所有数据。

所以我们可以使用jQuery的ajax发送data中需要的值,实现删除。

4.png

做完判断,和相应的弹框提示,layui的删除基本到这儿就结束了。

更多web开发相关知识,请查阅 HTML中文网 !!

以上就是layui怎么实现删除数据?的详细内容,更多请关注html中文网其它相关文章!

赞(0) 打赏
未经允许不得转载:html中文网首页 » Layui 教程

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏