GetColumn Information and Width on Resize - Slick Grid

Question

我正在处理光滑的网格，试图获取列信息，例如 id、名称和调整大小后列的新宽度。

我写了一个在用户调整列大小时触发的事件。

grid.onColumnsResized.subscribe(function (e, args) {
           //To Do
        }); 

grid.getColumns() 会有所帮助，但我如何确定哪个列用户已调整大小。有没有办法获得调整后列的列索引？

这里的一些启动代码会节省我很多时间

谢谢

Answer 1

SlickGrid 触发的onColumnsResized 事件不包含对已更改列的任何引用。

请务必注意，触发此事件时，多列的宽度可能会发生变化。例如：

• 使用网格选项forceFitColumns: true 强制列适应网格的宽度
• 调整列的大小会影响到左侧的列

实现这一点的两个可能选项是：

更改后检查列

SlickGrid 将之前的列宽存储在每个列上名为previousWidth 的属性中。您可以比较 prevoiusWidth 和 width 的值以确定哪些列发生了变化。

grid.onColumnsResized.subscribe(function (e, args) {
  //Loop through columns
  for(var i = 0, totI = grid.getColumns().length; i < totI; i++){
    var column = grid.getColumns()[i];
    //Check if column width has changed
    if (column.width != column.previousWidth){
      //Found a changed column - there may be multiple so all columns must be checked
      console.log('Changed column index : ' + i);
      console.log(column);    
    }
  }
}); 

每当一列开始调整大小时，SlickGrid 都会重置所有列的 previousWidth 值。

您可以在http://plnkr.co/edit/W42pBa2ktWKGtqNtQzii?p=preview查看此方法的示例。

修改 SlickGrid

如果您托管 SlickGrid 并且愿意维护自己的版本，那么您可以对其进行修改以在 onColumnsResized 事件的 args 中包含列信息。

在第 860 行的 slick.grid.js 中，修改触发事件的代码以包含一个包含更改列索引的数组。如果有用，您还可以包含用户调整大小的列的索引。下面添加了名为changedColumnIndexes 和triggeredByColumnIndex 的属性，它们在触发事件的参数中传递。我已将对此的更改包装在以 //MODIFICATION 为前缀的 cmets 中。

.bind("dragend", function (e, dd) {
  var newWidth;

  //MODIFICATION - Add array to capture changed column indexes and variable to capture 
  //               the index of the column which triggered the change
  var changedColumnIndexes = [];
  var triggeredByColumnIndex = getColumnIndex($(this).parent()[0].id.replace(uid, ""));
  //MODIFICATION END

  $(this).parent().removeClass("slick-header-column-active");
  for (j = 0; j < columnElements.length; j++) {
    c = columns[j];
    newWidth = $(columnElements[j]).outerWidth();

    //MODIFICATION - Add column index to array if changed
    if (c.previousWidth !== newWidth) {
      changedColumnIndexes.push(j);
    }
    //MODIFICATION END

    if (c.previousWidth !== newWidth && c.rerenderOnResize) {
      invalidateAllRows();
    }
  }
  updateCanvasWidth(true);
  render();

  //MODIFICATION - Amend trigger for event to include array and triggeredBy column
  trigger(self.onColumnsResized, {changedColumnIndexes: changedColumnIndexes, triggeredByColumnIndex: triggeredByColumnIndex});
  //MODIFICATION END

});

在您自己的代码中订阅 onColumnsResized 事件并从事件的参数中获取更改的列索引。

grid.onColumnsResized.subscribe(function(e, args) {
  //Triggered by column is passed in args.triggeredByColumnIndex
  console.log('Change triggered by column in index : ' + args.triggeredByColumnIndex);
  console.log(grid.getColumns()[args.triggeredByColumnIndex]);

  //Column array is passed in args.changedColumnIndexes
  console.log('Changed columns are...');
  console.log(args.changedColumnIndexes);

  //Loop through changed columns if necessary
  for (var i = 0, totI = args.changedColumnIndexes.length; i < totI; i++){
    console.log(grid.getColumns()[args.changedColumnIndexes[i]]);
  }
});

您可以在http://plnkr.co/edit/4K6wRtTqSo12SE6WdKFk?p=preview查看此方法的示例。

Answer 2

通过 column.width != column.previousWidth 确定列更改对我不起作用，因为有时原始宽度和新宽度的差异很小（例如 125.001 和 125）。

我使用了 Chris C 的逻辑并在 6pac/SlickGrid 项目上进行了 PR。这是提交： https://github.com/6pac/SlickGrid/commit/ba525c8c50baf18d90c7db9eaa3f972b040e0a6e