Nano Hash - криптовалюты, майнинг, программирование

Сетка KendoUI не отображается с данными на экране

Привет, я разрабатываю приложение angular 2 с элементами управления Kendo UI. Я следую примеру сайта пользовательского интерфейса кендо, чтобы настроить сетку кендо. По какой-то причине нет никаких ошибок и ничего не отображается на экране. Данные хранятся в локальном файле products.js, на который ссылается приложение и который привязан к источнику данных. Пожалуйста, смотрите код ниже

Product.html

    <!DOCTYPE html>
    <html>



    <head>
        <title></title>

        <link href="../../assets/css/kendo/2016.3.1028/kendo.common.min.css" rel="stylesheet" />
        <link href="../../assets/css/kendo/2016.3.1028/kendo.default.min.css" rel="stylesheet"/>
        <link href="../../assets/css/kendo/2016.3.1028/kendo.default.mobile.min.css" rel="stylesheet" />
        <script src="../../scripts/kendo/2016.3.1028/jquery.min.js"></script>
        <script src="../../scripts/kendo/2016.3.1028/kendo.all.min.js"></script>

    </head>
    <body>

        <script src="../../scripts/shared/products.js"></script>
        <div id="example">





            <div id="grid"></div>

            <script>
                $(document).ready(function () {
                    $("#grid").kendoGrid({
                        dataSource: {
                            data: products,
                            schema: {
                                model: {
                                    fields: {
                                        ProductName: { type: "string" },
                                        UnitPrice: { type: "number" }

                                    }
                                }
                            },
                            pageSize: 20
                        },
                        height: 550,
                        scrollable: true,
                        sortable: true,
                        filterable: true,
                        pageable: {
                            input: true,
                            numeric: false
                        },
                        columns: [
                            { field: "ProductName", title: "Units In Stock", width: "130px" },
                            { field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: "130px" },

                        ]
                    });
                });
            </script>

        </div>


    </body>

    </html>

Products.js

var products = [{
    ProductID : 1,
    ProductName : "Chai",
    SupplierID : 1,
    CategoryID : 1,
    QuantityPerUnit : "10 boxes x 20 bags",
    UnitPrice : 18.0000,
    UnitsInStock : 39,
    UnitsOnOrder : 0,
    ReorderLevel : 10,
    Discontinued : false,
    Category : {
        CategoryID : 1,
        CategoryName : "Beverages",
        Description : "Soft drinks, coffees, teas, beers, and ales"
    }
}, {
    ProductID : 2,
    ProductName : "Chang",
    SupplierID : 1,
    CategoryID : 1,
    QuantityPerUnit : "24 - 12 oz bottles",
    UnitPrice : 19.0000,
    UnitsInStock : 17,
    UnitsOnOrder : 40,
    ReorderLevel : 25,
    Discontinued : false,
    Category : {
        CategoryID : 1,
        CategoryName : "Beverages",
        Description : "Soft drinks, coffees, teas, beers, and ales"
    }
}];

Я проверил все ссылки на файлы javascript и css, и они кажутся правильными. Я попытался проверить, есть ли какие-либо ошибки в окне консоли, используя инструменты разработчика.

javascript kendo-grid
05.11.2016

  • вам необходимо создать источник данных, прежде чем использовать его в том же файле, например telerik.com/forums/ 12.11.2016
  • Том, с этим что-то не так. Я протестировал его, и он отлично работает. 14.11.2016
  • Я добавил следующее перед назначением источника данных var sharedDataSource = new kendo.data.DataSource({ data: products }); Но эта доза, кажется, работает 15.11.2016
  • Том. Я только что попробовал ваш приведенный выше код со ссылками на cdn-версии ресурсов CSS и JS, и он правильно отображает таблицу. Я предполагаю, что один или несколько ваших ресурсов не загружаются - дважды проверьте пути ко всем сценариям и стилям, а также проверьте вкладку сети в devtools. 16.11.2016
  • Как это связано с Angular2? 16.11.2016
  • @ Том, не могли бы вы проверить, есть ли ошибка в элементе проверки? Меня беспокоит только этот путь в теге скрипта: ‹script src=../../scripts/shared/products.js›‹/script› 16.11.2016
  • Привет, я проверил путь, и он был правильным. Я могу распечатать объект JSON, возвращенный службой, в элементе div. Я также пытался назначить данные непосредственно в сетке, но это не сработало. У меня такое ощущение, что jquery не работает, когда я пробовал document.write с функцией document.ready, но, похоже, он ничего не печатал. 18.11.2016

Ответы:


1

Я не вижу никаких проблем с вашим кодом.

Не могли бы вы предоставить нам информацию о том, какой браузер вы используете и какова файловая структура вашего проекта? Вы используете сложные пути к файлам js и css.

В любом случае, я подготовил для вас 2 рабочих примера.

  1. Codepen: http://codepen.io/xszaboj/pen/XNNKEv
  2. проект github ссылка на github

Я не отвечаю на ваш вопрос, почему вы не видите ошибок на странице. Но я надеюсь, что это поможет.

Код такой же, как у вас:

$(document).ready(function () {
    $("#grid").kendoGrid({
        dataSource: {
            data: products,
            schema: {
                model: {
                    fields: {
                        ProductName: { type: "string" },
                        UnitPrice: { type: "number" }

                    }
                }
            },
            pageSize: 20
        },
        height: 550,
        scrollable: true,
        sortable: true,
        filterable: true,
        pageable: {
            input: true,
            numeric: false
        },
        columns: [
            { field: "ProductName", title: "Units In Stock", width: "130px" },
            { field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: "130px" },

        ]
    });
});

Вот мой захват сети Firefox. Не могли бы вы включить свой для моего проекта на github, чтобы мы могли сравнить? сеть firefox

17.11.2016
  • Даже я не понимаю, как это работает у вас, а не у меня. Я могу распечатать объект JSON, возвращенный службой, в элементе div. Я также пытался назначить данные непосредственно в сетке, но это не сработало. У меня такое ощущение, что jquery не работает, когда я пробовал document.write с функцией document.ready, но, похоже, он ничего не печатал. 18.11.2016
  • Я установил firefox и firebug, но не могу отследить проблему. Это, безусловно, связано с тем, что jquery не работает. Я попытался изменить ссылку, добавив также атрибут type ‹script type=text/javascript src=kendo.cdn.telerik.com/2016.3.1028/js/› 18.11.2016
  • Не могли бы вы включить сеть Firefox, как я, чтобы мы могли сравнить? 20.11.2016
    • Новые материалы
    Кластеризация: более глубокий взгляд
    Кластеризация — это метод обучения без учителя, в котором мы пытаемся найти группы в наборе данных на основе некоторых известных или неизвестных свойств, которые могут существовать. Независимо от..
    Как написать эффективное резюме
    Предложения по дизайну и макету, чтобы представить себя профессионально Вам не позвонили на собеседование после того, как вы несколько раз подали заявку на работу своей мечты? У вас может..
    Частный метод Python: улучшение инкапсуляции и безопасности
    Введение Python — универсальный и мощный язык программирования, известный своей простотой и удобством использования. Одной из ключевых особенностей, отличающих Python от других языков, является..
    Как я автоматизирую тестирование с помощью Jest
    Шутка для победы, когда дело касается автоматизации тестирования Одной очень важной частью разработки программного обеспечения является автоматизация тестирования, поскольку она создает..
    Работа с векторными символическими архитектурами, часть 4 (искусственный интеллект)
    Hyperseed: неконтролируемое обучение с векторными символическими архитектурами (arXiv) Автор: Евгений Осипов , Сачин Кахавала , Диланта Хапутантри , Тимал Кемпития , Дасвин Де Сильва ,..
    Понимание расстояния Вассерштейна: мощная метрика в машинном обучении
    В обширной области машинного обучения часто возникает необходимость сравнивать и измерять различия между распределениями вероятностей. Традиционные метрики расстояния, такие как евклидово..
    Обеспечение масштабируемости LLM: облачный анализ с помощью AWS Fargate и Copilot
    В динамичной области искусственного интеллекта все большее распространение получают модели больших языков (LLM). Они жизненно важны для различных приложений, таких как интеллектуальные..