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

我使用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 ）添加iconSet: "fontAwesome" jqGrid的选项。

还有一个建议：下一个版本的Bootstrap没有旧的buildin Glyphicons图标字体（见这里 ）。 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规则，以生成您需要的字体大小和颜色/背景颜色。