可调整大小的数据表列 [jquery]

Posted 2023-05-08

【中文标题】可调整大小的数据表列 [jquery]

【英文标题】：columns of datatables resizable [jquery]

【发布时间】：2021-12-22 16:53:45

【问题描述】：

我想手动调整表格列的大小。

在 Stack Overflow 上搜索并尝试过

How to make columns of datatables.js resizable with jQuery UI & jQuery UI Resize with table and colspans

还有google例子，官方文档。

https://github.com/dobtco/jquery-resizable-columns & http://jsfiddle.net/Twisty/ah67jopf/3/

我的示例代码

<table id="examTbl" class="table table-bordered table-hover table-sm dataTable dtr-inline" data-resizable="true">
<thead>
    <tr>
       <th><input type="checkbox" id="chkbox"></th>
       <th>1</th>
       <th>2</th>
    </tr>
</thead>
</table>

<style>
table, td, th 
    /*table-layout:fixed;*/
    overflow:hidden;
    white-space: nowrap;
    text-overflow: ellipsis;

</style>

数据表设置

var table_option = 
   processing: true,
   serverSide: true,
   searching: false,
   responsive: true,
   dom: "lfBtip",
   ajax: 
      url: '/get/textVal'
   ,
   columns: [
      data: 'null',
      defaultContent: "<input type='checkbox' class='chkbox'>",
   ,
    data: 'test1' ,
    data: 'test2' ,
   ],
   autoWidth: false,
   drawCallback: function(settings) 
                
   $('table th').resizable(
     handles: 'e',
     minWidth: 18,
     stop: function(e, ui) 
     $(this).width(ui.size.width);
    
  );
 

【问题讨论】：

控制台没有错误。

【参考方案1】：

我认为您可以在样式中添加“resize”css 属性。

<table id="examTbl" class="table table-bordered table-hover table-sm dataTable dtr-inline" data-resizable="true">
<thead>
    <tr>
       <th><input type="checkbox" id="chkbox"></th>
       <th>1</th>
       <th>2</th>
    </tr>
</thead>
</table>

<style>
table, td, th 
    /*table-layout:fixed;*/
    overflow:hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    resize:horizontal;

【讨论】：

感谢您的回复。如果我按照你说的那样做，只有表格顶部的行移动，包含下面数据的行是相同的。如何解决？

您是否希望“调整大小”功能出现在表格的标题中，而不是出现在内容中？

是的，我想做的表格就像这个例子。 examples.bootstrap-table.com/#extensions/resizable.html（只能调整上排，调整下排也调整下排）

【参考方案2】：

编辑： 尝试在您的数据表设置中添加“autoWidth:false”：

var table_option = 
   processing: true,
   serverSide: true,
   searching: false,
   autoWidth: false,
   responsive: true,
   dom: "lfBtip",
   ajax: 
      url: '/get/textVal'
   ,
   columns: [
      data: 'null',
      defaultContent: "<input type='checkbox' class='chkbox'>",
   ,
    data: 'test1' ,
    data: 'test2' ,
   ],
   autoWidth: false,
   drawCallback: function(settings) 
                
   $('table th').resizable(
     handles: 'e',
     minWidth: 18,
     stop: function(e, ui) 
     $(this).width(ui.size.width);
    
  );
 

在这个小提琴中解决了：http://jsfiddle.net/Twisty/ah67jopf/3/