free jqGrid: how to change icons and syles layout

问题

I am using the Bootstrap CSS for style. How do i change the icons used on the grid. Also, I need to make it the table changes as it does not render well.

Please advise which classes and icons or those can be assigned by API? Also, how to support "scope" of the CSS? so that it will not conflict with original application?

UPDATE 1 I have made the sizing and font changes sugguested by Oleg and it worked great! Now, I need to know how to change these Icons or Increase the size of them?

see the screenshot

回答1:

I recommend you use Font Awesome 4.7 for icons. You need just include CSS of Font Awesome (from https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css, for example) add iconSet: "fontAwesome" option of jqGrid.

One more advice: the next version of Bootstrap don't have old buildin Glyphicons icon font (see here). Bootstrap 4 recommend Font Awesome as one of possible alternatives.

If you need more deep replacing of icons you have to specify which one you need to replace to which one.

UPDATE: I created for you an example of customizing some background colors of free jqGrid, which use Bootstrap, and customizing the font size: https://jsfiddle.net/OlegKi/90qmjean/. The demo uses the following 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;
}

I think that you can easy modify the above CSS rules to produce the font size and the colors/background-colors which you need.

来源：https://stackoverflow.com/questions/42616935/free-jqgrid-how-to-change-icons-and-syles-layout

标签

jquery

free-jqgrid