通过拖动底部边框更改 table 高度（调整大小）

Question

需要做什么才能设置 tabulator.js table 以便通过拖动底部边框来调整 table 的大小？结果应该类似于下面链接的视频中显示的内容。

https://i.imgur.com/0G2RNTJ.mp4

Answer 1

Tabulator 将响应包含它的元素的大小调整，因此如果您使包含的元素可调整大小，您的 table 将在调整大小时自动重新绘制。

本文将带您了解如何自行构建可调整大小的 div： https://medium.com/the-z/making-a-resizable-div-in-js-is-not-easy-as-you-think-bda19a1bc53d

或者，如果您正在寻找快速解决方案，我建议您使用现有的众多可调整大小的 JavaScript 库之一，这将使该过程变得更加容易。

Answer 2

Bellow 是一个基于和使用 table.setHeight() 调用的想法的工作示例代码。

<div class="container page-section">

<div class="resizable">
  <div class="resizers">
    <div id="example-table"></div>
      <div class="resizer-line bottom-line"></div>
    </div>
  </div>
        
  <h3>Text below</h3>
        
</div>

body {
    font-family: "Segoe UI","Helvetica Neue",Arial,"Noto Sans",sans-serif;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    text-align: left;
}

.container {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
    max-width: 740px;
}

.page-section {
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
}

.resizable {
  position: relative;
  background: white;
}

.resizable .resizers {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}

.resizable .resizers .resizer-line {
  position: relative;
}

.resizable .resizers .resizer-line.bottom-line {
  height: 3px;
  border-top: 1px solid #51899C;
  cursor: ns-resize;
}

.resizable .resizers .resizer-line.bottom-line:hover {
  border-top: 1px solid #83bbce;
}

var tableData = [
    {id:1, name:"Billy Bob", age:"12", gender:"male", height:1, col:"red", dob:"", cheese:1},
    {id:2, name:"Mary May", age:"1", gender:"female", height:2, col:"blue", dob:"14/05/1982", cheese:true},
    {id:3, name:"Christine Lobowski", age:"42", height:0, col:"green", dob:"22/05/1982", cheese:"true"},
    {id:4, name:"Brendon Philips", age:"125", gender:"male", height:1, col:"orange", dob:"01/08/1980"},
    {id:5, name:"Margret Marmajuke", age:"16", gender:"female", height:5, col:"yellow", dob:"31/01/1999"},
    {id:6, name:"Billy Bob", age:"12", gender:"male", height:1, col:"red", dob:"", cheese:1},
    {id:7, name:"Mary May", age:"1", gender:"female", height:2, col:"blue", dob:"14/05/1982", cheese:true},
    {id:8, name:"Christine Lobowski", age:"42", height:0, col:"green", dob:"22/05/1982", cheese:"true"},
    {id:9, name:"Brendon Philips", age:"125", gender:"male", height:1, col:"orange", dob:"01/08/1980"},
    {id:10, name:"Margret Marmajuke", age:"16", gender:"female", height:5, col:"yellow", dob:"31/01/1999"},
    {id:11, name:"Billy Bob", age:"12", gender:"male", height:1, col:"red", dob:"", cheese:1},
    {id:12, name:"Mary May", age:"1", gender:"female", height:2, col:"blue", dob:"14/05/1982", cheese:true},
    {id:13, name:"Christine Lobowski", age:"42", height:0, col:"green", dob:"22/05/1982", cheese:"true"},
    {id:14, name:"Brendon Philips", age:"125", gender:"male", height:1, col:"orange", dob:"01/08/1980"},
    {id:15, name:"Margret Marmajuke", age:"16", gender:"female", height:5, col:"yellow", dob:"31/01/1999"},
]
var table = new Tabulator("#example-table", {
    data:tableData,           //set initial table data
    height:300,
    layout:"fitColumns",      //fit columns to width of table
    responsiveLayout:"hide",  //hide columns that dont fit on the table
    tooltips:true,            //show tool tips on cells
    addRowPos:"top",          //when adding a new row, add it to the top of the table
    history:true,             //allow undo and redo actions on the table
    movableColumns:true,      //allow column order to be changed
    initialSort:[             //set the initial sort order of the data
        {column:"name", dir:"asc"},
    ],
    columns:[
        {title:"Name", field:"name"},
        {title:"Age", field:"age"},
        {title:"Gender", field:"gender"},
        {title:"Height", field:"height"},
        {title:"Favourite Color", field:"col"},
        {title:"Date Of Birth", field:"dob"},
        {title:"Cheese Preference", field:"cheese"},
    ],
});

function makeResizableDiv(div) {
  const element = document.querySelector(div);
  const resizers = element.querySelectorAll('.resizer-line')
  const minimum_size = 90;
  let original_width = 0;
  let original_height = 0;
  let original_x = 0;
  let original_y = 0;
  let original_mouse_x = 0;
  let original_mouse_y = 0;
  for (let i = 0; i < resizers.length; i++) {
    const currentResizer = resizers[i];
    currentResizer.addEventListener('mousedown', function(e) {
      e.preventDefault()
      original_width = parseFloat(getComputedStyle(element, null).getPropertyValue('width').replace('px', ''));
      original_height = parseFloat(getComputedStyle(element, null).getPropertyValue('height').replace('px', ''));
      original_x = element.getBoundingClientRect().left;
      original_y = element.getBoundingClientRect().top;
      original_mouse_x = e.pageX;
      original_mouse_y = e.pageY;
      window.addEventListener('mousemove', resize)
      window.addEventListener('mouseup', stopResize)
    })
    
    function resize(e) {
      if (currentResizer.classList.contains('bottom-line')) {
        const height = original_height + (e.pageY - original_mouse_y);
        if (height > minimum_size) {
          table.setHeight(height - 23);
          element.style.height = height + 'px';
        }
      }
    }
    
    function stopResize() {
      window.removeEventListener('mousemove', resize)
    }
  }
}

makeResizableDiv('.resizable');

通过拖动底部边框更改 table 高度（调整大小）

Change table height (resize) by dragging the bottom border

tabulator