是否可以自定义jqgrid外观？

Question

我希望我的jqgrid看起来像bootstrap tables的外观和感觉 是否可以自定义外观 我知道jqgrid支持（jquery主题），但我希望bootstarp的外观和感觉而不是jquery主题。

Answer 1

问题是jqGrid基于jQuery UI CSS framework。 jqGrid动态地从空<table>元素构建网格。它插入了许多具有预定义CSS名称的元素，如"ui-widget"，"ui-widget-content"，"ui-state-hover"，"ui-icon"等等。

之前从未使用过bootstrap。它似乎有自己的Base CSS框架。因此，我看到的唯一方法是您自定义jQuery UI CSS，以便它对应于bootstrap的外观。你可以尊重Themeroller来做到这一点。在页面上，您可以交互式地创建新的jQuery UI主题，它看起来非常接近bootstrap CSS。最后，您可以通过单击“下载主题”按钮下载自定义CSS（请参阅页面左侧“自行滚动”选项卡）。或者，您可以使用jQuery UI ThemeRoller Developer Tool创建新的CSS。

Answer 2

我遇到了同样的问题，最后放弃了jqgrid并获得了DataTables - http://datatables.net/。它与jqgrid非常相似，可以说具有更好的功能，并带有如何像bootstrap一样设计样式的说明 - http://datatables.net/blog/Twitter_Bootstrap。

Answer 3

我有同样的问题，创建了我自己的CSS样式。检查：https://github.com/Soliman/jqGrid.bootstrap。它有点乱，但它起初是适合我的。

Answer 4

jqGrid使用基于jQuery UI的html和类，因此jQuery UI的Bootstrap主题应该可以解决问题，除非您已经自定义了Bootstrap，否则需要进行两次相同的自定义。

http://addyosmani.github.com/jquery-ui-bootstrap/

Answer 5

jqGrid的另一个引导主题： http://jquery-ui-bootstrap.github.io/jquery-ui-bootstrap/extra.html#jqgrid

Answer 6

我使用免费的jqGrid（trirand jqGrid的一个分支），它支持内置样式。您可以使用两个主要选项调整外观：

1. guiStyles（https://github.com/free-jqgrid/jqGrid/blob/master/dist/jquery.jqgrid.src.js#L600）：jQueryUI，bootstrap，bootstrapPrimary，bootstrap4
2. icons :( https://github.com/free-jqgrid/jqGrid/blob/master/dist/jquery.jqgrid.src.js#L389）：jQueryUI，fontAwesome，glyph