jquery - 如何增加 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%;
}