layui数据表格实现点击数据行变色效果，从而保存浏览历史

之前boss让我做出点击表格数据行后，数据行变色的效果。从而保留浏览历史。并且指针放在数据行时，鼠标指针要变成手指状。layui文档中没有提供这个方法，只能自己想办法改一改它的css来实现这种效果，从网上综合各种技巧后，我最终做出了这个效果：

在点击第四行和第六行，会弹出相关的页面。并且第四行和第六行的背景色会变成灰色，从而提示用户这两行已经看过了。

鼠标指针放在数据行上，指针变成手指点击状。从而提醒用户这里是可以点击的！

一、layui表格框架实现

layui表格的初始化构建，和一些基本功能的实现可以看我另一篇文章

二、点击数据行跳转新页面的功能实现

点击表格的row可以跳转到相关的页面，可以通过layui数据表格提供的基础方法来实现。

table.on('row(test)',function(obj){
                    var data = obj.data;
                    window.open("/clewData/clewData.html/"+data.live_time+"/"+data.time+"/"+data.lid+"/"+data.clew_num+"?aid=${aid}");
                }

用window.open()函数的原因是让新页面出现在新建的窗口中，如果覆盖现有的窗口，记录浏览历史的功能肯定就用不上。

三、点击数据行后数据行背景色变灰

先展示代码

 layui.use(['table','upload'], function(){
                var table = layui.table;

                //第一个实例
                table.render({
                    initSort: {
                        field: 'long_start_time' //排序字段，对应 cols 设定的各字段名
                        ,type: 'desc' //排序方式  asc: 升序、desc: 降序、null: 默认排序
                    },
                    elem: '#demo'
                    ,height: 400
                    ,url: '/clewData/excelList?aid=${aid}' //数据接口
                    // ,page: true //开启分页
                    ,title: '高价值线索列表'
                    ,cols: [[ //表头,col的名称我就删除了，按照你们自己的改
                        {field: 'full_date_time', title: '日期', width:250, event: 'clos'}
                        ,{field: 'time', title: '时间', width:80, event: 'clos'}
                        ,{field: '_num', title: '--', width:150, event:'clos'}
                        ,{field: '_count', title: '--', width: 100, event: 'clos'}
                        ,{field: '_count', title: '--', width: 100, event:'cols'}
                        ,{field: '_count', title: '--', width: 100, event:'cols'}
                        ,{field: '_count', title: '--', width: 150, event:'cols'}
                        // ,{field: 'right',width:150,align:'center',toolbar:'#barDemo'}
                        ,{field: 'lid',hide:true},{field: 'live_time',hide:true},{field:'long_start_time',hide:true}
                    ]]
                    ,done: function(res,curr,count){  //关键一，实现指针放在数据行显示手指状
                        $('td').css({'cursor':'pointer'}); //设置成指针放在表格上换成手指
                        $('table').width('100%');
                    }
                });
                //关键二：选中行后改变行背景及字体颜色
                $("body").on('click', '.layui-table-body tr ', function () {
                    console.log(this);
                    var data_index = $(this).attr('data-index');//得到当前的tr的index
                    console.log($(this).attr('data-index'));
                    // $(".layui-table-body tr").attr({ "style": "background:#FFFFFF; color:#666666" });//其他tr恢复颜色
                    $(".layui-table-body tr[data-index=" + data_index + "]").attr({ "style": "background:#F2F2F2;color:#666666" });//改变当前tr颜色

                });})

其中关键部分一是在table.render()中加入done:function(){}。这个功能是实现在表格渲染后，改变table的一些css属性。比如$(‘td’).css({‘cursor’,‘pointer’})是改变指针状态的css属性。通过$(‘table’).width(‘100%’)来让表格适配网页 的宽度。
关键技术二是给body增加一个点击事件。获取点击的数据行数，对该数据行的css进行修改，可以修改你你想要的颜色。

四、总结

layui的可扩展性还是挺好的，许多功能可以通过修改css或者js来进行修改。当时我实现这两个功能还是挺开心的了。如果对大家有一点帮助的话，希望留下一个赞！

本文地址：https://blog.csdn.net/qq_36801317/article/details/111053704