layui数据表格编辑、删除、查看功能的具体实现。编辑功能弹窗显示表单

最新推荐文章于 2024-04-20 20:30:09 发布

VIP文章 RT_Enzyme

最新推荐文章于 2024-04-20 20:30:09 发布

阅读量5.2k

点赞数 6

文章标签： html5 js

本文链接：https://blog.csdn.net/qq_36801317/article/details/107919282

版权

layui数据表格的初始框架，这里不赘述了。官方文档讲的很清楚，这里我们在框架写好的基础上，实现具体的功能，即已经写好以下界面：
在这里插入图片描述
我们具体实现它工具栏中的查看、编辑和删除功能。
在以下函数中编写：

table.on('tool(test)',function(obj){
    //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
                        var data = obj.data; // 获取当前行的数据
                        var layEvent = obj.event; //获取lay-event对应的值
                        }

查看功能：
在layer.alert中，data.表格中数据的field名称来表示数据的值。用<br>换行

 if(layEvent === 'detail'){
   
                          layer.alert('爬虫名称: '+data.config_name+'<br>'+'操作指令:'+data.url+'<br>'+'注释:'+data.metadata+'<bar>');
                      }

编辑功能：
我们要做出的效果是点击编辑按钮弹出一个form表单，表单中会显示表格中的初始值，并且在表单中可以修改表单的数据。点击确认后会同步修改表格中、数据库中的数据。
首先需要新建一个html，来容纳form。就简单命名为test1.html吧。

<body>
<div class="layui-form" lay-filter="useradmin" id="useradmin">
    <div class="layui-form-item">
        <div class="layui-input-inline">
            <label class="layui-form-label">爬&nbsp;虫&nbsp;名&nbsp;称:</label>
            <input type="text" name=

最低0.47元/天解锁文章

RT_Enzyme

关注

6
点赞
踩
45

收藏

觉得还不错? 一键收藏
5
评论
layui数据表格编辑、删除、查看功能的具体实现。编辑功能弹窗显示表单

layui数据表格的初始框架，这里不赘述了。官方文档讲的很清楚，这里我们在框架写好的基础上，实现具体的功能，即已经写好以下界面：我们具体实现它工具栏中的查看、编辑和删除功能。在以下函数中编写：table.on('tool(test)',function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值" var data = obj.data; // 获取当前行的数据
复制链接

扫一扫