layui中，解决按钮太多，展示不全，点击无效问题

最新推荐文章于 2025-09-11 02:24:34 发布

原创最新推荐文章于 2025-09-11 02:24:34 发布 · 1.5k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#layui #数学建模 #前端

layui基础专栏收录该内容

6 篇文章

订阅专栏

当数据表格的操作按钮数量过大，导致页面无法完全显示时，可以通过JS代码进行处理。在layui.use()内添加代码，监听mousedown和click事件，实现点击下拉显示的所有按钮有效，并能正确关闭和触发相应功能。

1 在数据表格上，操作按钮太多的时候，页面展示不全，下拉显示所有按钮时，点击无效。需要在js中添加代码，放在layui.use()里面即可。

$(document).off('mousedown', '.layui-table-grid-down')
                .on('mousedown', '.layui-table-grid-down', function (event) {
                    table._tableTrCurr = $(this).closest('td');
                });

            $(document).off('click', '.layui-table-tips-main [lay-event]')
                .on('click', '.layui-table-tips-main [lay-event]', function (event) {
                    var elem = $(this);
                    var tableTrCurr = table._tableTrCurr;
                    if (!tableTrCurr) {
                        return;
                    }
                    var layerIndex = elem.closest('.layui-table-tips').attr('times');
                    // 关闭当前这个显示更多的tip
                    layer.close(layerIndex);
                    table._tableTrCurr.find('[lay-event="' + elem.attr('lay-event') + '"]').first().click();
                });