GetColumn Information and Width on Resize - Slick Grid

Question

Я работаю над slick grid, где я пытаюсь получить информацию о столбце, такую ​​как 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 сбрасывает значения предыдущихWidth для всех столбцов всякий раз, когда начальный размер столбца изменяется.

Вы можете посмотреть пример такого подхода в 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.