Slickgrid: Final авторазмер колонка использовать все оставшееся пространство

Question

Я использую SlickGrid и изо всех сил, чтобы найти элегантное решение следующее:

1. Все столбцы должны иметь определенную начальную ширину при первой визуализации, но быть изменяемыми впоследствии
   
2. в последней колонке должен автоматически заполнить оставшееся пространство столбцов при изменении размера окна
   

Я видел:

Make one column fill remaining space in SlickGrid without messing up explicit width columns
resizing of grid when resizing browser window
How do I autosize the column in SlickGrid?

Но это, кажется, не совсем то, что мне нужно. Если я использую параметр forceFitColumns, то все столбцы будут авторизоваться (если я не поставил на них максимальное значение). Использование resizeCanvas на window.resize работает хорошо - но оно по-прежнему работает, только если forceFitColumns истинно.

Если я установил minWidth=maxWidth - тогда я не могу изменить размер столбца.

Любые предложения?

Answer 1

Я не уверен, что это будет исправить все ваши проблемы, но в моем случае я использовать forceFitColumns, а затем в зависимости, как я хочу, чтобы моя колонка реагировать размера я буду использовать комбинацию minWidth и width, а в некоторых если те, которые никогда не превысят определенной ширины, я тогда использовал бы и maxWidth. Теперь проблема заключается в том, что при установке minWidth то же самое, что и maxWidth, это, конечно же, сделает его неуязвимым, подумайте об этом, вы установили минимум и максимум, SlickGrid уважает его, теперь он может его размер впоследствии. У меня также есть моя сетка, которая занимает 95% ширины моего экрана, поэтому у меня есть небольшое дополнение на стороне, и с ним я использую автоматическое изменение размера с помощью jQuery.

Вот мой код:

// HTML Grid Container 
<div id="myGridContainer" style="width:95%;"> 
    <div class="grid-header" style="width:100%"> 
     <label>ECO: Log/Slickgrid</label> 
     <span style="float:right" class="ui-icon ui-icon-search" title="Toggle search panel" onclick="toggleFilterRow1()"></span> 
    </div> 
    <div id="myGrid" style="width:100%;height:600px;"></div> 
    <div id="myPager"></div> 
</div> 

// My SlickGrid Options 
var options = { 
    enableCellNavigation: true, 
    forceFitColumns: true 
}; 

// The browser auto-resize 
$(window).resize(function() { 
    $("#myGrid").width($("myGridContainer").width()); 
    $(".slick-viewport").width($("#myGrid").width()); 
    grid.resizeCanvas(); 
}); 

EDIT
Я также был раздражен тем, что, используя все это вместе блокирует вас от изменения размера ширины колонки. Я пришел к другому решению, намного позже, что делает поля расширяться (приобретать ширину) и не блокирует вас после изменения размера. Таким образом, это новое решение, я считаю, дает вам именно то, что вы ищете ... Прежде всего удалите свойство maxWidth и используйте только minWidth и width, на самом деле вы, вероятно, могли бы использовать только width, если хотите. Теперь я должен был, к сожалению, изменить 1 из основного файла slick.grid.js со следующим кодом:

//-- slick.grid.js --// 

// on line 69 insert this code 
autoExpandColumns: false, 

// on line 1614 PREVIOUS CODE 
if (options.forceFitColumns) { 
    autosizeColumns(); 
} 

// on line 1614 change to this NEW CODE 
if (options.forceFitColumns || options.autoExpandColumns) { 
    autosizeColumns(); 
} 

затем вернуться к моему определению сетки, я заменить предыдущие варианты с этим:

// My NEW SlickGrid Options 
var options = { 
    enableCellNavigation: true, 
    forceFitColumns: false,  // make sure the force fit is false 
    autoExpandColumns: true  // <-- our new property is now usable 
}; 

с этим новое изменение имеет некоторую функциональность силовой подгонки (расширение), но не ограничивает вас при изменении размера столбцов после этого, как это делает сила.Я также тестировал его с помощью столбца Picker, если вы скрываете столбец, он соответствующим образом изменяет размер остальных. Я также изменил файл slick.columnpicker.js, чтобы включить флажок для этого свойства, но это совершенно необязательно ... Я могу добавить код для этого, если кто-то из вас тоже этого захочет. Вуаля !!! :)

EDIT # 2
я понял гораздо позже, что нет необходимости изменять файл ядра, мы можем просто вызвать grid.autosizeColumns() после создания сетки. Как это

var options = { forceFitColumns: false }; 
grid = new Slick.Grid("#myGrid", data, columns, options); 

// will take available space only on first load 
grid.autosizeColumns(); 

Это будет автоматически изменять размеры столбцов по размеру экрана на первой загрузки, но не даст вам ограничение forceFitcolumns флага.

Answer 2

Я знаю, что поздно ответить на этот вопрос.

Но мне удалось это сделать без необходимости менять вещи на slick.grid.js или установить min/maxWidth в массиве столбцов.

Вместо этого я сделал, чтобы перебирать массив столбцов, добавляя значения поля ширины каждого столбца, а затем я сделал простой подсчет математики, чтобы установить последнюю ширину столбца как innerWidth - totalColumsWidth + lastColumnWidth.

Код:

function lastColumnWidth(columns) 
{ 
     var widthSum = 0; 
     angular.forEach(columns, function(col) { 
      if(col.width) { widthSum = col.width + widthSum; } 
     }); 
     if(window.innerWidth > widthSum) { 
      columns[columns.length-1].width = columns[columns.length-1].width + (window.innerWidth - widthSum); 
     } 
     return columns; 
}