使用scrollTop将Layui表格某一行置顶、居中、置底,与layui表格刷新后页面恢复,表格点击,选中一行

表格更改内容后会重新刷新,想要恢复原页面,目前只能做到reder后将某一行居中,置顶,说到底是CSS原理,本人CSS很烂,scrollTop用法可参考相关文章。恢复表格页面目前想要做到获取滚动后置顶的可视行的data-index,没有找到方法,有知道的求告知。使用scrollTop将Layui表格某一行置顶、居中、置底如下。如果获取滚动后置顶的data-index,那么恢复表格页面就很简单。


 //更新表格内容后,选中的居中(恢复原样的不知道怎么实现,读取当前置顶单元格的父级data-index) 
layui.table.on('tool(ydsd_yzyd_table)', async function (obj) {
        // 信息推送表格刷新后没有选中
        if (obj.event == "xxts") {



            let index = obj.data.NID - 1;
            let ID = obj.data.nub
            let dlmc = obj.data.dlmc
            let ydcs = obj.data.ydcs;
            let ydzs = obj.data.ydzs;
            let ydld_time = obj.data.stTime
            let ydld_cls = obj.data.ydcls
            let location = obj.data.location
            ydsd_yzyd_table.data[index].xxts = "疏导中";
//先render改变表格
            layui.table.render(ydsd_yzyd_table);

            //滚动到指定行
            console.log(index)

            //reder后置顶0.scrollTop(0-limit);行高(控制台查看)
            let limit = 30 * index
            // let h = 8
//置顶
            $(".layui-table-main").scrollTop(0 + limit);
//居中
            $(".layui-table-main").scrollTop(0 + limit - 8 / 2 * 30);
//弹出层自定义
            ydld_ld.popupTemplate = {
                content: SDpopupContent(dlmc, ydzs, ydld_time, ydld_cls, ydcs)

            }
//添加类(这里精确选择添加,否则所有layui表格只要是index行的都会添加改变样式)

             $("#table_tab_yzyd tr[data-index=" + index + "]").addClass(
                "layui-table-click"
            )
            //设置背景色和字体色 属性选择器

        }
        // 定位拥堵道路
        else {

        
        }
    });

点击选中行背景效果,不需要代码,直接加样式即可

.layui-table-click {
    background-color: #d1d5d7 !important;
   
}

猜你喜欢

转载自blog.csdn.net/qq_51165365/article/details/131105233
今日推荐