如何使 jqgrid 工具栏按钮与标准 jquery ui-buttons 大小相同

Question

使用带有 jquery ui Redmond 主题的 jqgrid。

顶级工具栏包含标准的添加、删除等按钮和创建的自定义按钮

   $grid = $("#grid");
   $grid.jqGrid("navGrid", "#grid_toppager", { 
        search:  true,
        del: true,
        add: true,
        refresh: true, 
        edit: true } );
   $grid.jqGrid('navButtonAdd', '#grid_toppager', {
        caption: '',
        id: "grid_printbutton",
        title: 'Print order',
        buttonicon: 'ui-icon-print'
    });

html:

   <div id="grid1container" style="width: 100%; height: 100%">
        <table id="grid">
        </table>
    </div>

按钮只包含图标，没有标题。 页面还包含带有使用 jquery ui button() 函数创建的普通按钮的工具栏。 jqgrid 按钮的高度和宽度小于使用 jquery ui 按钮功能创建的普通按钮。在典型的屏幕分辨率下，用户很难点击它们。

如何使 jqgrid 顶级工具栏按钮大小与标准 jquery ui 按钮相同？ 按钮的宽度和高度是否可以增加，或者是否可以创建具有相同按钮的其他工具栏并强制它们调用对应的 jqgrid 工具栏按钮操作？

Answer 1

只需使用 CSS 样式，在本例中，

#grid_printbutton { /*Styles to match other button themes */}

这将为您的按钮设置样式。根据按钮的宽度/高度，您还可以深入研究网格的 CSS 样式默认值，以确保网格/分页器区域有足够的空间来显示这些较大的按钮。

对于预建按钮，它们的样式由

<td id="search_GridName" class="ui-pg-button ui-corner-all" title="Find records">
   <div class="ui-pg-div">
      <span class="ui-icon ui-icon-search"></span>
   </div>
</td>

所以要设置样式，您可以应用一些特定的样式。内联按钮你可以找到类似的东西。虽然如果您增加行大小以容纳更大的内联行按钮，您的网格将显示的信息量将会减少。