如何删除免费 jqgrid 末尾的多余空列

Question

如果缩放级别不是 100% 并且使用小屏幕分辨率，则对于某些缩放级别，免费 jqgrid 的末尾会出现额外的空列。要重现，请打开

http://www.ok-soft-gmbh.com/jqGrid/OK/Andrus-.htm

在 Chrome 中，在 1024x768 屏幕分辨率下的 67% 缩放级别：

对于其他一些网格布局，自由列更宽。

如何删除末尾的空列？

在早期版本中不会出现。

Answer 1

问题出在缩放 1px 的网格边界上。因此，它可能存在网格宽度与外部 div 的差异，该差异小于 1px，但仍然可见。

可以通过使用 .getBoundingClientRect().width 而不是 jQuery.width 来获取网格的宽度并在每个 jqGrid 的不同外部 div 上设置相同的值来解决这个问题调整网格或列的大小以及调整页面的大小（更改缩放）。对应的代码可以是：

var fineTuningOfWidth = function () {
        var $grid = $("#list"),
            gridWidth = $grid[0].getBoundingClientRect().width.toFixed(2) + "px",
            $gview = $grid.closest(".ui-jqgrid-view");
        $grid.closest(".ui-jqgrid-bdiv").css("width", gridWidth);
        $gview.children("div.ui-jqgrid-hdiv").css("width", gridWidth);
        $gview.css("width", gridWidth);
        $grid.closest(".ui-jqgrid").css("width", gridWidth);
    };
$("#list").jqGrid({
    datatype: "json",
    url: "andrus.json",
    colModel: [
        { label: "", name: "_actions", template: "actions" },
        { label: "Nimetus", name: "Nimi", jsonmap: "cell.0" }
    ],
    iconSet: "fontAwesome",
    jsonReader: { repeatitems: false }
}).bind("jqGridResizeStop", fineTuningOfWidth);
$(window).resize(fineTuningOfWidth);
setTimeout(fineTuningOfWidth, 150); // initial fine tuning of the width

见the modified demo

如何删除免费 jqgrid 末尾的多余空列

How to remove extra empty column in end of free jqgrid

jqgrid

free-jqgrid