bootstrap Table实现锁定列不滚动功能

当表格中的数据列比较多，各列的数据宽度大于页面的可用显示宽度时，就会出现横向滚动条，向右滚动时，左侧的数据列会隐藏，有时左侧列数据标识数据，隐藏了不方便数据查看，所以这时可以指定左侧的特定几列不进行滚动。

1. 锁定属性配置

# 在属性初始化中添加下面的属性
var options = {...fixedColumns: true,fixedNumber: 2,fixedRightNumber: 3,...
}$.table.init(options);

其中fixedColumns表示开启锁定列功能，fixedNumber表示需要锁定的列数量，该参数表示从左侧开始的列数。fixedRightNumber表示锁定右侧的列数量。

2. 增加锁定列js文件

<th:block th:include="include :: bootstrap-table-fixed-columns-js" />

对应的js文件是：

<!-- 表格冻结列插件 -->
<div th:fragment="bootstrap-table-fixed-columns-js"><script th:src="@{/ajax/libs/bootstrap-table/extensions/columns/bootstrap-table-fixed-columns.js?v=1.18.3}"></script>
</div>

3. 当表格的列比较多需要滚动时，可以确保左侧前两列不会滚动

滚动以后如下：

可以看到系统模块列在滚动后，隐藏了，右边的操作列显示出来了。

bootstrap Table实现锁定列不滚动功能相关推荐

关于bootstrap table 获取隐藏列
例如数据库的id我们并不想让使用者发现但在删除操作时我们又需要将id发送到后端此时就需要隐藏某一列使用下方属性将该列隐藏 visible: false 之后使用转义符将该行信息获取到 \'' ...
Bootstrap Table列宽拖动的方法
Bootstrap Table可拖动列,需要用到它的Resizable扩展插件需要引入 bootstrap-table扩展插件 bootstrap-table-resizable.js 这个插件还依 ...
bootstraptable 汇总_JS组件系列——表格组件神器：bootstrap table
前言:前面介绍了两篇关于bootstrap table的基础用法,这章我们继续来看看它比较常用的一些功能,来个终结篇吧,毛爷爷告诉我们做事要有始有终~~bootstrap table这东西要想所有功能 ...
JS组件系列——Bootstrap Table 冻结列功能IE浏览器兼容性问题解决方案
JS组件系列--Bootstrap Table 冻结列功能IE浏览器兼容性问题解决方案参考文章: (1)JS组件系列--Bootstrap Table 冻结列功能IE浏览器兼容性问题解决方案 (2) ...
[转]bootstrap table 动态列数
原文地址:https://my.oschina.net/u/2356355/blog/1595563 据说bootstrap table非常好用,从入门教程中了解到它的以下主要功能: 由于固定表头意味 ...
Bootstrap Table固定列及IE11兼容性问题解决
最近项目的前端用的是bootstrap,用Bootstrap Table做的表格显示.有一部分表格比较特殊,需要实现固定前面几列,后面的拖动.给的原型是用的superTable实现的,整合进项目用Bo ...
html表格右键可编辑,Bootstrap table右键功能实现方法
最近遇到有一个需求,需要在Bootstrap table上使用右键.网上搜了半天没有找到,最后发现Bootstrap table不支持右键(官方文档给出的答案 https://github.com/w ...
bootstrap table 搜索列formatter之后，单字节搜索异常
bootstrap table 搜索列formatter之后,单字节搜索异常最近发现搜索这边出现这个问题,这样搜索没有效果后面发现是因为搜索列formatter之后就会出现这个问题,那么我们就多生 ...
bootstrap table 列拖动变宽
需要导入 colResizable-1.6.min.js /**_ _____ _ _ _ | | __ \ (_) | | | | ___ ___ | | |__) |___ ___ _ _____ ...

bootstrap Table实现锁定列不滚动功能

1. 锁定属性配置

2. 增加锁定列js文件

3. 当表格的列比较多需要滚动时，可以确保左侧前两列不会滚动

bootstrap Table实现锁定列不滚动功能相关推荐

最新文章

热门文章