jqGrid的使用

最新推荐文章于 2025-06-13 16:25:59 发布

原创最新推荐文章于 2025-06-13 16:25:59 发布 · 508 阅读

0 ·

CC 4.0 BY-SA版权

web，前端，css 专栏收录该内容

13 篇文章

订阅专栏

在jqGrid使用bootstrap4 会出现找不到字体，因为bootstrap4以后之前使用的字体收费，已经不使用了。。但是jqgrid在使用bootstrap的ui css时，有些图标会显示不出来，从而我们需要指定jqgrid使用bootstrap4的 style，并指定某一种图标字体

可选的字体有

GitHub Octicons, Iconic and free Font Awesome.

https://octicons.github.com/

https://useiconic.com/icons/

https://fontawesome.com/icons?d=gallery&m=free

具体使用方法如下例所示：

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="utf-8" />
   <!-- A link to a Bootstrap css 这里是用的bootstrap4（4以上的也可以）-->
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">     
   <!-- A link to a Octicons css 使用octicons字体图标 -->
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/octicons/4.4.0/font/octicons.css">

<!--这个是fontawsome字体图标，也可以使用这个，不过jqgrid初始化是要对应指定fontawsome
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
-->
   <!-- A link to a jqGrid Bootstrap 4 css  jqgrid里要使用bootstrap4对应的-->
   <link rel="stylesheet" type="text/css" media="screen" href="../../../css/trirand/ui.jqgrid-bootstrap4.css" />

   <!-- The jQuery library is a prerequisite for all jqSuite products -->
   <script type="text/ecmascript" src="../../../js/jquery.min.js"></script>

   <!-- This is the localization file of the grid controlling messages, labels, etc.
   <!-- We support more than 40 localizations  grid的字体-->
   <script type="text/ecmascript" src="../../../js/trirand/i18n/grid.locale-cn.js"></script>
   <!-- This is the Javascript file of jqGrid jqgrid的js -->   
   <script type="text/ecmascript" src="../../../js/trirand/jquery.jqGrid.min.js"></script>
   <!-- Optional Bootstrap JavaScript files 弹出窗口的-->
   <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<!--bootstrap版本使用的是4以上的--->
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>


<script>
//这里要制定使用bootstrap的4版本的样式
$.jgrid.defaults.styleUI = 'Bootstrap4';
//指定使用的字体图标，当然也可以使用fontAwesome等，但是引用的css要使用对应的
$.jgrid.defaults.iconSet = 'Octicons';

//$.jgrid.defaults.iconSet = "Iconic";      
//$.jgrid.defaults.iconSet = "fontAwesome";
</script>
</head>
<body>
...
</body>
</html>

参考文献：

jqgrid的使用： http://www.guriddo.net/documentation/guriddo/javascript/