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

Question

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

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

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

.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 事件，以便在加载时它也执行与从

调整大小时应该执行的相同操作

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

更新：在解决后添加了图片

这是我想要的图片。

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

调整大小时出现问题： 我在 window 调整大小时使用 jquery 事件，以便根据屏幕调整 jqgrid 的大小，但这里的问题是如果我将 window 调整为较小的屏幕并展开树状网格，滚动条来了。调整大小的代码是这样的-

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

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

像这样-

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

看起来是这样的-

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的宽度扩展到滚动条的宽度，如果垂直滚动条可见的话。

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

Vertical scrollbar taking last column width

html

javascript

css

jquery

jqgrid