如何调整 jqgrid 搜索框的大小？答案

【问题标题】：How to resize jqgrid search box?如何调整 jqgrid 搜索框的大小？
【发布时间】：2013-12-09 12:35:56
【问题描述】：

在我的 jqgrid 中，搜索框很小，文本框很小。我想增加搜索框（搜索窗口）的大小。我尝试使用

searchoptions: {size: 30}

但是我不知道把这段代码sn-p放在哪里。谁能看到我的示例如何使用此方法或任何其他方法增加搜索框的大小。

【问题讨论】：

阅读：trirand.com/jqgridwiki/doku.php?id=wiki:options
@bodi0 我在这里看不到任何带有搜索选项或搜索框大小的东西..你能否展示一些代码示例来说明如何做到这一点..

标签： javascript jquery jqgrid

【解决方案1】：

我就是这样做的，而且效果很好。

jQuery("#grid").jqGrid('navGrid','#gridPager',{add:false,edit:false,del:false,refresh: false},{},{},{},
              { 
                beforeShowSearch: function($form) {
                    $('#searchmodfbox_grid').width(760);
                    return true;
              }
              }
        );

在这个搜索对话框的 div id 是 { "searchmodfbox_" + yourGridId } 。在我的情况下，我的网格 ID 是网格，然后搜索对话框的 ID 是“searchmodfbox_grid”。

【讨论】：

这是 jqgrid 4.4

【解决方案2】：

您可以使用 beforeShowSearch（！！！不是 beforeshowsearch）在搜索对话框中进行更改。有关代码示例，请参见此处（如果您使用最新版本的 jqGrid，则可以使用 this.id 而不是 grid[0].id）。我建议您另外使用 recreateFilter: true 搜索选项。

顺便说一下，将“搜索”按钮添加到导航栏的 navGrid 在每次调用创建网格的 searchGrid 方法时使用 prmSearch 参数的 width 属性。因此，如果您按住 prmSearch 并仅更改宽度，则下一个搜索对话框将使用新的宽度值：

var pSearch = {
        recreateFilter: true,
        multipleSearch:true,
        width: 500
    };

$("#list").jqGrid({...}); // create the grid

$("#list").jqGrid("navGrid", "#pager", {}, {}, {}, {}, pSearch);
// if the user opens searching dialog now the width 500 will be used

...
pSearch.width = 800;
// if the user opens searching dialog now the new width 800 will be used

【讨论】：