调整大小时获取列信息和宽度 - 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 事件的参数中包含列信息。

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

的注释中包含了对此的更改

.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

调整大小时获取列信息和宽度 - Slick Grid

GetColumn Information and Width on Resize - Slick Grid

slickgrid