Базовый пример Slickgrid — в node/express загружается только первая строка данных, но она не видна

Я пытаюсь запустить слегка измененную версию SlickGrid’s example1-simple.html. Я на Mac OS X Lion, вижу такое же поведение с Chrome/Safari/Firefox. Как только у меня будут все зависимости CSS/JS, я смогу напрямую загрузить пример HTML-страницы (и мою слегка измененную версию) без каких-либо проблем. Однако, когда я пытаюсь обслуживать в основном ту же страницу с node/express/jade (используя res.render()), загружается строка заголовка (имена столбцов), и, просматривая отображаемый HTML, я вижу, что загружается первая строка моих данных, но я не не вижу в браузере (пытаюсь загрузить 10 строк данных). Кажется, что все соответствующие файлы CSS/JS загружаются правильно, и я не вижу никаких ошибок ни в консоли браузера, ни в консоли моего узла. Я полностью скопировал grid-canvas div ниже.

<div class="grid-canvas" style="height: 250px; width: 240px; ">
    <div class="ui-widget-content slick-row  even" row="0" style="top:0px">
        <div class="slick-cell l0 r0">Battery test #1.csv</div>
        <div class="slick-cell l1 r1">1024</div>
        <div class="slick-cell l2 r2">1335237255112</div>
    </div>
</div>

Я почти уверен, что с JavaScript все в порядке, так как он почти точно соответствует образцу HTML-страницы и работает нормально, когда я подставляю его в документ example1-simple.html и обращаюсь к нему напрямую. Также при рендеринге страницы с экспрессом я могу установить точку останова в своем браузере при вызове new Slick.Grid() и увидеть, что массив из 10 элементов строк данных отправляется, но не отображается в конечном итоге.

У меня есть базовые навыки отладки старой школы (когда-то я много программировал для Windows на VB), но я очень открыт для предложений относительно соответствующих инструментов и методов отладки, которые я мог бы использовать для решения этого типа проблем.

Вот мой layout.jade:

!!!
html
  head
    title= title
    link(rel="stylesheet", href="/stylesheets/slick.grid.css", type="text/css")
    link(rel="stylesheet", href="/stylesheets/css/smoothness/jquery-ui-1.8.19.custom.css", type="text/css")

  body!= body

И нефритовая страница с моим тестовым кодом:

#content
  #fileGrid

script(src="/javascripts/lib/jquery-1.7.2.js")
script(src="/javascripts/lib/jquery.event.drag-2.0.min.js")
script(src="/javascripts/lib/slick.core.js")
script(src="/javascripts/lib/slick.grid.js")

script
    var grid;
    var columns = [
      {id: "fileName", name: "File Name", field: "fileName"},
      {id: "fileSize", name: "File Size", field: "fileSize"},
      {id: "lastUpdate", name: "Last Updated", field: "lastUpdate"} // use mtime
      ];

    var options = {
      enableCellNavigation: true,
      enableColumnReorder: false
      };

    $(function() {

      var timeStamp = new Date();
      var numRows = 10;
      var data = [];

      for (var i = 1 ; i <= numRows ; i++) {
        data[i-1] = {
          fileName: "Battery test #" + i + ".csv",
          fileSize: i * 1024,
          lastUpdate: Date.now().toString()
        }
    };

      grid = new Slick.Grid("#fileGrid", data, columns, options);
    });

node.js express pug slickgrid
person Eli    schedule 24.04.2012    source источник

Ответы (4)


arrow_upward
5
arrow_downward

Я понял. Проблема заключалась в том, что я не указал размер для своего #fileGrid div ни в своем jade/html, ни где-либо еще в css, и SlickGrids, казалось, предполагал, что размер равен нулю, и поэтому не отображал никаких строк. Я изменил объявление нефрита на #fileGrid(style="width:500px; height:600px), и это исправило его. Оглядываясь назад, это была единственная разница между моей нефритовой страницей и html-примером.

person Eli    schedule 25.04.2012
comment
Спасибо, чувак, ты сэкономил мне несколько часов. - person Farhad; 16.10.2012

arrow_upward
0
arrow_downward

Это выглядит подозрительно:

  for (var i = 0 ; i <= numRows ; i++)
    data[i-1] = {
      fileName: "Battery test #" + i + ".csv",
      fileSize: i * 1024,
      lastUpdate: Date.now().toString(),
    };

Почему data[i-1] и i <= numRows? Вы пытаетесь назначить data[-1] до data[numRows], где вы должны назначить data[0] до data[numRows - 1].

Кстати, я бы заключил этот цикл for в фигурные скобки, хотя это и не обязательно. Кроме того, завершающая запятая (в последней строке) будет разорвана в Internet Explorer:

  for (var i = 0 ; i < numRows ; i++) {
    data[i] = {
      fileName: "Battery test #" + i + ".csv",
      fileSize: i * 1024,
      lastUpdate: Date.now().toString()
    };
  }

У вас также есть конечная запятая в вашем назначении columns.

person Linus Thiel    schedule 24.04.2012
comment
Спасибо, Линус. Я исправил то, что вы указали (в моем коде и в вопросе выше), но, к сожалению, получил тот же результат. - person Eli; 24.04.2012
comment
Прохладный. Я думаю, вы пропустили вещь о цикле for? По крайней мере, в вашем вопросе. Вы по-прежнему назначаете data[-1]. - person Linus Thiel; 24.04.2012
comment
В цикле i начинается с 1 и доходит до 10, но присвоение индекса равно data[i-1], поэтому я получаю массив из 10 элементов с индексами 0-9. Я подтвердил это, проверив массив с помощью точки останова в отладчике javascript браузера. Я собираюсь пройтись по всему внутреннему javascript SlickGrid и посмотреть, смогу ли я понять, что происходит. - person Eli; 24.04.2012
comment
Хорошо, теперь я вижу, что вы изменили его на 1. Это немного неортодоксально, но должно работать. Удачи! - person Linus Thiel; 24.04.2012
comment
Я понял это, но как новый пользователь я пока не могу сам ответить на свой вопрос. Проблема заключалась в том, что я не указал размер для своего #fileGrid div ни в своем jade/html, ни где-либо еще в css, и SlickGrids, казалось, предполагал, что размер равен нулю, и поэтому не отображал никаких строк. Я изменил объявление нефрита на #fileGrid(style="width:500px; height:600px), и это исправило его. Оглядываясь назад, это была единственная разница между моей нефритовой страницей и html-примером. - person Eli; 25.04.2012

arrow_upward
0
arrow_downward

@BRValentine, ты прав. Элементу контейнера сетки Slickgrid должна быть задана высота (ширина не является обязательной — по умолчанию используется 100% доступных). Если вы не укажете высоту элемента-контейнера, Slickgrid не отобразит строки.

person cspider    schedule 17.08.2012

arrow_upward
0
arrow_downward

указание размеров div целевой сетки решило мою проблему. В инструкциях этого нет... Оставлю здесь, чтобы другие могли найти.

<div id="classGrid" style="width:500px; height:600px;"></div>
person Riz    schedule 19.04.2013