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

步骤

  1. 声明样式
  2. 表格的table加载完毕的事件
  3. 行点击事件
   <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>
  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值