如何使jqgrid顶部工具栏自定义按钮像标准按钮一样大 [英] How to make jqgrid top toolbar custom buttons bigger like standard buttons

问题描述

基于问题的样式 jqGrid-如何制作分页按钮更大吗?用于使jqgrid顶级工具栏按钮更大:

Style based on question jqGrid - How can I make the paging buttons bigger? is used to make jqgrid top level toolbar buttons bigger:

.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答案的自定义可检查按钮，定义如下:

jqgrid toolbar contains also custom checkable buttons based on Oleg answer defined like:

 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;

    });

工具栏中的此自定义按钮(星形图标)显示在错误的位置:太右，并与下一个按钮一起显示:

this custom button (star icon) in toolbar appears in wrong position: too right and together with next button:

宽度也小于标准按钮，并且顶部对齐太大:

Also width is smaller than standard button and top alignment is too big:

如何使自定义按钮像标准按钮一样?

How to make custom button like standard button ?

推荐答案

如果您需要使用标准尺寸更大的工具栏图标，我建议您使用答案中进行了描述.

If you need to use toolbar icons which are larger as standard I would recommend you to use Font Awesome icons in the navigator toolbar instead of standard jQuery UI icons. I described in the answer.

例如，如果我在旧演示中仅设置了以下CSS

For example if I set just the following CSS in the old demo

.ui-jqgrid .ui-jqgrid-toppager { height:30px !important;}
.ui-jqgrid .ui-jqgrid-toppager .ui-pg-div>span { margin: 0 5px; font-size: 20px; }

我可以在顶部工具栏中使用20px图标. 该演示将显示以下结果

I can use 20px icons in the top toolbar. The demo will shows the following results

因为来自 Font Awesome 的所有图标都被实现，就像矢量字体获得了完美的效果一样适用于任何字体大小(图标大小).有理由将所有其他自定义解决方案(如可检查的按钮)发布到Font Awesome，但是经过一些投资，您可以获得很好的最终结果.

Because all icons from Font Awesome are implemented just as vector fonts one get perfect results for any font size (icon size). One need of cause to post all other custom solution (like checkable buttons) to Font Awesome, but after some investments you could get very good final results.

这篇关于如何使jqgrid顶部工具栏自定义按钮像标准按钮一样大的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！