layui实现表格工具按钮触发table事件的方法-创新互联

这期内容当中的小编将会给大家带来有关layui实现表格工具按钮触发table事件的方法，以专业的角度为大家分析和叙述，阅读完这篇文章希望大家可以有所收获。

先看个大家可能都遇到过的问题的效果图：

就是如果工具栏没有设置宽度，有时候会被内容挤压得比较小，或者宽度设置不够，也会跟内容一样出现...然后点击显示下拉图标的时候会显示出更多的内容，但是跟普通的td不同的是按钮是显示出来了。

但是点击无法触发原先添加的tool监听，这就尴尬了，只能手动的拖拽一下列宽显示出其他的按钮然后在点击，或者应该在一开始的时候就设置一个足够的宽度，但是问题也来了，如果里面的按钮个数不确定，长度不确定，或者有很多很多。

那么实际上不可能让用户主要来看按钮而不是看内容，那么有没有什么方法让它平时现实...的然后点击显示更多的时候点击还能触发原始的事件的？

方法是想出来的哈，估计有不少途径可以做到，这里抛砖引玉分享下我的方法：利用两个事件委托来实现。

基本的代码如下：

思路解析：

首先给这个下拉的图标添加一个mousedown的事件，记录当前的显示更多的是数据哪个表格的哪个tr的哪个td。然后记录在table._tableTrCurr下面。

这个可能有的同学有疑问为啥不直接用click，这个是因为表格内部也做了一个事件委托，但是不是委托给document啥的而是委托给了table的body然后stope了也就是说实际上你外面再写委托到document。

点击监听的时候到table的逻辑之后就停了，不会走到你的监听里面，所以避开了它用了一个mousedown，那如果是移动端的会不会有什么问题和这个可以自己试试看，这里以web端为主。

然后是另外一个监听，就是监听打开的这个tips里面的“按钮”的click，然后找到刚才记录的那个_tableTrCurr信息，找到我们要的那个table的那个tr的那个td的那个按钮，找到了就好办了，直接click一下就能触发写的table.on('tool')的内容了。

效果：

注意：这个修改是在最新版本的基础上修改的（v2.4.5）里面有一个关键的就是获得表格的id，这个id不是单纯的是table节点的id，而是render出来之后这个实例的id。

如果不设置默认就是table的节点的id如果没有，table内部会生成一个index之类的作为这个table的id，在2.4.4更新中有一个可能大家不太容易注意到但是确实意义很大的修改，就是在table的view中添加了一个lay-id这个属性来保存当前的这个table的实例的id。

这个是非常非常非常好用的一个变化，意义很大的，后面你要reload某个table只要知道你reload的到底是哪个节点，自然就能够找到你要reload的tableId是什么。所以强烈的建议如果还在使用2.4.0~2.4.3的小伙伴还是升级成2.4.4+。

当然如果你使用了我那个tablePlug插件，实际可以不用担心这个问题，因为我在tablePlug内部就做了处理，如果render之后没有和这个lay-id会给添加上去，达到跟2.4.4+同样的效果。

测试页面： https://sun_zoro.gitee.io/layuitableplug/testTableReload.html
gitee项目： https://gitee.com/sun_zoro/layuiTablePlug

实现代码如下：

  //缓存当前操作的是哪个表格的哪个tr的哪个td
    $(document).off('mousedown','.layui-table-grid-down').on('mousedown','.layui-table-grid-down',function (event) {
        //直接记录td的jquery对象
        table._tableTrCurrr = $(this).closest('td');
    });

    //给弹出的详情里面的按钮添加监听级联的触发原始table的按钮的点击事件
    $(document).off('click','.layui-table-tips-main [lay-event]').on('click','.layui-table-tips-main [lay-event]',function (event) {
        var elem = $(this);
        var tableTrCurrr =  table._tableTrCurrr;
        if(!tableTrCurrr){
            return;
        }
        var layerIndex = elem.closest('.layui-table-tips').attr('times');
        layer.close(layerIndex);
        table._tableTrCurrr.find('[lay-event="' + elem.attr('lay-event') + '"]').first().click();
    });

补充：

layui是面向于后端开发者的模块，在组织形式上毅然采用了几年前的以浏览器为宿主的类 AMD 模块管理方式，却又并非受限于 CommonJS 的那些条条框框，它拥有自己的模式，更加轻量和简单。layui 定义为“经典模块化”，并非是刻意强调“模块”理念本身，而是有意避开当下 JS 社区的主流方案，试图以尽可能简单的方式去诠释高效！它的所谓经典，是在于对返璞归真的执念，它以当前浏览器普通认可的方式去组织模块！ layui 认为这种轻量的组织方式，仍然可以填补 WebPack 以外的许多场景。所以它坚持采用经典模块化，也正是能让人避开工具的复杂配置，重新回归到原生态的 HTML/CSS/JavaScript本身。

上述就是小编为大家分享的layui实现表格工具按钮触发table事件的方法了，如果您也有类似的疑惑，不妨碍参照上述分析进行理解。如果想了解更多相关内容，请关注创新互联成都网站设计公司行业资讯。

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。