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

时间:2017-05-24 08:12:05

标签: javascript jquery html css jqgrid

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

但是一旦我调整窗口大小,滚动条宽度就不会从最后一列宽度中获取而是拥有它。参见

enter image description here

所以,我想在开始时加载垂直滚动条

.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

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

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

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

enter image description here

这是一个图像,它准确指出了我想要的内容。

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

enter image description here

调整大小时出现问题: 我在调整窗口大小时使用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);
        };

喜欢这个 -

enter image description here

这里滚动条有额外的空间,它来自给定的空间。 此外,现在如果我将窗口调整为完整大小并折叠所有行,则滚动条为空。

看起来像这样 -

enter image description here

1 个答案:

答案 0 :(得分:1)

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

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

我不确定我是否完全明白,您需要采取哪种行为。可能使用了两个回调treeGridAfterExpandRowtreeGridAfterCollapseRow

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