JQGrid搜索对话框：选择下拉列后如何维持文本输入框宽度

我之前也碰到过一模一样的情况，只靠beforeShowSearch和afterRedraw确实没法覆盖切换搜索列的场景。要搞定这个问题，我们需要监听搜索列下拉框的变化事件，每次切换列后重新调整输入框的宽度。

具体实现步骤： #

1. 写一个通用的宽度调整函数
   先封装一个可复用的函数，统一处理输入框宽度设置，这样多个场景都能直接调用：

   function adjustSearchInputWidth() {
       // 定位搜索对话框里的文本输入框，设置你需要的宽度值
       $('.ui-jqgrid-search-table input[type="text"]').css('width', '220px');
       // 如果需要同步调整下拉选择框的宽度，可添加这一行
       // $('.ui-jqgrid-search-table select').css('width', '180px');
   }
   

2. 在原有事件中调用函数，并添加下拉框监听
   保留你之前在beforeShowSearch和afterRedraw里的逻辑，同时给搜索列下拉框绑定change事件，处理切换列的情况：

   $("#yourGridId").jqGrid({
       // 你的其他网格配置项...
       searchOptions: {
           beforeShowSearch: function($form) {
               // 初始打开搜索框时调整宽度
               adjustSearchInputWidth();
               // 监听搜索列下拉框的切换事件
               $form.find('select.ui-jqgrid-search-select').on('change', function() {
                   // 加个短暂延迟，确保jqGrid完成新输入框的渲染
                   setTimeout(adjustSearchInputWidth, 80);
               });
           },
           afterRedraw: function() {
               // 重置搜索条件后重新调整宽度
               adjustSearchInputWidth();
           }
       }
   });
   

为什么要加setTimeout？ #

当切换搜索列时，jqGrid会先移除旧的输入控件，再根据新列的类型渲染新控件。直接在change事件里调用调整函数，可能会因为新控件还没渲染完成而失效，加个几十毫秒的延迟就能确保新输入框已经存在，再去调整它的宽度。

小提示： #

• 如果select.ui-jqgrid-search-select找不到元素，可以打开浏览器开发者工具查看搜索列下拉框的class，调整选择器适配你的jqGrid版本。
• 你可以根据实际需求修改宽度数值，或者扩展函数处理其他类型的控件，比如日期选择框、文本域等。

内容的提问来源于stack exchange，提问作者MichaelLoftus