Блог

Главная - Вопросы по программированию - каковы минимальные шаги для развертывания slickgrid с помощью node.js ?

каковы минимальные шаги для развертывания slickgrid с помощью node.js ?

#javascript #node.js #slickgrid

#javascript #node.js #slickgrid

Вопрос:

узел v12.20.2
нпм v6.14.11

не так много на пути node.js есть примеры для slickgrid.

Редактировать:

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

 $ npm install slickgrid
$ npm install jquery
$ npm install jquery-ui-dist

затем мне пришлось скопировать jquery.event.drag-2.3.0.js из lib каталога репозитория в папку моего проекта.

 <!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Test</title>
        <style>
        </style>
    </head>
    <body>
        <div id="mydiv" style="height: 500px; width: 500px;"></div>
    </body>
    <script>
        var jQuery = require('jquery');
        require('jquery-ui-dist/jquery-ui');
        require('./jquery.event.drag-2.3.0');
        require('slickgrid/slick.core');
        require('slickgrid/slick.grid');
                
        function test() {
            var columns = [
                {id: "column1", name: "Column1", field: "column1"},
                {id: "column2", name: "Column2", field: "column2"}
            ];

            var data = [
                {
                    column1: "Test1",
                    column2: "Test2"
                }
            ];

            var options = {}

            new Slick.Grid("#mydiv", data, columns, options);
        }

        window.onload = test();
    </script>
</html>

Ответ №1:

Есть несколько вещей, которые кажутся неправильными, что, вероятно, не помогает

  1. Вы require('slickgrid') ошибаетесь, это должно быть require('slickgrid/slick.grid') и должно быть вне функции в первых двух строках импорта.
  2. Другая вещь, которую вам не хватает, — это импорт jQueryUI, я использую его с уменьшенным пакетом dist из npm с require('jquery-ui-dist/jquery-ui')
  3. Вы также должны создать его экземпляр, но вы этого не делаете, вам нужно вызвать, и вы не new Slick.Grid(...) можете использовать псевдоним, это действительно необходимо Slick.Grid , потому что это то, что определено в пространстве имен jQuery
  4. этот последний шаг является дополнительным, но если у вас есть проблемы с линтингом, вам может потребоваться создать Slick в качестве доступной глобальную переменную в вашем eslint, чтобы избежать красных закорючек, в моем случае с TypeScript я делаю это таким образом declare const Slick: any; , чтобы избежать ошибок линтинга.

Если у вас все еще есть проблемы, вы можете проверить мою реализацию TypeScript здесь, которая используется для моей библиотеки Slickgrid-Universal (которая является оболочкой поверх 6pac/SlickGrid fork)

Комментарии:

1. вопрос адаптирован с использованием предоставленной вами информации.

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