如何增加jqgrid中图标的大小？

Question

我应该如何在 jqgrid 中增加图标的大小（添加、删除..）？我在 ui.jqgrid.css

中编写了以下代码

.ui-jqgrid .ui-jqgrid-pager .ui-pg-div  span.ui-icon,
.ui-jqgrid .ui-jqgrid-toppager .ui-pg-div  span.ui-icon{float:left;margin: 2px; width:18px;}
.ui-jqgrid .ui-jqgrid-toppager {border-left: 0 none !important;border-right: 0 none !important; border-top: 0 none 
!important; margin: 0 !important; padding: 0 !important; position: relative;white-space: nowrap;overflow: hidden;}

Answer 1

您的查询缺少一些有效信息，但您始终可以在 CSS 中使用缩放以覆盖适当的选择器。

Answer 2

另一种可能的解决方案是增加字体大小 - 请参阅类

.ui-jqgrid .ui-jqgrid-view

并增加您想要的字体大小。

由于您使用 Guriddo jqGrid 5.2.1，您可以在 our public forum

中获得快速和专业的响应

Answer 3

免费的 jqGrid 支持基于矢量的 Font Awesome 图标来替代 jQuery UI 的光栅图标。要使用 Font Awesome，您只需包含 Font Awesome 的 CSS 并添加 iconSet: "fontAwesome" 选项。例如，https://jsfiddle.net/OlegKi/9f9exg91/1/使用下面的简单代码

$("#grid1").jqGrid({
    colModel: [...],
    iconSet: "fontAwesome",
    ...
});

其中显示

例如，如果您想将导航器图标的大小增加到标准大小的 1.5 倍，您只需添加 CSS 规则

.navtable .ui-pg-button {
    font-size: 150%;
}

并获取导航器按钮

参见 https://jsfiddle.net/OlegKi/9f9exg91/2/。您可以看到导航器按钮自动换行。请参阅维基文章。

如果你想增加寻呼机所有按钮的大小，那么你可以使用CSS规则

.ui-pg-table .ui-pg-button {
    font-size: 150%;
}

备选方案。请参阅 https://jsfiddle.net/OlegKi/9f9exg91/3/，其中显示

免费的 jqGrid 还支持 iconsOverText: true 选项，它允许获得以下图标外观：

见https://jsfiddle.net/OlegKi/9f9exg91/4/

一般来说，您可以根据需要轻松自定义按钮。例如，您可以转到某些按钮生成器页面，如 this one create custom button and to copy the CSS styles to .ui-jqgrid .navtable .ui-pg-button. I did this and created the next demo https://jsfiddle.net/OlegKi/9f9exg91/6/，它显示以下导航栏：

您可以在下面找到上一个演示中使用的 CSS 规则：

.ui-jqgrid .navtable .ui-pg-button:not(.ui-state-hover) {
    background: #3498db;
    background-image: -webkit-linear-gradient(top, #3498db, #2980b9);
    background-image: -moz-linear-gradient(top, #3498db, #2980b9);
    background-image: -ms-linear-gradient(top, #3498db, #2980b9);
    background-image: -o-linear-gradient(top, #3498db, #2980b9);
    background-image: linear-gradient(to bottom, #3498db, #2980b9);
    -webkit-border-radius: 8;
    -moz-border-radius: 8;
    border-radius: 8px;
    -webkit-box-shadow: 3px 3px 7px #666666;
    -moz-box-shadow: 3px 3px 7px #666666;
    box-shadow: 3px 3px 7px #666666;
    color: #ffffff;
    font-size: 14px;
    padding: 6px 6px 6px 6px;
    border: solid #0089de 1px;
    text-decoration: none;
}
.ui-jqgrid .navtable .ui-pg-button.ui-state-hover,
.ui-jqgrid .navtable .ui-pg-button:hover{
    background: #3cb0fd;
    background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db);
    background-image: -moz-linear-gradient(top, #3cb0fd, #3498db);
    background-image: -ms-linear-gradient(top, #3cb0fd, #3498db);
    background-image: -o-linear-gradient(top, #3cb0fd, #3498db);
    background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
    padding: 6px 6px 6px 6px;
    font-size: 14px;
    text-decoration: none;
}

我在上一个演示中使用了额外的 pagerRightWidth: 100 选项来修复寻呼机的右侧部分并为导航器图标提供更多位置。

更新： 可以通过使用 toppager: true 而不是 pager: true 或同时使用两个寻呼机来使用顶级寻呼机。如果将上述 CSS 规则中的 .navtable 替换为 .ui-pg-table，则该样式将应用于寻呼机的所有按钮：https://jsfiddle.net/OlegKi/9f9exg91/9/

如何增加jqgrid中图标的大小？

How to increase the size of icons in jqgrid?

html

jqgrid