新文章 网摘 文章 随笔 日记

改进的Table冻结列

    //冻结列
    if (typeof JSCommon.frozenColumns != 'function') {
        JSCommon.prototype.frozenColumns = function (scrollSender, tableContainer, frozenColumnCount) {
            debugger;
            $(scrollSender).scroll(function () {
                debugger;
                //给table外面的div滚动事件绑定一个函数
                var left = $(scrollSender).scrollLeft(); //获取滚动的距离
                var trs = $(tableContainer).find("table tr"); //获取表格的所有tr
                trs.each(function (i) {
                    //对每一个tr(每一行)进行处理
                    //获得每一行下面的所有的td,然后选中下标为0的,即第一列,设置position为相对定位
                    //相对于父div左边的距离为滑动的距离,然后设置个背景颜色,覆盖住后面几列数据滑动到第一列下面的情况
                    //如果有必要也可以设置一个z-index属性

                    for (var j = 0; j < frozenColumnCount; j++) {
                        var $ele = $(this).children().eq(j);
                        $ele.css({ "position": "relative", "top": "0px", "left": left, "background-color": "white" });
                    }
                });
            });
        };
    }

 使用方法:

var jsCommon = new JSCommon();
jsCommon.frozenColumns($('#data-list').find('div.t-grid-content'),$('#data-list'), 3);

 

posted @ 2020-07-24 09:49  岭南春  阅读(225)  评论(0)    收藏  举报