Question

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

我写了一个事件，当用户调整列的大小时会触发该事件。

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事件的参数中包含列信息。

在第860行的slick.grid.js中，修改触发事件的代码，以包含一个包含已更改列索引的数组。如果有用，您还可以包含用户调整大小的列的索引。下面添加了名为changedColumnIndexes和triggeredByColumnIndex的属性，这些属性在触发事件的args中传递。我已将这些更改包含在带有//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事件并从事件的args中提取已更改的列索引。

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

调整大小时的GetColumn信息和宽度 - 滑动网格

2 个答案: