3

jqgrid列ヘッダーと修正フッターを修正しようとしていました。データ付きのjqgridと一緒に他のアイテムがある場合、ユーザーが何を見ているのかを常に把握できるように、ヘッダーを修正することを検討していました。

これが私が探しているもののサンプルです

ここでは、ブラウザのスクロールバーを見ていることに注意してください。jqgridはこれをサポートしていますか？

編集

結局、JQGridはhtmlテーブルなので、jQuery THFloatPluginを使ってみました。ここで、JqGridは3つのテーブルで構成されていることがわかります。1つはヘッダー用、1つはデータ用、もう1つはフッター用です。だから私はこれに対応するためにthfloatを変更するか、何か他のものを考え出す必要があるようです...

4

3 に答える 3

1

これは割るのが難しいナットでした。

私はそれを最初に動作させましたcssはoverflow：hiddentoであるデフォルトをオーバーライドします

.ui-jqgrid .ui-jqgrid-sdiv{overflow:visible;}
.ui-jqgrid .ui-jqgrid-hdiv{overflow:visible;}

javascriptでJQueryが助けになりました私は以下を実装しました

function screenBottom() {
    return $(window).scrollTop() + $(window).height();
}     
$(window).scroll(function () {
        var dataTableTop = dataTable.offset().top;
        var dataTableHeight = dataTableTop + dataTable.outerHeight();
        var windowTop = $(window).scrollTop();
        var windowBottom = screenBottom();
        //Scroll down         
        if (windowTop > dataTableTop - headerTable.height()
                && windowTop < (dataTableHeight - headerTable.height())) {
            headerTable.offset({ top: windowTop, left: headerTable.offset().left });
        }
        //For footer
        if (windowBottom > dataTable.offset().top + footerTable.outerHeight()
                && windowBottom < dataTableHeight + footerTable.outerHeight()) {
            footerTable.offset({ top: windowBottom - footerTable.outerHeight(), left: footerTable.offset().left });
        }
        //Re adjust of the movement is too fast
        if (windowTop < (dataTableTop - headerTable.height())
            && dataTableTop < (headerTable.offset().top + headerTable.height())) {
            headerTable.offset({ top: dataTable.offset().top - headerTable.height(), left: headerTable.offset().left });
        }
        if (windowBottom > dataTableHeight + footerTable.outerHeight()) {
            footerTable.offset({ top: dataTableHeight, left: footerTable.offset().left });
        }

    });

次に、ウィンドウのサイズを変更するときにフッターとヘッダーを確認します

        $(window).resize(function () {
            setInitializeHeadersAndFootersPosition();
        });
function setInitializeHeadersAndFootersPosition() {
            var dataTableTop = dataTable.offset().top;
            var dataTableHeight = dataTableTop + dataTable.outerHeight();
            var windowTop = $(window).scrollTop();
            var windowBottom = screenBottom();
            if (windowBottom > dataTableTop && windowBottom < dataTableHeight) {
                footerTable.offset({ top: windowBottom - footerTable.outerHeight(), left: footerTable.offset().left });
            }
            if (footerTable.offset().top < dataTableHeight && windowBottom > dataTableHeight) {
                footerTable.offset({ top: dataTableHeight, left: footerTable.offset().left });
            }
            if (windowTop > dataTableTop && windowTop < dataTableHeight) {
                headerTable.offset({ top: windowTop, left: headerTable.offset().left }); //Header does not need the offset
            }
        }
于 2012-04-23T14:19:10.233 に答える
0

不足している変数を設定する方法について説明したいと思いました。

//grid = $("#yourGrid").jqGrid( ...

dataTable = $(grid[0].grid.bDiv);
footerTable = $(grid[0].grid.sDiv);
headerTable = $(grid[0].grid.hDiv);
//my header column was behind the grid
headerTable.css('z-index', '1000');
setInitializeHeadersAndFootersPosition();
于 2016-02-18T16:22:35.443 に答える
0

なんと素晴らしい解決策であるサラスは、私を大いに助けてくれました。私はあなたの仕事を拡張したので、ヘッダーが最初にページからスクロールされたり、再配置されたりしたときに、ヘッダーが1回だけ「バウンス」します。その後、位置は固定に切り替えられますが、補正が必要な他の要素がすべてあります。楽しみ！

$(window).bind('scroll', function () {
    var _grid = $('#jqGrid');  // jqgrid name
    var dataTable = $(_grid[0].grid.bDiv);
    var headerTable = $(_grid[0].grid.hDiv);
    var dataTableTop = dataTable.offset().top;
    var dataTableHeight = dataTableTop + dataTable.outerHeight();
    var windowTop = $(window).scrollTop();
    var headerTablePosition = headerTable[0].style.position;

    //Scroll down         
    if (windowTop > dataTableTop - headerTable.height() && windowTop < (dataTableHeight - headerTable.height()) && headerTablePosition != "fixed")
    {
        var leftOffset = headerTable.offset().left + 'px';  // grab the offset before changing postition
        $(dataTable).css("top", (headerTable.height()+1) + "px");  // +1 to account for the border width of the header
        headerTable[0].style.position = "fixed";
        headerTable[0].style.top = "0px";
        headerTable[0].style.left = leftOffset;
        dataTable[0].style.height = "auto";
        $($(_grid[0].grid.sDiv)).css("top", (headerTable.height() + 1) + "px");  // footer table, +1 to account for the border width of the header
        var gridHeightString = $('#gview_jqGrid').css("height").replace("px", "");
        var newGridHeight = parseInt(gridHeightString) + headerTable.height() + 1;  // +1 to account for the border width of the header
        $("#gview_jqGrid").css("height", newGridHeight + "px"); //outermost grid element
    }
    //Scroll up
    else if (windowTop < (dataTableTop - headerTable.height()) && headerTablePosition == "fixed") 
    {
        headerTable[0].style.left = "0px";
        headerTable[0].style.position = "relative";
        $(dataTable).css("top", "0px");  
        $($(_grid[0].grid.sDiv)).css("top", "0px");  // footer table
        $("#gview_jqGrid").css("height", "100%");  //outermost grid element
    }
});
于 2017-02-02T23:17:39.803 に答える