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

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 {/*与其他按钮主题相匹配的样式 */>

这将为您的按钮设置样式。根据按钮的宽度/高度，您还可以深入研究网格的 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>

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