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

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 没有旧的内置 Glyphicons 图标字体（请参阅here）。 Bootstrap 4 推荐 Font Awesome 作为可能的替代方案之一。

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

更新：我为您创建了一个自定义一些使用 Bootstrap 的免费 jqGrid 的背景颜色和自定义字体大小的示例：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 规则以生成您需要的字体大小和颜色/背景颜色。