гладкое выравнивание ячеек строки заголовка сетки

Ни одно из этих решений не сработало для меня, возможно, потому, что код SlickGrid изменился с 2012 года :) Я нашел решение в этом post, он похож на @Wex, но с небольшими отличиями:

.slickgrid, 
.slickgrid *,
.slick-header-column {
    box-sizing: content-box;
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box;
}

Где .slickgrid — селектор элемента контейнера сетки.

Я смог заставить это работать в начальной загрузке 3 (среда, где box-sizing установлено на border-box), просто применив box-sizing: content-box к .slick-header-column.

.slick-header > .slick-header-columns > .slick-header-column {
  -webkit-box-sizing: content-box;                                                              
  -moz-box-sizing: content-box;
  box-sizing: content-box; }

Просто будьте осторожны при изменении border свойств .slick-header-column. Мне удалось удалить границу справа, установив цвет transparent:

.slick-header > .slick-header-columns > .slick-header-column:last-child { 
  border-right-color: transparent;
}

Примечание. Вы можете поиграть со спецификой селектора — селектор, который вы перезаписываете:

.slick-header-column.ui-state-default { ... }

У меня была аналогичная проблема при использовании его на странице, на которой был twitter bootstrap css. Решение состояло в том, чтобы переопределить box-sizing на content-box

*, *:до, *:после { -webkit-box-sizing: content-box; -moz-box-sizing: поле содержимого; box-sizing: контент-бокс; }

вероятно, следует выяснить, каким именно классам это действительно нужно, но это отсортировало вещи для меня.

У меня была аналогичная проблема при динамическом отображении/скрытии сеток с использованием JQuery .show() и .hide().

Если вы создаете тег div с display: none (поэтому он изначально скрыт), столбцы сетки не инициализируются должным образом. Чтобы обойти это, я создаю тег div с visibility: hidden и удаляю этот стиль перед использованием методов .hide() и .show().

Мой код выглядит примерно так:

  <div id="mygrid" style="visibility: hidden"></div>

  $grid = $("#mygrid")

  grid = new Slick.Grid($grid, gridData, gridColumns, gridOptions);

  // Hide grid by default, remembering to remove the visibility style
  $grid.hide();
  $grid.css("visibility", "visible");

  // You can now show and hide the grid using normal jQuery methods
  $grid.show();
  $grid.hide();

После инициализации и удаления свойства visibility: hidden; я использую .hide() и .show(), но я подозреваю, что это сработает, если вы манипулируете атрибутом display: none; напрямую, если вы не используете JQuery.

Надеюсь это поможет.

У меня была точно такая же проблема, и, прочитав ответы @Premanshu и @Tin, я нашел другой способ ее решения.

По сути, вам нужно пропустить цикл событий и позволить DOM наверстать упущенное, прежде чем отображать сетку, это позволит ему найти правильную ширину столбцов. Я использовал setTimeout для этого.

    var myGrid = $("<div id='myGrid' style='width:600px;height:500px;'></div>");
    grid = new Slick.Grid(myGrid, data, columns, options);


   // ... later on, append the container to the DOM and initialize SlickGrid
   setTimeout(function(){
     myGrid.appendTo(that.$el);
     grid.init();
   },1);

Это поддерживается и не должно происходить. Фактически, большинство примеров (включая http://mleibman.github.com/SlickGrid/examples/example1-simple.html) имеют такую ​​же реализацию, чтобы убедиться, что она работает правильно.

Можете ли вы включить репродукцию jsfiddle.net?

Решил это для меня. Вот что я делал: 1. Инициализировал сетку 2. Добавлял к ней данные 3. Представлял ее с помощью модального элемента div, содержащего сетку

Чтобы решить, я сделал это: 1. Представьте его, используя модальный элемент div, содержащий сетку. 2. Инициализируйте сетку. 3. Добавьте данные.