如何使 jqgrid 顶部工具栏自定义按钮像标准按钮一样大

Posted 2023-04-13

【中文标题】如何使 jqgrid 顶部工具栏自定义按钮像标准按钮一样大

【英文标题】：How to make jqgrid top toolbar custom buttons bigger like standard buttons

【发布时间】：2013-03-09 22:55:03

【问题描述】：

基于问题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;

    );

工具栏中的这个自定义按钮（星形图标）出现在错误的位置：太右并与下一个按钮一起：

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

如何制作像标准按钮一样的自定义按钮？

【参考方案1】：

如果您需要使用更大的标准工具栏图标，我建议您在导航工具栏中使用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，但经过一些投资后，您可以获得非常好的最终结果。

【讨论】：

谢谢。从 jqgrid 中删除工具栏、在 html 中创建工具栏并使用单击事件处理程序向 jqgrid 发送命令不是更简单吗？或者最好使用答案中的javascript来修改jqgrid按钮。工具栏用户中有两个切换按钮来切换单击编辑和 jqgrid 行编号。将它们放在工具栏之外还是从工具栏打开的菜单更好？还是使用 Font Awecome 实现切换按钮更好，如何？使用您的答案从工具栏自动生成右键菜单，相同的代码是否适用于 Awesome 工具栏？

@Andrus：抱歉，你问的问题太多了。最多的选择是口味问题。我无法解决你所有的问题。您的主要问题在标题中：“如何使 jqgrid 顶部工具栏自定义按钮像标准按钮一样大”。我认为通过使用 Font Awesome 等可扩展图标，您可以归档最佳结果。

谢谢。在***中使用纯文本按钮横向样式是否合理？如何创建仅包含文本的更大按钮？

@Andrus：不客气！你所有的问题都与你原来的问题相去甚远。带有大文本的“纯文本”按钮的解决方案可能与带有图标的解决方案完全不同。您在问题中发布了带有图标的导航栏。什么是“合理的”取决于一个人的要求。所以人们无法回答“这是否合理......？”，“它更好......？”的问题

谢谢。我试图更改答案中发布的样式。在这种情况下，按钮出现在正确的位置，但在鼠标悬停时按钮会移动几个像素。工具栏看起来很难看，我放弃了这种方法。我不知道如何使用很棒的字体来实现切换按钮。应该将 .button() 调用替换为 span 元素以使用字体创建切换按钮。