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

时间:2013-01-05 19:40:07

标签: html css jquery-ui button jqgrid

jqgrid with jquery ui使用Redmond主题。

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

   $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工具栏按钮操作?

1 个答案:

答案 0 :(得分:0)

只需使用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>

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