javascript - 垂直滚动条占用最后一列的宽度

Question

我正在使用免费的 jqgrid 4.14。我在树状网格中的垂直滚动条有问题。我已经为树网格定义了一个高度。现在，当加载网格并且我尝试扩展它时，就会发生这种情况。

但是一旦我调整窗口大小时，滚动条的宽度就不是取自最后一列的宽度，而是它自己的宽度。见

所以，我想到了在开始时做load垂直滚动条

.ui-jqgrid .ui-jqgrid-bdiv { overflow-y: scroll }

但是它也从列中获取宽度。

我正在使用这些设置加载网格 -

    datatype: "jsonstring",
    datastr: grid_data,
    colNames: scopes.grid_header_column_value[grid_id],
    colModel: scopes.gridcolumns[grid_id],
    height: height,
    viewrecords: is_pager_enable,
    multiSort: true,
    ignoreCase: true,
    grouping: is_group_enable,
    headertitles:true,
    sortorder: sort_order,
    sortable: false,
    pager: "#" + pager_id,
    treeGrid: true,
    treeGridModel: 'adjacency',
    treedatatype: "jsonstring",
    ExpandColumn: 'name'

此外，我正在应用这些属性 -

$("#" + grid_id).closest('.ui-jqgrid-bdiv').width($("#" + grid_id).closest('.ui-jqgrid-bdiv').width() + 1);
$(".ui-jqgrid-sortable").css('white-space', 'normal');
$(".ui-jqgrid-sortable").css('height', 'auto');
$(".ui-jqgrid tr.jqgrow td").css('white-space', 'normal');
$(".ui-jqgrid tr.jqgrow td").css('height', 'auto');
$("div.ui-jqgrid-sdiv").after($("div.ui-jqgrid-bdiv"));

我也在使用 jqGridAfterLoadComplete 事件，这样在加载时它也会执行与从 here 调整大小时应该执行的相同操作

那么，如何强制垂直滚动条从网格外部获取宽度。

更新:解决方案后添加图片

这是我想要的图片。

这里不需要滚动条，但仍然将其初始化为空，不占用列宽

调整大小时出现问题:我在调整窗口大小时使用 jquery 事件，以便根据屏幕调整 jqgrid 的大小，但这里的问题是如果我将窗口调整为较小的屏幕并伸展树(Splay Tree)状网格，滚动条就会出现。调整大小的代码是这样的-

 $(window).bind('resize', function () {
         resizeGrid.call($('#' + grid_id));
        });

resizeGrid = function () {
        var newWidth = $(this).closest(".ui-jqgrid").parent().width();
        $(this).jqGrid("setGridWidth", newWidth, true);
        };

像这样-

这里的滚动条有额外的空间，它超出了给定的空间。此外，现在如果我将窗口调整为完整大小并折叠所有行，滚动条就会出现空行。

看起来像这样-

Answer 1

尝试使用以下代码添加回调 treeGridAfterExpandRow:

treeGridAfterExpandRow: function () {
    this.fixScrollOffsetAndhBoxPadding();
}

我不确定我是否完全理解您需要具备的行为。大概是使用了两个回调 treeGridAfterExpandRow 和 treeGridAfterCollapseRow

treeGridAfterExpandRow: normalizeWidth,
treeGridAfterCollapseRow: normalizeWidth

normalizeWidth 定义为

var normalizeWidth = function () {
        var $self = $(this), p = $self.jqGrid("getGridParam");
        this.fixScrollOffsetAndhBoxPadding();
        if (!p.autowidth && (p.widthOrg === undefined || p.widthOrg === "auto" || p.widthOrg === "100%")) {
            $self.jqGrid("setGridWidth", p.tblwidth + p.scrollOffset, false);
        }
    };

会更贴近您的要求。如果垂直滚动条可见，以上代码将 TreeGrid 的宽度扩展到滚动条的宽度。