如何增加 jqgrid header 复选框大小

Question

免费的 jqgrid 行高和字体大小使用来自 JQgrid set row height 的答案的样式增加和

/* 
*/
.ui-jqgrid .ui-jqgrid-htable th {
    height: 2em;
    font-size: 1.2em;
}

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


/*
*/
.jqgrow .ui-jqgrid-actions > .ui-pg-div > span {
    font-size: 22px;
}

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

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

更新

我创造了风格

#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"。结果会得到如下图所示的 header：

结果在不同的网络浏览器中可能会略有不同（始终为 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%;
}

如何增加 jqgrid header 复选框大小

How to increase jqgrid header checkbox size

css

checkbox

jquery

jqgrid

free-jqgrid