当前位置:首页 > 技术文档 > 框架开发 > 正文内容

layui快速入门(二)——数据表格事件监听

前端建立一个table标签

<table id="demo" lay-filter="table"></table>

201910170941101.png

1、表头工具栏

这个layui的表头工具栏是独立于表格的,是附加上去的,就是把一个盒子放到表格上面

第一步,所以我们先建立一个盒子,但是这是一个特殊的盒子,需要对其隐藏:

<div class="layui-hide layui-btn-group" id="toolbar">
    <button class="layui-btn " lay-event="getall">查看所选数据</button>
    <button class="layui-btn " lay-event="getnum">查看所选数量</button>
    <button class="layui-btn  layui-btn-danger" lay-event="delall">批量删除</button>
</div>

layui-hide隐藏属性,layui-btn-group组按钮,lay-event事件的名称

layui-event设置的对应的值,来进行不同的行为


第二步,我们在表格模块里引入我们的头部盒子,然后监听事件

<table id="demo" lay-filter="test"></table>
layui.use('table',function(){
       var table = layui.table;       table.render({
           elem:'#demo'//上面表格ID名称
           ,url:'数据接口' 
           ,toolbar:'#toolbar'//开启头部栏,写入我们的盒子id
           ,cols[[…………]]
       });
    });

小知识点:获取传来的数据  JSON.stringify(data.field)

查看出来的数据  layer.msg(JSON.stringify(data.field));
data.field代表整个form表单中的值,data.field.username代表某个属性值

表格渲染就完毕

    table.on('event(lay-filter)',function(obj){ 
    //这是格式,event有toolbar头部栏事件,tool行标签事件,edit编辑事件,等等,
    括号里的当然就是给表格设置的lay-filter属性
    obj是这个表格里所有的数据,我们可以console.log(obj)来查看有哪些数据!!
    })
    例如:
     //监听工具条
            table.on('tool(test)', function(obj){ //注:tool 是工具条事件名,test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event;
            var tr = obj.tr;
            var $ = layui.jquery;
            if(layEvent === 'detail'){
                layer.msg('ID:'+ data.id + ' 的查看操作');
              } else if(layEvent === 'del'){
                //layer.msg("删除");
                  layer.confirm('确定删除管理员:'+data.username+"吗?", function(index){
                    $.ajax({
                        url:'/index.php/admin/Admin/userDel.html?id='+data.id,
                        type:'get',
                        dataType:'json',
                        data:{'id':data.id},//向服务端发送删除的id
                        success:function(res){
                            if(res == true){
                                layer.msg("删除成功",{icon:6});
                                obj.del(); //删除对应行(tr)的DOM结构,并更新缓存
                                layer.close(index);
                               
                            }else{
                                layer.msg("删除失败",{icon:5});
                            }
                        }
                    });
                });
              } else if(layEvent === 'edit'){
                layer.alert('编辑行:<br>'+ JSON.stringify(data))
              }
            });


扫描二维码推送至手机访问。

版权声明:本文由Znanr发布,如需转载请注明出处。

标签: layui
分享给朋友:
返回列表

上一篇:layuiAdmin快速入门

没有最新的文章了...

相关文章

织梦:Linux(CentOS)+Apache+PHP+MySQL服务器配置搭建

织梦:Linux(CentOS)+Apache+PHP+MySQL服务器配置搭建

1.前言CentOS(Community ENTerprise Operating System)是Linux发行版之一,它是来自于Red Hat Enterprise Linux依照开放源代码规定释...

tp5 框架使用笔记

tp5 框架使用笔记

tp5 开发流程下载源码框架 ——> 在application文件中新建对应的某块(如后台的首页admin、文章article) ——> 在application文件中对于的模块下建立co...

 tp5 运用过程中遇到的问题

tp5 运用过程中遇到的问题

一、代码更改但是页面刷新没变化   (关于TP5.1框架和php的缓存问题)     1、原因:tp5自有的缓存机制解决办法:将config中的 &#...

未定义数组索引: id | ThinkPHP5

未定义数组索引: id | ThinkPHP5

你可能百度了很多,在dump一下里面有数据呀!然后一顿百度有说需要设置一下$type=isset($_POST["type"])?$_POST["type"]:...

tp5入门笔记(1)

tp5入门笔记(1)

模板引用*打开根目录config.php文件,将应用试调模式打开ture'app_debug'  => false,改成true1、将模板的js、css、images放...

JSP服务器的搭建安装与配置

JSP服务器的搭建安装与配置

下载的地址:http://java.sun.com/products/archive/j2se/1.4.2_06/index.html第一步:—-安装J2SDK:到SUN官方站点(http://jav...