在 jqGrid 寻呼机中垂直对齐图标

Question

我使用下面的 jquery 代码将 24x24 png 放置到 jqgrid 的左侧寻呼机中。我也在应用垂直对齐中间。

  $("#pager_left").append (
    '<td><div><img alt="" id="imgprint" src="images/word24x24.png"/></div></td>');
  $("#imgprint").css('vertical-align', 'middle');

从 chrome 开发人员工具中捕获的结果 html 代码是

计算出的 pager_left 尺寸为 214x28 + 1px 上下填充。结果 pager_left 如下所示，图标在底部而不是中间对齐。我做错了什么？

Answer 1

寻呼机的结构是 table 导向的，并且在 jqGrid 4.6 中非常硬编码。设置 vertical-align 不会真正帮助你，因为它位于其他潜水和单元格的深层层次结构中，这些单元格将不是垂直居中，其中一些具有固定编码 height 以像素为单位。

首先，我建议您另外添加 empty 导航栏，以更加确认寻呼机的现有结构。

$("#grid").jqGrid("navGrid", "#pager", 
    { edit: false, add: false, del: false, refresh: false, search: false });

之后我建议您使用以下 CSS 规则定义 wordIcon class

.ui-jqgrid .ui-jqgrid-pager { height: auto; }
.ui-jqgrid .ui-pg-table { padding: 0 0 0 1px; }
.ui-pg-div .wordIcon {
    width: 24px;
    height: 24px;
    background-image: url("images/word24x24.png")
}

并使用类似

的代码

$grid.jqGrid("navButtonAdd", "#pager", {
    buttonicon: "wordIcon",
    caption: "",
    id: 
    title: "Export to Word",
    onClickButton: function(){
        alert("Export to Word is clicked!");
    }
});

如果您将一些标准图标（例如“重新加载网格”按钮）添加到导航栏，上述代码将运行良好。你会得到类似 the demo

的结果

或者您可以不使用 navButtonAdd 并保留您的原始代码

$("#pager_left").append (
                '<div><img alt="" id="imgprint" src="http://ephtracking.cdc.gov/images/content/word-24x24.png"/></div>');

使用以下 CSS 规则：

.ui-jqgrid .ui-jqgrid-pager { height: auto; }
.ui-jqgrid .ui-pg-table { padding: 2px 0 0 1px; }

你会得到类似 the demo 的结果：

在 jqGrid 寻呼机中垂直对齐图标

Align an icon vertically in jqGrid pager

css

jquery

jqgrid