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

免费的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创建自定义按钮，并将CSS样式复制到.ui-jqgrid .navtable .ui-pg-button。我这样做并创建了下一个演示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/

Answer 2

您的查询缺少一些有效信息，但您可以随时使用适当选择器缩放CSS。

Answer 3

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

.ui-jqgrid .ui-jqgrid-view

并增加所需的字体大小。

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

中获得快速而专业的回复

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

3 个答案: