layui table th添加按钮，监听点击事件。

最新推荐文章于 2025-05-09 13:56:05 发布

Dulm2016

最新推荐文章于 2025-05-09 13:56:05 发布

阅读量5.6k

点赞数 2

CC 4.0 BY-SA版权

文章标签： layui table 表头按钮 title

本文链接：https://blog.youkuaiyun.com/Dulm2016/article/details/102723318

本文介绍如何使用layui框架创建带按钮的表头，并通过监听表头按钮的点击事件来获取table组件中的数据，实现表格与按钮的交互功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

第一步，创建带按钮的表头title。

var GSUpdateIniBar = "<label class=\"layui-form-label margin\">INI更新</label>\n" +
            "             <br>\n" +
            "             <div class=\"layui-form-item layui-form-item\">\n" +
            "              <button class=\"layui-btn layui-btn-xs\" lay-submit lay-filter=\"GSUpdateIniOff\">关</button>\n" +
            "              <button class=\"layui-btn layui-btn-xs\" lay-submit lay-filter=\"GSUpdateIniOn\">开</button>\n" +
            "            </div>";

//监听 表头按钮点击事件。关
form.on('submit(GSUpdateIniOff)', function(){
         //  获取table 数据，GSToolManagementTable 为table id。
         var data = table.cache["GSToolManagementTable"];
            
       });
//监听 表头按钮点击事件。开
form.on('submit(GSUpdateIniOn)', function(){
            
     var data = table.cache["GSToolManagementTable"];
            
      });