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

我正在使用免费的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事件，以便在加载时也执行与从中调整大小时相同的操作

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

更新：在解决方案后添加图像

这是我想要的图片

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

调整大小时出现问题： 当窗口调整大小时，我使用jquery事件，以便根据屏幕调整jqgrid的大小，但这里的问题是，如果我将窗口调整为更小的屏幕并展开树网格，滚动条就会出现。 用于调整大小的代码如下所示-

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

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

像这样-

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

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

在这里，滚动条有额外的空间，并且它超出了给定的空间。 另外，现在如果我将窗口调整为全尺寸，并折叠所有行，滚动条中就会出现空的行

看起来像这样-

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

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

---

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

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的宽度扩展到滚动条的宽度。

我尝试了您的解决方案，但没有找到问题所在。对于树栅格，它正在增加宽度，以便栅格本身被剪切。我在网上发布了一张同样的图片question@shv22当前位置我仍然不完全理解当前的问题是什么。如果使用第二种方式（使用

normalizeWidth

），则滚动条应该与第二张图片上的一样（）。您使用本地数据类型。然后最好创建演示（在JSFIDLE中），演示当前的问题。我可以修改演示的代码使其正常工作。我已经完全更新了我想要的内容，并且我在@shv22上创建了一个演示：你的上一个演示不使用代码，我在我的回答中发布了这个代码！请参阅

normilizeWidth

的代码和我之前评论中的演示。您的演示修改将非常感谢您！这对我来说很有效，很抱歉使用了代码，但我想尽快创建，这就是为什么我使用了您的代码。