bootstrap-左两列固定

最新推荐文章于 2023-12-12 13:31:10 发布

原创最新推荐文章于 2023-12-12 13:31:10 发布

· 282 阅读

1 ·

版权

文章标签：

#bootstrap #左两列固定

bootstrap 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一种使用BootStrap实现表格左侧列固定的JavaScript方法。通过克隆表格元素并调整其位置，确保在滚动时左侧列保持可见。此技巧适用于需要保持数据对比性的复杂数据展示场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

调用方式：

onLoadSuccess:function(data){
    setFixed({ele:"#table",leftFixedIndex:2});
}

// bootStrap 左侧两列固定
function setFixed(dom) {
    var that = this;
    if ($("#topHead").length != 0) {
        that.topHead = $("#topHead").html("");
    }
    if ($("#leftHead").length != 0) {
        that.leftHead = $("#leftHead").html("");
    }
    var dom  = $(dom.ele);

    var klone = dom.css({position: 'absolute', top: "0px", left: "0px"});
    klone.parent().css("position", "relative");

    var height = dom.find("thead").innerHeight();
    var width = dom.find("tbody").find("tr").find("td").eq(0).innerWidth() + dom.find("tbody").find("tr").find("td").eq(1).innerWidth() + 4;
    var tableHeight = dom.innerHeight();
    var tableWidth = dom.find("thead").innerWidth();

    that.topHead = that.topHead ? that.topHead : $("<div id='topHead' class='top-head' style='border-bottom:1px solid #ccc;z-index:2;left:0px;position:relative;overflow:hidden;width:" + tableWidth + "px;height:" + height + "px'></div>")

    that.leftHead = that.leftHead ? that.leftHead : $("<div id='leftHead' class='headClone left-head' style='z-index:1;top:-" + height + "px;position:relative;height:" + tableHeight + "px;overflow:hidden;width:" + width + "px'></div>")

    that.topHead.css("background", "#fff");
    that.leftHead.css("background", "#fff");
    that.leftHead.find("td").css("background", "#fff")

    that.topHead.html(klone.clone(true));
    that.leftHead.html(klone.clone(true));

    klone.css("max-height", height)
    klone.find("tbody").find("tr").each(function () {
        $(that).find("td").eq(0).css("background", "#fff")
    })

    dom.parent().on("scroll", function (e) {
        $("#topHead").css({
            top: $(this).scrollTop()
        })
        $("#leftHead").css({
            left: $(this).scrollLeft()
        })
    })
    if ($("#topHead").length != 0) {
        $("#topHead").html("");
        $("#topHead").html(klone.clone(true));
    } else {
        that.topHead.html(klone.clone(true));
    }
    if ($("#leftHead").length != 0) {
        $("#leftHead").html("");
        $("#leftHead").html(klone.clone(true));
    } else {
        that.leftHead.html(klone.clone(true));
    }
    if ($("#topHead").length == 0) {
        dom.parent().append(that.topHead)
    }

    if ($("#leftHead").length == 0) {
        dom.parent().append(that.leftHead)
    }


}