Bootstrap Table高度百分比适配示例

"Bootstrap Table是基于Bootstrap框架的一个前端组件，用于创建功能丰富的表格。这个实例代码着重于修改BootstrapTable.prototype.resetView方法，使其能够接受高度值以百分比形式定义，从而适应不同高度的屏幕，提供了更好的响应式布局能力。" 在Bootstrap Table中，`resetView`方法通常用于调整表格视图，比如在窗口大小改变时更新表格的样式和布局。在原始的Bootstrap Table库中，`resetView`可能只支持固定的高度值，而不支持百分比高度，这限制了其在响应式设计中的应用。通过修改这个方法，我们可以增加对百分比高度的支持。 首先，我们检查`params`参数是否包含`height`属性，如果存在，则将`options.height`设置为`params.height`的值。这允许外部传入自定义的高度设置。 然后，我们处理百分比高度的情况。如果`options.height`是一个包含百分比符号（%）的字符串，我们解析这个百分比值，并将其转换为相对于窗口高度的实际像素值。这里用到了`$(window).height()`来获取当前窗口的高度，并乘以`options.height`中百分比数值除以100的结果，得到新的高度值。 计算出的实际高度需要减去工具栏（`toolbarHeight`）和分页（`paginationHeight`）的外部高度，因为这些元素也是表格的一部分，但不应包括在表格容器的高度中。最后，使用`$tableContainer.css('height', height + 'px')`将这个计算出的高度应用到表格容器上，实现动态高度调整。 如果启用了卡片视图（`cardView`），则会移除相关的CSS，例如取消表格顶部的外边距，减少底部的内边距，并隐藏表格页脚，以适应不同的显示需求。 同时，如果设置了`showHeader`且指定了高度，会显示表头并调用`resetHeader`方法来更新表头布局。`padding`变量用于调整表格内部的间距，确保整体布局的正确性。 这个修改后的`resetView`方法让Bootstrap Table在不同尺寸的屏幕上能更好地适配和展示，特别是在移动设备或具有可变窗口大小的应用场景中，提高了用户体验。