为什么滚动网格时文本标题不移动？

Question

我正在使用 Obout 网格 - 列集

有两种可能的情况。

1.- 当我滚动网格并在 scrollingSetting 中设置时，文本标题会移动 属性 NumberOfFixedColumns 为 0 ，这里一切正常。

2.- 当我滚动网格并在 scrollingSetting 中设置时，文本标题不会移动 属性 NumberOfFixedColumns 不同于 0

所以我想使用一个固定的列，但它不能正常工作。

网页中用于此的代码：

<link href="../App_Themes/Theme7/styles/oboutgrid/column-set.css" rel="stylesheet"
    type="text/css" />
<script type="text/javascript">
    window.onload = function () {
        //Grid1.addColumnSet(level, startColumnIndex, endColumnIndex, text);
        grdCatalogo.addColumnSetScrollGrid(0, 0, 8, '');
        grdCatalogo.addColumnSetScrollGrid(0, 9, 10, 'Cliente');
    }
</script>

column-set.js 的代码：

oboutGrid.prototype.addColumnSetScrollGrid = function (level, startColumnIndex, endColumnIndex,     text) {

if (typeof (this.GridColumnSetsContainer) == 'undefined') {
    this.GridColumnSetsContainer = document.createElement('DIV');
    this.GridColumnSetsContainer.className = 'ob_gCSContScroll';

    this.GridColumnSetsContainer.style.width = this.GridMainContainer.style.width;


    this.GridMainContainer.appendChild(this.GridColumnSetsContainer);
}

if (typeof (this.ColumnSets) == 'undefined') {
    this.ColumnSets = new Array();
}

if (typeof (this.ColumnSets[level]) == 'undefined') {
    this.ColumnSets[level] = new Array();

    this.GridHeaderContainer.firstChild.style.marginTop = (level + 1) * 25 + 'px';

    var levelContainer = document.createElement('DIV');
    levelContainer.className = "ob_gCSContLevel";
    levelContainer.style.width = this.GridHeaderContainer.firstChild.firstChild.offsetWidth + 'px';

    this.GridColumnSetsContainer.appendChild(levelContainer);
}
//        if ($(this.GridMainContainer).css('width') <= $(this.GridColumnSetsContainer).css('width')) {
//            var newWidth = $(this.GridColumnSetsContainer).css('width') - $(this.GridMainContainer).css('width');
//            $(this.GridColumnSetsContainer).css('width',newWidth);
//        }


var columnSet = document.createElement('DIV');
columnSet.className = 'ob_gCSet';
this.GridColumnSetsContainer.childNodes[level].appendChild(columnSet);
//var position = this.GridHeaderContainer.position();
var position = this.GridHeaderContainer.getBoundingClientRect()
var top = position.top;
var left = position.left;
$(this.GridColumnSetsContainer).css({ "top": top });
$(this.GridColumnSetsContainer).css({ "margin-left": left });

var columnSetContent = document.createElement('DIV');
columnSetContent.innerHTML = text;
columnSet.appendChild(columnSetContent);

columnSet.style.width = columnSetWidth + 'px';
if (endColumnIndex < this.ColumnsCollection.length - 1) {
    var tempLevel = level;
    if (!(level == 0 || this.GridHeaderContainer.firstChild.childNodes[endColumnIndex + 1].style.top)) {
        tempLevel -= 1;
    }

    var newTop = (-1 - tempLevel) * (25);

    this.GridHeaderContainer.firstChild.childNodes[endColumnIndex + 1].style.top = newTop + 'px';
}

if (this.ColumnsCollection.lenght != 0) {
    var columnSetWidth = 0;
    for (var i = startColumnIndex; i <= endColumnIndex; i++) {
        if (this.ColumnsCollection[i] != null && this.ColumnsCollection[i] != 'undefined' && this.ColumnsCollection[i].Visible) {
            columnSetWidth += this.ColumnsCollection[i].Width;
        }
    }
}

columnSet.style.width = columnSetWidth + 'px';


var columnSetObject = new Object();
columnSetObject.Level = level;
columnSetObject.StartColumnIndex = startColumnIndex;
columnSetObject.EndColumnIndex = endColumnIndex;
columnSetObject.ColumnSet = columnSet;

this.ColumnSets[level].push(columnSetObject);
}

oboutGrid.prototype.resizeColumnSets = function () {
for (var level = 0; level < this.ColumnSets.length; level++) {
    for (var i = 0; i < this.ColumnSets[level].length; i++) {
        var columnSetWidth = 0;
        for (var j = this.ColumnSets[level][i].StartColumnIndex; j <= this.ColumnSets[level]    [i].EndColumnIndex; j++) {
            if (this.ColumnsCollection[j].Visible) {
                columnSetWidth += this.ColumnsCollection[j].Width;
            }
        }

        this.ColumnSets[level][i].ColumnSet.style.width = columnSetWidth + 'px';
    }
    }
    }

oboutGrid.prototype.resizeColumnOld = oboutGrid.prototype.resizeColumn;
oboutGrid.prototype.resizeColumn = function (columnIndex, amountToResize, keepGridWidth) {
this.resizeColumnOld(columnIndex, amountToResize, keepGridWidth);

this.resizeColumnSets();
}

oboutGrid.prototype.synchronizeBodyHorizontalScrollingOld =         oboutGrid.prototype.synchronizeBodyHorizontalScrolling;
oboutGrid.prototype.synchronizeBodyHorizontalScrolling = function () {
this.synchronizeBodyHorizontalScrollingOld();

//this.GridColumnSetsContainer.style.marginLeft = -1 *    this.GridBodyContainer.firstChild.scrollLeft + 'px';
this.GridHeaderContainer.firstChild.style.marginLeft = -1 *    this.GridBodyContainer.firstChild.scrollLeft + 'px';
this.GridColumnSetsContainer.scrollLeft = this.GridBodyContainer.firstChild.scrollLeft;
}

css 文件：

.ob_gCSContScroll
{
    position: absolute !important;
    /*top: 17px !important;*/
    left: 0px !important;
    right: 0px !important;
    overflow: hidden;
    width: 1179px;
    margin-left: 47px;
}

/* A column set row (level) */
.ob_gCSContLevel
{
    height: 25px !important;
    background-image: url(column-set.png);
    background-repeat: repeat-x;
    background-color: #A8AEBD;
}

/* The column set for a number of columns */
.ob_gCSet
{
    color: #01354D;
    font-family: Verdana;
    font-size: 12px;
    font-weight: bold;
    float: left;
    text-align: center;
}



/* The text of a column set */
.ob_gCSet div
{
    margin-left: 20px;
    margin-top: 3px;
}

/* The separator between two column sets */
.ob_gCSetSep
{
    top: -25px !important;
}

.ob_gHCont, .ob_gHContWG
{
    z-index: 10 !important;
}

.ob_gHICont
{
    overflow: visible !important;
}

Answer 1

我找到了解决方案，我不得不修改下一个文件：

1.- 我必须在 column-set.js 文件的 addColumnSet 方法中添加下一行：

this.GridColumnSetsContainer.setAttribute("id","BarraScroll");

我在这一行之后添加了它：

this.GridColumnSetsContainer.className = 'ob_gCSCont';

2.- 我不得不修改下一个函数：oboutGrid.prototype.synchronizeFixedColumns，它在 oboutgrid_scrolling.js 文件中，所有更改的方法是下一个，每次用户调用这个方法滚动网格并且网格标记内的标记 ScrollSetting 的属性 NumberOrFixedColumns 不为零：

oboutGrid.prototype.synchronizeFixedColumns = function() {
    var b = this.HorizontalScroller.firstChild.scrollLeft;
    if (this.PreviousScrollLeft == b) return;
    else this.PreviousScrollLeft = b;
    var g = parseInt(this.ScrollWidth);
    if (this.FixedColumnsPosition == 1) {
        for (var f = this.getVisibleColumnsWidth(false), c = false, a = this.NumberOfFixedColumns; a < this.ColumnsCollection.length - 1; a++)
            if (f > g) {
                if (this.ColumnsCollection[a].Visible)
                    if (b >= this.ScrolledColumnsWidth) {
                        this.hideColumn(a, false, false);
                        this.markColumnsAsScrolled(a);
                        f = this.getVisibleColumnsWidth(false);
                        document.getElementById("BarraScroll").scrollLeft = b + this.ColumnsCollection[a].Width;
.                        c = true
                    } else break
            } else break;
        if (!c)
            for (var a = this.ColumnsCollection.length - 2; a >= this.NumberOfFixedColumns; a--)
                if (this.ColumnsCollection[a].RealVisible == true && this.ColumnsCollection[a].Visible == false)
                    if (b <= this.ScrolledColumnsWidth - this.ColumnsCollection[a].Width) {
                        document.getElementById("BarraScroll").scrollLeft = b;
                        this.showColumn(a, false, false);                      
                        this.unmarkColumnsAsScrolled(a)
                    } else break
    } else {
        for (var e = false, c = false, d = this.getFixedColumnsWidth() - this.PreviousFixedColumnsWidth, a = 1; a < this.ColumnsCollection.length - this.NumberOfFixedColumns; a++)
            if (this.ColumnsCollection[a].RealVisible == true && this.ColumnsCollection[a].Visible == false)
                if (b - d >= this.ScrolledColumnsWidth) {
                  document.getElementById("BarraScroll").scrollLeft = b + this.ColumnsCollection[a].Width;
                    this.showColumn(a, false, false);
                    this.markColumnsAsScrolled(a);
                    e = true
                } else break;
        var h = false;
        if (!e)
            for (var a = this.ColumnsCollection.length - this.NumberOfFixedColumns - 1; a > 0; a--)
                if (this.ColumnsCollection[a].Visible)
                    if (b - d <= this.ScrolledColumnsWidth - this.ColumnsCollection[a].Width) {
                        document.getElementById("BarraScroll").scrollLeft = b;
                        this.hideColumn(a, false, false);
                        this.unmarkColumnsAsScrolled(a);
                        d = this.getFixedColumnsWidth() - this.PreviousFixedColumnsWidth;
                        c = true
                    } else break;
        if (e || c) {
            this.rightAlignGridContent();
            if (b == 0) {
                this.PreviousFixedColumnsWidth = this.getFixedColumnsWidth();
                this.ScrolledColumnsIndexes = ",";
                this.updateScrolledColumnsWidth()
            }
        }
    }
};