2

在 chrome 中使用带有内联编辑的 jqGrid 时，我注意到一个奇怪的错误。选择行时，垂直填充每次增长一到两个像素。我不确定是什么原因造成的，但我设法将其浓缩为一个简化的示例：

http://jsfiddle.net/3mrKD/

更新：没有 jqGrid 的更简单的版本：http: //jsfiddle.net/3mrKD/9/

如果在两行之间来回点击，可以让每一行的高度无限增长。Chrome 的检查器将多余的空间显示为填充，但大小与指标检查器的值不匹配。

我可以在适用于 Windows 和 Mac 的最新版 Chrome (26.0.1410.64 m) 上可靠地重现这一点，但不能在任何版本的 Firefox、IE 9 或 10 或 Safari 上重现。

这看起来像我正在使用的某个库中的错误吗？在铬？

带有额外垂直填充的表格单元格

HTML：

<table id="grid"></table>

CSS：

td { vertical-align: baseline; }

JavaScript：

var lastSelected;

$("#grid").jqGrid({
    datatype: "local",
    data: [{ id: 1, name: "Alice" }, { id: 2, name: "Bob" }],
    colModel: [
        {
            name: 'id'
        },
        {
            name: 'name',
            editable: true
        }
    ],
    onSelectRow: function(id) {
        if (id && id !== lastSelected) {
            $("#grid").jqGrid('restoreRow', lastSelected);
            $("#grid").jqGrid('editRow', id, true);
            lastSelected = id;
        }
    },
});
4

2 回答 2

2

这是一个有趣的问题。<td>我想这是谷歌浏览器中的一个错误：它以错误的方式计算高度。为了减少问题，我建议在行编辑开始时vertical-align重置。middle它将包括的附加style="vertical-align:middle"属性<td>。在编辑结束时可以删除该属性。

可以在修改后的 demo上看到结果。该演示在开始编辑时仍然将行高增加到1px，但我认为在使用其他CSS属性后可以消除效果。演示中使用的代码如下

var lastSelected,
    removeVerticalAlignBaseline = function (rowid) {
        var tr = $(this).jqGrid("getInd", rowid, true),
            $tds = $(tr).find(">td:has(>input)");
        $(tr).find(">td:has(>input)").each(function () {
            this.style.verticalAlign = "middle";
        });
    },
    resetVerticalAlignBaseline = function (rowid) {
        var tr = $(this).jqGrid("getInd", rowid, true),
            $tds = $(tr).find(">td");
        $(tr).find(">td:has(>input)").each(function () {
            this.style.verticalAlign = ""; // remove the style
            // now the style from CSS will be used
        });
    },
    editOptions = {
        keys: true,
        oneditfunc: removeVerticalAlignBaseline,
        aftersavefunc: resetVerticalAlignBaseline,
        afterrestorefunc: resetVerticalAlignBaseline,
    };

$("#grid").jqGrid({
    datatype: "local",
    data: [{ id: 1, name: "Alice" }, { id: 2, name: "Bob" }],
    colModel: [
        { name: 'id' },
        { name: 'name', editable: true }
    ],
    onSelectRow: function(id) {
        if (id && id !== lastSelected) {
            $(this).jqGrid('restoreRow', lastSelected, editOptions);
            $(this).jqGrid('editRow', id, editOptions);
            lastSelected = id;
        }
    },
    height: "auto"
});
于 2013-05-21T18:14:03.043 回答
1

事实证明，这是chrome（和webkit）中的一个错误。我最终使用的修复程序（链接的错误中还有其他建议）是：

div.ui-jqgrid td {
    vertical-align: middle;
}

我之前的 vertical-align 声明来自一般的 CSS 重置，所以我在有问题的地方覆盖了它。

于 2013-05-22T20:30:12.603 回答