教你實(shí)現(xiàn)首行及首列固定 Table

scq000 發(fā)布于2019-08-30 13:57 / 3257人閱讀

摘要：但單元格尺寸根據(jù)其不確定的內(nèi)容伸展，且頂部及左側(cè)表頭也應(yīng)隨之調(diào)整寬高。將的剝離進(jìn)行整體置為覆蓋于之上，并將除首列單元格外的其它元素置為透明。

先秀一下 demo！此款 Table 源碼~

表面上，在頂部及左側(cè)懸掛兩欄并非難事。但單元格尺寸根據(jù)其不確定的內(nèi)容伸展，且頂部及左側(cè)表頭也應(yīng)隨之調(diào)整寬高。

Table 天然具備如此屬性，我們可將 thead 剝離進(jìn)行 fixed，但首列每一項(xiàng)分散在每一行，如何整體剝離？顯然剝離較棘手，需轉(zhuǎn)變思路。

定義新元素模擬首列并懸掛于左側(cè)，但其單元格如何同步同行單元格高度？利用 js 獲取當(dāng)前行高度并賦值于首列元素，假定表格上千行便需如此操作上千次，過(guò)于麻煩...

一個(gè) Table 難搞定，兩個(gè)何如？我需要它們一模一樣：

令 table1 與 table2 共享一套樣式、數(shù)據(jù)便可一模一樣（使兩者同行同列元素尺寸同步）。將 table1 的 thead 剝離進(jìn)行 fixed；table2 整體置為 fixed 覆蓋于 table1 之上，并將 table2 除首列單元格外的其它元素置為透明。此時(shí)首行及首列懸掛完成了，但它們并未隨表格主體的滾動(dòng)而滾動(dòng)。

動(dòng)用 js 獲取 window 滾動(dòng)位置，scrollX 即為首行向左偏移距離，scrollY 為首列向上偏移距離：

var curX = 0;
var curY = 0;
$(window).on("scroll", function () {
    var scrollX = window.scrollX;
    var scrollY = window.scrollY;
    // 首行向左偏移 scrollX
    Math.abs(curX - scrollX) && $(".table1 .thead").css("left", -scrollX);
    // 首列向上偏移 scrollY（table2 僅首列非透明等同于整體偏移）
    Math.abs(curY - scrollY) && $(".table2").css("top", -scrollY);
    curX = scrollX;
    curY = scrollY;
});

講解完畢！

作者：呆戀小喵

我的后花園：https://sunmengyuan.github.io...

我的 github：https://github.com/sunmengyuan

原文鏈接：https://sunmengyuan.github.io...