Use scrollTop to move a row of the Layui table to the top, center, or bottom. After the layui table is refreshed, the page will be restored. Click on the table to select a row.

The table will be refreshed after the content is changed. If you want to restore the original page, you can currently only center a certain row and put it on top after reder. In the final analysis, it is the principle of CSS. I am terrible at CSS. For the usage of scrollTop, please refer to related articles. When restoring the table page, I currently want to obtain the data-index of the visible row that is pinned to the top after scrolling. I have not found a method. If anyone knows, please let me know. Use scrollTop to move a row of the Layui table to the top, center, or bottom as follows. If you get the data-index that is pinned to the top after scrolling, it is very simple to restore the table page.


 //更新表格内容后,选中的居中(恢复原样的不知道怎么实现,读取当前置顶单元格的父级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 {

        
        }
    });

Click to select the row background effect, no code is required, just add styles directly

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

Guess you like

Origin blog.csdn.net/qq_51165365/article/details/131105233
Recommended