Bootstrap-table是一个流行的前端表格插件，提供了许多可定制的功能。其中一项非常有用的功能是固定列，使得在浏览大量数据时，用户可以保持表格布局的稳定性并避免出现滚动条。
然而，Bootstrap-table本身并不提供对右部列的固定支持。在这篇文章中，我们将介绍如何通过自定义插件实现右部列的固定。
实现思路
Bootstrap-table是基于jQuery的插件。我们可以通过jQuery的插件机制来扩展它的功能。实现思路是：当表格加载完毕后，我们通过DOM操作将需要固定的列从原表格中移除，并添加到一个新的<table>元素中，并和原表格一起放入一个容器中，然后通过CSS样式控制两个表格的位置和滚动条的同步。
具体实现
HTML结构
我们需要在HTML中添加一个新的容器元素，用于包含原表格和固定列的新表格。代码示例如下：
<div class="table-container"> <table id="original-table"></table> <table id="fixed-table"></table> </div>
插件代码
我们可以将插件封装成一个jQuery插件，以方便在Bootstrap-table中调用。代码示例如下：
-- -------------------- ---- -------
------------- -
---- --------
-------------------------------------- -
------------------ ------ -- -----------
----------------- -- -- -------
---
----------------------------------------------------
-------------------- - ---------- -
--- ------ - -----
--- ------- - ------------------------------------
-- --------------------------- -
--- -------------- - -------------------
--- ----------- - -------------------------------------------
--- ------------ - ---
-- -----------------
------------------ -- ---------------------- - ------------------------ - ---------------------
--- ----- - ----------------
--- ------------ - ----------------------- -------------- - ------ - -- - -----------------
---------------------------------------------
--------------------------------------
---
-----------------------------------
-- ---------
---------------------------
-- -----
---------------------------------- ---------- -
--- --------- - --------------------
---------------------- -----------
---
-- -------
-----------------
----------- -----------
-------- --
------------------ -----------
------------- ---------------- - -----
---------- --
---
------------
--------------- ------------------- - -----
---
-- -----
-------------------------------- ------- -
----------------------------------------------------------- - ----- - --------------
---
-
--
-----------调用方法
在使用Bootstrap-table时，我们只需要调用插件即可。例如：
$('#table').bootstrapTable({
fixedRightColumns: true, // 启用右部列固定功能
fixedRightNumber: 2, // 需要固定的列数
});
$('#table').fixRightColumns(); // 固定右部列示例代码
下面是一个完整的示例代码：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Bootstrap Table 右部列固定插件</title > 来源：[JavaScript中文网](https://www.javascriptcn.com/post/33389) ，转载请注明来源 [https://www.javascriptcn.com/post/33389](https://www.javascriptcn.com/post/33389)