如何增加 jqgrid 标题复选框的大小

Question

使用来自JQgrid set row height 答案的样式增加了免费 jqgrid 行高和字体大小 和How to make free jqrid font awesome action buttons bigger

/* https://stackoverflow.com/questions/3203402/jqgrid-set-row-height
*/
.ui-jqgrid .ui-jqgrid-htable th {
    height: 2em;
    font-size: 1.2em;
}

.ui-jqgrid tr.jqgrow td {
    height: 2.8em;
}


/*https://stackoverflow.com/questions/28972025/how-to-make-free-jqrid-font-awesome-action-buttons-bigger/
*/
.jqgrow .ui-jqgrid-actions > .ui-pg-div > span {
    font-size: 22px;
}

使用了 FontAwesome 图标集和复选框。 网格列标题中的行选择列复选框仍然太小：

如何使行选择列标题复选框与行中的大小相同？

更新

我创造了风格

#grid_cb {
    padding: 0;
}

#jqgh_grid_cb {
    margin: 0;
    height: 21px;
}

#cb_grid {
    width: 100%;
    height: 100%;
}

但这适用于具有 id 网格的网格。如何使其也适用于其他网格？

Answer 1

人们可以通过不同的方式实现需求。例如，可以执行以下操作

$("#list_cb").css({padding: 0});
$("#jqgh_list_cb").css({margin: 0, height:"21px"});
$("#cb_list").css({width: "100%", height: "100%"});

如果网格的 id 是"list"。结果会得到如下图所示的标题：

在不同的网络浏览器中，结果可能会略有不同（因为在某些浏览器中使用了小的阴影效果，所以总是以 1px 为单位）。见the demo。

更新：与CSS规则相同的设置如下：

.ui-jqgrid .ui-jqgrid-htable th.jqgh_cbox {
    padding: 0;
}
.ui-jqgrid .ui-jqgrid-htable .ui-jqgrid-labels .jqgh_cbox > div {
    margin: 0;
    height: 21px;
}
.ui-jqgrid .ui-jqgrid-labels .jqgh_cbox > div > .cbox {
    width: 100%;
    height: 100%;
}

见the demo。

如果您要使用来自 GitHub 的最新免费 jqGrid 资源，则可以将上述 CSS 规则简化为以下内容：

.ui-jqgrid .ui-jqgrid-htable .ui-jqgrid-labels .jqgh_cbox > div {
    height: 21px;
}
.ui-jqgrid .ui-jqgrid-labels .jqgh_cbox > div > .cbox {
    width: 100%;
    height: 100%;
}