监听头部工具栏事件

提问 未结
11 307
lehehehu
lehehehu 2018-10-12
悬赏:20飞吻
版本:layui 2.4.3 浏览器:chrome
使用官方文档介绍的 监听头部工具栏事件

https://www.layui.com/doc/modules/table.html#ontoolbar

不能成功监听到toolbarDemo中按钮?亲们 能成功吗?
回帖
  • 祥哥
    2018-10-12
    你是显示出来了点击没用?
    0 回复
  • lehehehu
    2018-10-12
    @祥哥 嗯嗯 是的 可以显示 但是点击没用
    0 回复
  • 祥哥
    2018-10-12
    @lehehehu 清下缓存试试,不行把代码截出来看看
    0 回复
  • lehehehu
    2018-10-12
    <table id="demo" lay-filter="test"></table>

    <script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
    <button class="layui-btn layui-btn-sm" lay-event="add">添加</button>
    <button class="layui-btn layui-btn-sm" lay-event="delete">删除</button>
    <button class="layui-btn layui-btn-sm" lay-event="update">编辑</button>
    </div>
    </script>

    <script>

    layui.use('table', function(){
    var table = layui.table;

    table.render({
    toolbar: '#toolbarDemo'
    ,elem: '#demo' //指定原始表格元素选择器(推荐id选择器)
    ,height: 420 //容器高度
    //,width:800 //容器宽度
    ,url:"<%=basePath%>control/datasetM/getDatasetInfoPage.action?etc="+new Date().getTime()
    ,page: true

    ,id:'contenttable'
    ,totalRow: true
    ,loading:true
    ,id: 'test'
    ,cols: [[ //设置表头
    {type:'checkbox'}
    ,{field: 'id', type:'numbers',title: 'ID', width:80, sort: true}
    ,{field:'dsName', title:'名称'}
    ,{field:'dsType', title:'类型',sort:true}
    ,{field:'filePath', title:'路径'}
    ,{field:'busAtt', title:'业务属性'}
    ,{field:'storage', title:'大小',sort:true}
    ,{field:'createTime', title:'创建时间',sort:true}
    ]]
    });

    //监听复选框
    table.on('checkbox(test)', function(obj){
    debugger
    console.log(obj.checked); //当前是否选中状态
    console.log(obj.data); //选中行的相关数据
    console.log(obj.type); //如果触发的是全选,则为:all,如果触发的是单选,则为:one
    });

    //
    table.on('toolbar(test)', function(obj){
    debugger
    var checkStatus = table.checkStatus(obj.config.id);
    var data = checkStatus.data;
    switch(obj.event){
    case 'add':
    layer.msg('添加');
    break;
    case 'delete':
    layer.msg('删除');
    break;
    case 'update':
    layer.msg('编辑');
    break;
    };
    });

    });
    0 回复
  • lehehehu
    2018-10-12
    @祥哥 我贴了代码 可以监听到复选框 但是无法监听到 头部工具栏
    0 回复
  • 祥哥
    2018-10-12
    0 回复
  • lehehehu
    2018-10-12
    @祥哥 [汗] 我居然写了两个ID 删掉了 还是不可以
    0 回复
  • 祥哥
    2018-10-12
    @lehehehu 你table 有写lay-filter="test" 吗?
    0 回复
  • lehehehu
    2018-10-12
    @祥哥 我是这样写的。<table id="demo" lay-filter="test"></table>
    0 回复
  • 祥哥
    2018-10-12
    @lehehehu 看你代码没问题啊,你把ID去掉清除缓存看下
    0 回复
  • mmzzSky
    2018-11-30
    亲 请问你这个问题解决了吗 我也是直接用的官方代码 也是显示出来了 点击无效
    0 回复