Slickgrid изменяет идентификатор из моих данных и не очищает пустую строку

Я пытаюсь обновить свою сетку без необходимости обновления! Прямо сейчас он обновляет только сетку, но не знаю почему, он меняет идентификатор на последний вставленный и не «очищает» пустую строку! Когда я пытаюсь вставить данные, он очищает их. Я новичок в ajax и slickgrid! Я пытался увидеть пример ajax от slickgrid, но получил несколько ошибок! Нужно ли повторно загружать onCellChange и т. д.? Я просто хотел обновить сетку новыми данными. Любая помощь?

заранее спасибо

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

Функция перерисовки сетки

function desenhaGrid() {
    $("#myGrid").ready(function () {
        $(function () {
            $.ajax({
                type: "GET",
                url: '/SlickGrid/GetData',
                dataType: 'json',
                success: function (jsonResult) {
                    for (var key in jsonResult) {
                        if (jsonResult.hasOwnProperty(key)) {
                            //print table
                            var d = (data[key] = {});
                            for (var i = 0; i < data.length; i++) {
                                d["#"] = i + 1;
                            }
                            d["id"] = jsonResult[key].id;
                            d["t_nome"] = jsonResult[key].t_nome;
                            d["t_prof"] = jsonResult[key].t_prof;
                            d["t_data"] = jsonResult[key].t_data;
                            d["t_morada"] = jsonResult[key].t_morada;
                            d["t_percCompleto"] = jsonResult[key].t_percCompleto;
                        }
                    }


                    grid = new Slick.Grid("#myGrid", dataView, columns, options);

                   dataView.beginUpdate();
                   grid.invalidateAllRows();
                   dataView.setItems(data);
                   grid.render();
                   dataView.endUpdate();
                                       }
            });

        });
    });
}

и это мой onAddNewRow

        grid.onAddNewRow.subscribe(function (e, args) {
            var idData = jsonResult[key].id + 1;
            var item = { "id": idData, "t_nome": '', "t_prof": '', "t_data": '', "t_morada": '', "t_percCompleto": '' };
            $.extend(item, args.item);
            dataView.addItem(item);
            //if user press enter
            grid.onKeyDown.subscribe(function (e) {
                var keyPressed = event.keyCode || event.which;
                if (keyPressed == 13) {
                    alert("add");
                    var myJSON = JSON.stringify(item);
                    $.post("/SlickGrid/addGridEnter", $("input[name=mydata]").val(myJSON));
                    console.info(myJSON);
                    desenhaGrid();
                }
            });

        });

Я ожидал, что он перерисует мою сетку со всеми данными. Вместо этого он меняет все идентификаторы на последний вставленный, и когда я пытаюсь вставить данные в последнюю строку, он не позволяет мне (он очищает его после того, как я покидаю ячейку).

ОБНОВИТЬ:

Я обновил функцию рисования сетки

function desenhaGrid() {
    $("#myGrid").load(function () {
        $(function () {
            $.ajax({
                type: "GET",
                url: '/SlickGrid/GetData',
                dataType: 'json',
                success: function (jsonResult) {
                    dataView.beginUpdate();
                    grid.invalidateAllRows();
                    dataView.setItems(jsonResult);
                    dataView.endUpdate();
                    grid.render();
                }
            });

        });
    });
}
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
0
115
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Я не думаю, что это проблема SlickGrid. С javascript бывают всякие проблемы. Например:

  • почему ты используешь $("#myGrid").ready(? событие ready срабатывает только после завершения загрузки DOM

  • вся операция копирования из jsonResult в data заканчивается теми же данными. почему бы не использовать jsonResult напрямую?

  • раздел for (var i = 0; i < data.length; i++) { d["#"] = i + 1; } запускается один раз для каждой строки, добавленной в data, он должен запускаться только один раз в конце, вне цикла

  • вы подписываетесь на событие keydown один раз для каждой строки, добавленной в сетку. Вы должны просто подписаться один раз. прослушивание клавиши Enter также является очень плохим методом определения того, введена ли строка. что, если кто-то щелкнет другую строку, прежде чем нажать Enter?

Slickgrid — это клиентская сетка. Это означает, что данные не нужно сохранять после каждого изменения. Распространенным подходом является использование кнопки «Сохранить» или определение того, изменилась ли активная строка.

Привет Бен! Итак, для ответов на ваши вопросы: 1) Как указано выше, я новичок в Ajax! Я просто видел несколько примеров и надеялся на лучшее! Я изменился, чтобы щелкнуть или загрузить, но все еще не понял, как с этим работать. 2) Теперь я просто оборачиваю json в сетку, поэтому код стал немного чище (после этого я отредактирую). 3) Да, я тоже это заметил! этот цикл используется только для добавления числа в строку (более наглядная вещь) 4) Это только сейчас! Я тестирую и разбираю slickgrid как могу! Я думал о onCellChange (когда пользователь покидает ячейку, она сохраняется в БД)

daaavs 29.05.2019 10:08

Бен, когда вы говорите «вы должны просто подписаться один раз», не могли бы вы уточнить?! Должен ли я сначала обнаружить ввод, а затем изменить применение onAddNewRow? Позже я попытаюсь обновить IRL (например, когда oncellchange включен, применить изменение напрямую к БД - примерно как в Excel).

daaavs 29.05.2019 11:55

Ajax имеет тенденцию быть довольно сложным. Например, вам нужна стратегия для проверки. Как узнать, содержит ли строка допустимые данные и действительно ли она может быть сохранена в хранилище данных? Часто используется кнопка «изменить строку», а затем «сохранить строку» и «отменить редактирование». Если проверки нет, лучше всего просто сохранить значение ячейки с помощью AJAX с помощью настраиваемого редактора ячеек. Не должно быть необходимости перерисовывать сетку, если только данные не были изменены удаленным источником.

Ben McIntyre 31.05.2019 03:19

Обратите внимание, что проблема с вашей функцией desenhaGrid заключается в том, что она фактически не повторно заполняет данные сетки, а просто настраивает это на событие готовности DOM. Что уже произошло при загрузке страницы, поэтому, скорее всего, больше никогда не сработает. Кроме того, вы снова добавляете событие, поэтому, если событие готовности когда-либо произойдет, оно будет срабатывать столько раз, сколько вы его вызвали.

Ben McIntyre 31.05.2019 03:22

Привет, Бен! Спасибо за ответ! Да, Ajax немного сложен, но у меня все получилось! Я пытался перерисовать сетку после того, как пользователь вставил новую строку! Он делает это прямо сейчас! :) Как вы сказали: «Что уже произошло при загрузке страницы, поэтому, скорее всего, больше никогда не сработает»! это никогда не запускало событие! Прямо сейчас делает это! Еще раз спасибо! Кстати, если вы не возражаете: вы не знаете, возможно ли одновременно использовать и модель выбора ячеек, и модель выбора строки? Для того, что я тестирую, одно перекрывает другое!

daaavs 31.05.2019 10:25

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

Ben McIntyre 02.06.2019 13:26

Другие вопросы по теме