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

问题描述

基于问题的样式 ，而不是标准的 jQuery UI 图标.我在 的所有图标都像矢量字体一样得到完美的效果适用于任何字体大小(图标大小).将所有其他自定义解决方案(如可检查按钮)发布到 Font Awesome 是有原因的，但经过一些投资，您可以获得非常好的最终结果.

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 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.

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; }

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

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屋！