侧边栏壁纸
博主头像
云BLOG 博主等级

行动起来,活在当下

  • 累计撰写 318 篇文章
  • 累计创建 6 个标签
  • 累计收到 0 条评论

目 录CONTENT

文章目录
WEB

layui表格table实现加载之后首选选中,点击选中操作事件和背景

Administrator
2024-08-26 / 0 评论 / 0 点赞 / 1 阅读 / 0 字

声明样式

表格的table加载完毕的事件

行点击事件

   <style>
        .checkrow {
            background-color: dodgerblue;
            color: white;
       }
    </style>

   <script>
 layui.use(['table', 'form', 'laydate', 'laypage', 'jquery'], function () {
        ...
        ...


        function dataList(type) {
            table.render({
                elem: '#data',
                url: '',
                headers: {},
                where: {},
                limit: 10,
                page: true,
                title: '',
                cols: [],
                done: function (res, curr, count) {
                       console.log('res=',res)
                       var rows =      $('#data').next().find('.layui-table-box tbody tr')
                        if (rows.length > 0) {
                                console.log("找到了第1行",rows[0] );
            
                                // 如果想高亮显示该行,可以添加CSS样式或其他操作
                                $(rows[0]).addClass('checkrow');
                                var data = res.data[0];
                                // 行点击事件
                                rowClick(data);
                        } else {
                                console.log("未找到指定行");
                        }
                }
            })
        }

        table.on('row(data)', function (obj) {
            console.log(obj); // obj为当前行对象
            var rows =$('#data').next().find('.layui-table-box tbody tr')
            rows.each(function(index) {
                $(rows[index]).removeClass('checkrow');
            });
            $(obj.tr).addClass('checkrow');
            var data = obj.data;
             // 行点击事件
            rowClick(data);
        });
    });

        ...
        ...
   </script>

0

评论区