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

Question

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

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

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

grid.getColumns() 将有所帮助,但我如何识别哪个列用户已调整大小.有没有办法可以获得调整大小的列的列索引？

一些启动代码从这里将节省我的大量时间

谢谢

Answer 1

onColumnsResized由SlickGrid触发的事件不包括对已更改的列的任何引用.

请注意,当此事件触发时,多列的宽度可能已更改.这方面的例子是:

• 使用网格选项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事件并从事件的参数中拾取更改的列索引.

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上查看此方法的示例.