基于问题
jqGrid – How can I make the paging buttons bigger?的样式用于使jqgrid顶级工具栏按钮更大：
.ui-jqgrid .ui-jqgrid-toppager { height:35px !important; }
.ui-jqgrid .ui-pg-button { height:30px !important; width:30px !important;}
.ui-jqgrid .ui-jqgrid-toppager .ui-icon { position:relative; margin: 0px 10px;}
.ui-jqgrid .ui-jqgrid-toppager .ui-pg-div span.ui-icon {
margin: 0 10px !important;
}
/* some settings to place Button in jqGrid */
.ui-jqgrid .ui-pg-table .my-nav-checkBox
{
margin: 0px;
padding: 0px;
float: left;
height: 18px;
}
.ui-jqgrid .ui-pg-table .my-nav-checkBox > input
{
padding: 1px;
}
.ui-jqgrid .ui-pg-table .my-nav-checkBox > label
{
margin: 0px;
border-width: 0px;
}
.ui-jqgrid .ui-pg-table .my-nav-checkBox:hover > label
{
margin: 0px;
border-width: 1px;
}
/* fixing CSS of jQuery UI Buttons */
.ui-jqgrid .ui-pg-table .my-nav-checkBox > .ui-button > span.ui-button-text
{
margin: 0px;
padding: 1px 2px 1px 16px;
}
.ui-button-icon-only
{
width: 16px;
}
.ui-jqgrid .ui-pg-table .my-nav-checkBox > .ui-button > span.ui-button-icon-primary
{
margin: -8px 0px 0px -8px;
}
jqgrid工具栏还包含基于Oleg答案定义的自定义可检查按钮,如：
var autoedit = false;
$("#grid_toppager_left table.navtable tbody tr").append(
'<td class="ui-pg-button ui-corner-all">' +
'<div class="ui-pg-div my-nav-checkBox">' +
'<input tabindex="-1" type="checkBox" id="AutoEdit" ' + (autoedit ? 'checked ' : '')+'/>' +
'<label title="Press to toggle"' +
' for="AutoEdit">Press to toggle</label></div></td>'
);
$("#AutoEdit").button({
text: false,icons: {primary: "ui-icon-star"}
}).click(function () {
autoedit = !autoedit;
});
工具栏中的此自定义按钮(星形图标)显示在错误的位置：太右,与下一个按钮一起：
宽度也小于标准按钮,顶部对齐太大：
如何制作标准按钮等自定义按钮？
解决方法
如果您需要使用更大的标准工具栏图标,我建议您在导航器工具栏中使用
Font Awesome icons而不是标准的jQuery UI图标.我在
the answer中描述过.
例如,如果我在旧的演示中只设置了以下CSS
.ui-jqgrid .ui-jqgrid-toppager { height:30px !important;}
.ui-jqgrid .ui-jqgrid-toppager .ui-pg-div>span { margin: 0 5px; font-size: 20px; }
我可以在顶部工具栏中使用20px图标. The demo将显示以下结果
因为Font Awesome中的所有图标都是像矢量字体一样实现的,所以任何字体大小(图标大小)都能得到完美的结果.需要将所有其他自定义解决方案(如可检查按钮)发布到Font Awesome,但经过一些投资后,您可以获得非常好的最终结果.
