free jqGrid列选择器弹窗UI渲染异常求助

我之前也碰到过free jqGrid搭配Bootstrap主题时，columnChooser弹窗出现UI错乱的情况，结合你的代码和场景，给你几个实用的排查和解决方向：

• 调整CSS引入顺序
  Bootstrap的CSS文件一定要在free jqGrid的主题CSS之前引入。因为jqGrid的主题样式需要覆盖Bootstrap的默认全局样式，如果顺序反了，会导致弹窗的布局、按钮、多选框等元素样式冲突，出现错位或显示异常。正确的引入顺序应该是：先加载bootstrap.css，再加载free jqGrid的Bootstrap主题CSS（比如ui.jqgrid-bootstrap.css）。

• 添加自定义CSS修复样式冲突
  Bootstrap的全局样式可能会影响jqGrid弹窗内部元素的布局，你可以添加以下自定义CSS来修正：

  /* 调整弹窗内容内边距，避免元素挤在一起 */
  .ui-jqdialog .ui-jqdialog-content {
    padding: 10px;
  }
  /* 修复弹窗头部的 padding 样式 */
  .ui-jqdialog .ui-widget-header {
    padding: 8px 15px;
  }
  /* 确保多选框容器宽度适配弹窗 */
  .ui-columnchooser .ui-multiselect {
    width: 100% !important;
  }
  

• 配置columnChooser的Bootstrap适配参数
  给columnChooser传递适配Bootstrap的配置参数，指定使用Bootstrap风格的模态框，能有效减少样式冲突：

  $("#sampleGrid").navButtonAdd('#sampleGridPager',{ 
    caption: "", 
    title: "Choose Columns", 
    buttonicon: "fa fa-table", 
    onClickButton: function () { 
      $("#sampleGrid").jqGrid('columnChooser', {
        width: 500, // 设置弹窗宽度
        modal: true,
        dialog_opts: {
          classes: 'ui-dialog-bootstrap' // 使用jqGrid的Bootstrap模态框样式类
        }
      }); 
    } 
  });
  

• 检查版本兼容性
  确认你使用的free jqGrid版本和Bootstrap版本是兼容的。比如Bootstrap 3通常适配free jqGrid 4.x或5.x的稳定版本，版本不匹配很容易出现UI渲染异常，建议使用官方文档推荐的版本组合。

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