使用colResizable插件需要知道调整了哪个列标题

Question

如何获取重新调整大小的列的索引？调整大小有效但我在e.currentTarget

中找不到索引或其他标题相关信息

var onResized = function (e) {

    console.log('E: ', e);

    // reference to the resized table
    var table = $(e.currentTarget);
    console.log('************** what is table?', table)
    var thisRow = table.find('thead tr');
    console.log('************** what is thisRow?', thisRow)
    var thisHere = thisRow.closest('th').index();
    console.log('************** what is here?', thisHere)
};

bindgrid.find('.grid-header-table').colResizable({
    liveDrag: true,
    onResize: onResized
});

Answer 1

根据colResizable Events中报告的说明，您可以获取有关生成resize事件的夹点（用于调整大小的列分隔符）的信息。

如果表中包含3个cols，则可以获得值：0或1.这意味着您只能知道您是在执行/调整前两个cols还是后两个cols。

这样的价值是：

$(e.target).parent().index()

在下面的代码段中：

＆＃13;

＆＃13;

$(function () {
  $("#sample").colResizable({
    liveDrag: true,
    onResize: function (e) {
      var table = $(e.currentTarget); //reference to the resized table
      alert('Table grip index: ' + $(e.target).parent().index());
    }
  });
});

＆＃13;

body {
  background-color: white;
  text-align: center;
  padding: 55px;
}

.center {
  text-align: left;
}

#table {
  width: 100%;
  max-width: 1600px;
}

th {
  border-top: 1px solid #2e638e;
  border-left: 1px solid #2e638e;
  border-bottom: 1px solid #2e638e;
  border-right: 1px solid #2e638e;
  height: 30px;
  color: white;
  text-shadow: #012b4d 2px 2px 2px;
  text-align: center;
}

td {
  text-indent: 5px;
  color: #444;
  border-bottom: 1px solid #bbb;
  border-left: 1px solid #bbb;
}

td.left {
  border-left: 1px solid #2e638e;
}

td.right {
  border-right: 1px solid #2e638e;
}

td.bottom {
  border-bottom: 1px solid #2e638e;
}

label {
  color: #0361ae;
}

＆＃13;

<script src="https://code.jquery.com/jquery-1.12.1.min.js"></script>
<script src="http://www.bacubacu.com/colresizable/js/colResizable-1.5.min.js"></script>


<div class="center">
    <br/><br/>
    <table id="sample" width="100%" border="0" cellpadding="0" cellspacing="0">
        <tr>
            <th>header</th>
            <th>header</th>
            <th>header</th>
        </tr>
        <tr>
            <td class="left">cell</td>
            <td>cell</td>
            <td class="right">cell</td>
        </tr>
        <tr>
            <td class="left">cell</td>
            <td>cell</td>
            <td class="right">cell</td>
        </tr>
        <tr>
            <td class="left bottom">cell</td>
            <td class="bottom">cell</td>
            <td class="bottom right">cell</td>
        </tr>
    </table>
</div>

＆＃13;

＆＃13;

＆＃13;