内联编辑时jqGrid 4.1.0问题与图标悬停

Question

在以前的版本中，内联编辑看起来很好看：

但是在新版本中它看起来像那样（我把阅读边框放在上面）：

如何解决这个问题？

我正在使用jQuery 1.6.1，jQueryUI 1.8.13

我也使用了最新的jqGrid css文件

Answer 1

原因在于我在<span>元素的jqGrid 4.1.0中包含了错误的悬停效果以及保存和取消图标：

onmouseover=jQuery(this).addClass('ui-state-hover');
onmouseout=jQuery(this).removeClass('ui-state-hover');

查看jquery.fmatter.js的源代码。

如果我正确理解了问题，添加'ui-state-hover'类会将background-position覆盖为50% 50%，因此磁盘的图标（ui-icon-disk）或取消图标（ui-icon-cancel）将不再显示。而不是显示the background image的中间位置。

所以我建议删除loadComplete内的悬停效果：

loadComplete: function() {
    $("div.ui-inline-save > span.ui-icon-disk, div.ui-inline-cancel > span.ui-icon-cancel").each(function() {
        this.onmouseover = null;
        this.onmouseout = null;
    });
}

请参阅the demo。

更新：：我找到了解决问题的更好方法。首先，我们可以将函数iconHoverFixed和iconNotHoverFixed修改为以下

var iconHoverFixed = function(e) {
        jQuery(this).addClass('ui-state-hover');
        jQuery('span',this).removeClass('ui-state-hover');
    },
    iconNotHoverFixed = function(e) {
        jQuery(this).removeClass('ui-state-hover');
    };

然后我们可以修复悬停问题：

loadComplete: function() {
    $("div.ui-inline-save, div.ui-inline-cancel").each(function() {
        this.onmouseover = iconHoverFixed;
        this.onmouseout = iconNotHoverFixed;
    });
}

查看新演示here或here。

Answer 2

看起来你需要更新jquery网格css和图像文件夹，图像是从图像中的偏移量构建的（Sprite）http://www.trirand.com/blog/jqgrid/themes/redmond/images/ui-icons_6da8d5_256x240.png 在你的情况下，它找不到合适的地方