免费jqGrid：如何更改图标和syles布局

Question

我正在使用Bootstrap CSS作为样式。如何更改网格上使用的图标。此外，我需要更改表格，因为它不能很好地呈现。

请告知API可以分配哪些类别或图标？ 另外，如何支持CSS的“范围”？这样它不会与原始应用程序冲突？

更新1 我已经完成了Oleg的尺寸调整和字体更改，并且效果很好！ 现在，我需要知道如何更改这些图标或增加它们的大小？

查看截图

Answer 1

我建议您使用Font Awesome 4.7作为图标。您只需要包含Font Awesome的CSS（例如，来自https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css）添加jqGrid的iconSet: "fontAwesome"选项。

还有一个建议：下一个版本的Bootstrap没有旧的buildin Glyphicons图标字体（参见here）。 Bootstrap 4推荐Font Awesome作为可能的替代方案之一。

如果您需要更深入地替换图标，则必须指定需要替换哪一个图标。

更新：我为您创建了一个自定义jqGrid的一些背景颜色的示例，它使用Bootstrap，并自定义字体大小：https://jsfiddle.net/OlegKi/90qmjean/。该演示使用以下CSS

.ui-jqgrid.ui-jqgrid-bootstrap .ui-jqgrid-titlebar .ui-jqgrid-title,
.ui-jqgrid.ui-jqgrid-bootstrap .ui-jqgrid-errorbar .ui-jqgrid-error,
.ui-jqdialog.ui-jqgrid-bootstrap .ui-jqdialog-titlebar .ui-jqdialog-title {
      font-size: 18px;
}
.ui-jqdialog.ui-jqgrid-bootstrap .FormData .CaptionTD {
      font-size: 16px;
}
.ui-jqgrid.ui-jqgrid-bootstrap > .ui-jqgrid-view,
.ui-jqgrid.ui-jqgrid-bootstrap .ui-pager-control .ui-pg-input,
.ui-jqgrid.ui-jqgrid-bootstrap > .ui-jqgrid-pager,
.ui-jqgrid.ui-jqgrid-bootstrap .ui-pager-control .ui-pg-selbox,
.ui-jqgrid > .ui-jqgrid-view input,
.ui-jqgrid > .ui-jqgrid-view select,
.ui-jqgrid > .ui-jqgrid-view textarea,
.ui-jqgrid > .ui-jqgrid-view button {
      font-size: 14px;
}
.ui-jqgrid.ui-jqgrid-bootstrap > .ui-jqgrid-view .fa,
.ui-jqgrid.ui-jqgrid-bootstrap > .ui-jqgrid-pager .fa,
.jqgrow .ui-pg-div > span.fa {
      font-size: 18px;
}
.ui-jqgrid .ui-jqgrid-htable th {
    padding: 0 .3em 0 .3em;
}
.ui-jqgrid tr.jqgrow > td,
.ui-jqgrid tr.jqgroup > td,
.ui-jqgrid tr.jqfoot > td,
.ui-jqgrid tr.jqfoot > td,
.ui-jqgrid tr.jqgfirstrow > td {
    padding: 0 .3em 0 .3em;
}
.ui-jqgrid.ui-jqgrid-bootstrap,
.ui-jqgrid-bootstrap.ui-jqdialog modal-content {
      border: 1px solid #003380;
}
.ui-jqgrid.ui-jqgrid-bootstrap .ui-jqgrid-caption,
.ui-jqdialog.ui-jqgrid-bootstrap .ui-jqdialog-titlebar {
    background-color: #0073e6;
    color: white;
}
.ui-jqgrid.ui-jqgrid-bootstrap .ui-jqgrid-hdiv {
    background-color: #99ccff;
}
.ui-jqgrid-bootstrap.ui-jqgrid .ui-jqgrid-toppager,
.ui-jqgrid-bootstrap.ui-jqgrid .ui-jqgrid-pager {
    background-color: #cce6ff;
}
.table > thead > tr > td.active,
.table > tbody > tr > td.active, 
.table > thead > tr > th.active,
.ui-pg-table .ui-pg-button.active,
.ui-jqgrid-actions .ui-pg-div.active {
    background-color: #e6f2ff;
}
.ui-pg-table .ui-pg-button.active,
.ui-jqgrid-actions .ui-pg-div.active {
    border-radius: .4em;
}
.ui-jqgrid-btable tr.jqgrow.success,
.ui-jqgrid-btable tr.jqgrow.success > td {
    background-color: #ccffee;
}
.ui-jqgrid-btable tr.jqgrow.active,
.ui-jqgrid-btable tr.jqgrow.active > td
.ui-jqgrid-btable > tbody > tr.jqgrow.active > td:hover,
.ui-jqgrid-btable.table-hover > tbody > tr.jqgrow.active:hover > td,
.ui-jqgrid-btable.table-hover > tbody > tr.jqgrow:hover > .active,
.ui-jqgrid-btable.table-hover > tbody > tr.jqgrow.active:hover > th {
    background-color: #ffffe6;
}
.ui-jqgrid-btable tr.jqgrow.active.success,
.ui-jqgrid-btable tr.jqgrow.active.success > td {
    background-color: #e6e6ff;
}
.ui-jqdialog-titlebar-close.active {
    background-color: #ccffee;
}

我认为您可以轻松修改上述CSS规则，以生成您需要的字体大小和颜色/背景颜色。