Bootstrap-table通过JS配置columns时列resize功能失效如何解决？

I've run into this exact issue before! The problem happens because when you dynamically pass columns via JavaScript, the Bootstrap Table Resizable extension doesn't properly bind its resize handlers to the newly generated table header elements—since the extension might initialize before the columns are fully rendered.

Here are two reliable solutions to get resizable columns working again:

Solution 1: Enable Resizable Directly in the JS Initialization #

Instead of relying on the data-resizable="true" attribute, include the resizable option directly in your Bootstrap Table initialization config. This ensures the extension initializes in sync with your dynamic columns.

<table id="table" data-url="json/data1.json">
</table>
<script>
  var defaultColumns = [
    {title: 'Id', field: 'id', width: 180},
    {title: 'Name', field: 'name', width: 100},
    {title: 'Price', field: 'price', width: 180}
  ];
  
  $(document).ready(function() {
    $('#table').bootstrapTable({
      columns: defaultColumns,
      resizable: true // Enable resizable here instead of via data attribute
    });
  });
</script>

Solution 2: Manually Initialize Resizable After Header Renders #

If the first method doesn't work (depending on your Bootstrap Table version), you can listen for the post-header.bs.table event—this fires right after the table header is rendered. Then you can manually trigger the resizable extension's setup logic.

<table id="table" data-url="json/data1.json">
</table>
<script>
  var defaultColumns = [
    {title: 'Id', field: 'id', width: 180},
    {title: 'Name', field: 'name', width: 100},
    {title: 'Price', field: 'price', width: 180}
  ];
  
  $(document).ready(function() {
    $('#table').bootstrapTable({
      columns: defaultColumns,
      onPostHeader: function() {
        // Trigger the resizable extension's reset method
        $(this).bootstrapTable('resetResizable');
      }
    });
  });
</script>

If resetResizable isn't available in your version, you can directly initialize the resize handlers on the header cells:

onPostHeader: function() {
  const $table = $(this);
  $table.find('th').resizable({
    handleWidth: 10, // Adjust drag handle width as needed
    stop: function() {
      $table.bootstrapTable('resetView'); // Refresh table after resize
    }
  });
}

Quick Check: #

Double-check that you've properly included the Resizable extension files (bootstrap-table-resizable.js and its associated CSS) in your project—this is a common oversight that breaks the feature entirely.

内容的提问来源于stack exchange，提问作者frank