Bootstrap Table 中设置列宽和可拖动列宽

在 Bootstrap Table 中设置列宽和可拖动列宽需要使用额外的插件或自定义代码。以下是两种常用的方法：
方法一：使用插件
Bootstrap Table 社区提供了许多插件，可以用来扩展表格的功能，包括列宽的自定义和拖动调整。其中比较受欢迎的是 ‘tableResize’ 插件。使用该插件，您可以轻松地设置列宽和拖动调整列宽。

1. 安装插件：使用 npm 或 yarn 安装 ‘tableResize’ 插件。

   npm install bootstrap-table-resizer

2. 引入插件：在您的 HTML 文件中引入 ‘tableResize’ 插件的 CSS 和 JS 文件。

   <link rel="stylesheet" href="path/to/bootstrap-table-resizer.css">
   <script src="path/to/bootstrap-table-resizer.js"></script>

3. 使用插件：在初始化 Bootstrap Table 时，启用 ‘resizable’ 属性即可。

   $(function () {
   var table = $('#myTable').bootstrapTable({resizable: true});
   });

   方法二：自定义代码
   如果您不想使用插件，可以通过自定义代码来实现列宽的自定义和拖动调整。以下是一个简单的示例：
4. 添加样式：在您的 CSS 文件中添加以下样式，用于设置表格的边框和拖动手柄样式。

   table {border: 1px solid #ddd; width: 100%;}
   table th, table td {padding: 8px; border: 1px solid #ddd;}
   table .resize-handle {background-color: #fff; cursor: col-resize; height: 100%; width: 6px; position: absolute; z-index: 100; right: -3px; top: 0;}

5. 添加拖动功能：在您的 JavaScript 文件中添加以下代码，用于添加拖动功能。
   ```javascript
   $(function () {
   var isResizing = false;
   var table = $(‘#myTable’);
   var handle = table.find(‘.resize-handle’);
   var startCol = null;
   var endCol = null;
   var currentWidth = null;
   var minWidth = 60;
   var maxWidth = $(window).width() - 200;
   var originalTableWidth = table.width();
   var isIE = /@cc_on!@/false || !!document.documentMode;
   var isEdge = !isIE && !!window.StyleMedia;
   var isFirefox = typeof InstallTrigger !== ‘undefined’;
   var isIEMobile = /iemobile/i.test(navigator.userAgent);
   var supportTouch = !isIE && !isEdge && !isFirefox && !isIEMobile;
   handle.mouseenter(function (e) {
   isResizing = true;
   startCol = $(this).parent().index();
   endCol = startCol;
   currentWidth = $(this).parent().width();
   $(document).mousemove(function (e) {
   isResizing && (isResizing = false) && resizeColumn(e);
   });
   e.preventDefault();}).mouseleave(function () {
   isResizing = false;
   document.unbind(‘mousemove’);
   });
   document.bind(‘mouseup’, function () {
   isResizing = false;
   document.unbind(‘mousemove’);
   document.unbind(‘mouseup’);});
   function resizeColumn(e) {
   var diff = e.pageX - handle.position().left;
   diff = Math.min(maxWidth - currentWidth, Math.max(minWidth, diff));
   table.find(‘th:eq(‘ + startCol + ‘)’).css(‘width’, currentWidth + diff);
   table.find(‘td:eq(‘ + startCol + ‘)’).css(‘width’, currentWidth + diff);
   table.find(‘.resize-handle’).css(‘left’, handle.position().left + diff);
   document.