Kogrid：网格的最后一列仅部分可见答案

【问题标题】：Kogrid: last column of grid is only partly visibleKogrid：网格的最后一列仅部分可见
【发布时间】：2014-04-29 01:21:27
【问题描述】：

在 koGrid 2.1.1 中：

不知何故，网格的最后一列只是部分可见。

我通过一个使用网格默认配置的示例重现了这个错误。

HTML：

<div class="gridStyle" data-bind="koGrid: gridOptions"></div>

CSS：

.gridStyle {
border: 1px solid rgb(212, 212, 212);
width: 400px;
height: 300px;
}

脚本：


function mainVm() {
    var self = this;
    this.myData = ko.observableArray([{
        name: "Moroni",
        age: 50
    }, {
        name: "Tiancum",
        age: 43
    }, {
        name: "Jacob",
        age: 27
    }, {
        name: "Nephi",
        age: 29
    }, {
        name: "Enos",
        age: 34
    }]);
    this.gridOptions = {
        data: self.myData
    };
};
ko.applyBindings(new mainVm());

小提琴：http://jsfiddle.net/4hUcc/1/

我找不到造成这种情况的原因。有什么线索吗？？

【问题讨论】：

在这里工作正常（Chrome）
header被截断了不能一直点击，原因是.kgHeaderContainer上的inline style width = 300

标签： javascript knockout.js kogrid

【解决方案1】：

为了计算滚动条的宽度和高度，一旦加载了 javascript 文件，koGrid 会在你的 body 中添加一个临时 div。

因此，如果您在 HTML 的头部添加 koGrid-x.js，则不会加载正文，滚动条测量将失败。

另一方面，如果您在 body 元素的末尾添加 koGrid-x.js 文件，它将已经加载并且一切都应该按预期工作。

【讨论】：

【解决方案2】：

在 koGrid-2.1.1.debug.js，第 2098 - 2114 行找到它：


 var getWidths = function () {
        var $testContainer = $('');
        $testContainer.appendTo('body');
        // 1. Run all the following measurements on startup!
        //measure Scroll Bars
        $testContainer.height(100).width(100).css("position", "absolute").css("overflow", "scroll");
        $testContainer.append('');
        window.kg.domUtilityService.ScrollH = ($testContainer.height() - $testContainer[0].clientHeight);
        window.kg.domUtilityService.ScrollW = ($testContainer.width() - $testContainer[0].clientWidth);
        $testContainer.empty();
        //clear styles
        $testContainer.attr('style', '');
        //measure letter sizes using a pretty typical font size and fat font-family
        $testContainer.append('M');
        window.kg.domUtilityService.LetterW = $testContainer.children().first().width();
        $testContainer.remove();
    };

window.kg.domUtilityService.ScrollH 和 window.kg.domUtilityService.ScrollW 计算不正确。通过将它们都设置为 0 来解决我的问题。（零）

谢谢！

【讨论】：

这里有同样的问题，这解决了它，但是我注意到当向右滚动时它会使标题水平对齐大约 10 像素。可能是那些设置来纠正这种“漂移”。无论如何，我认为现在可以接受。