帆软报表下拉框高度(JS添加css样式方式)调整

帆软报表下拉框高度(JS添加css样式方式)调整

帆软报表下拉框高度调整解决方案

问题描述

在帆软报表开发中,点击下拉框按钮后,下拉选项列表的高度太小,用户体验不佳。直接使用 $('.fr-combo-list').css("height","400px") 设置高度往往不生效,因为此时下拉选项还没有渲染到DOM中。

解决方案:jQuery动态添加CSS样式(推荐)

通过jQuery动态创建style标签并添加到页面头部,这样可以确保样式在下拉框出现时立即生效:

// 使用jQuery添加样式
function addComboStylesWithJQuery() {if (!$('#combo-height-style').length) {$('<style id="combo-height-style">').text(`.fr-combo-list {height: 400px !important;max-height: 400px !important;overflow-y: auto !important;}`).appendTo('head');}
}

使用方法:

  • 写在在页面加载结束后事件就行

优点:

  • 代码简洁,易于维护
  • 性能优秀,一次设置持久有效
  • 兼容性好,适用于大多数场景
  • 避免了DOM监听的复杂性

其他可选方案

写一个css文件放到服务器上,然后引用这个css文件(理论上应该是最合适的,但是考虑到操作服务器文件有时候不一定方便);其他如轮询监听等方式(搞复杂了)。