PrimeFaces: вставьте таблицу Excel в DataTable с помощью InputNumber

У меня есть p:dataTable, который имеет несколько столбцов для значений месяца, например:

<p:column width = "80" headerText = "Januar">
    <p:inputNumber value = "#{mto.month01}" symbol = "€" symbolPosition = "s" decimalPlaces = "0"
        disabled = "#{((mto.year eq indexController.currentYear) and (indexController.currentMonth gt 1)) or (mto.year lt indexController.currentYear) or (indexController.isComponentDisabled('fieldPMForecastOutflow', 'PM'))}">
        <p:ajax process = "@this" partialSubmit = "true"
            update = ":contentform:dt-PMDetail contentform:blockButtonDeletePMYear"
            listener = "#{indexController.updateWorkingCopyProjectManagementFinancesDTO}" />
    </p:inputNumber>
</p:column>

Мои пользователи хотят иметь возможность вставлять ячейки Excel в эту таблицу данных.

Я пробовал разные фрагменты javascript, например. г. это и адаптировал вот так:

$('input').bind('paste', function (e) {
    var $start = $(this);
    var source

    //check for access to clipboard from window or event
    if (window.clipboardData !== undefined) {
        source = window.clipboardData
    } else {
        source = e.originalEvent.clipboardData;
    }
    var data = source.getData("Text");
    if (data.length > 0) {
        if (data.indexOf("\t") > -1) {
            var columns = data.split("\n");
            $.each(columns, function () {
                var values = this.split("\t");
                $.each(values, function () {
                    $start.val(this);
                    if ($start.next('input')) {
                        $start = $start.next('input');
                        $start.val(this);
                    }
                    if ($start.closest('td').next('td').find('input')) {
                        $start = $start.closest('td').next('td').find('input');
                    }
                    else
                    {
                        return false;  
                    }
                });
                $start = $start.closest('td').parent().next('tr').children('td:first').find('input');
            });
            e.preventDefault();
        }
    }
});

Когда я вставляю данные, символ валюты теряется, проверка не происходит (я могу вставлять буквы), и как только я навожу указатель мыши на поле, значение сбрасывается до исходного значения.

То, что я ищу, - это решение, которое «переходит» к следующему полю и вводит значение, как если бы я использовал клавиатуру (например, только числа). Если вставлено слишком много столбцов, их можно опустить. Новая строка в данных Excel должна привести к новой строке в DataTable (если я вставлю таблицу 3x3 в столбец 4 строки 1, столбцы с 4 по 6 в строках с 1 по 3 должны быть заполнены).

Поведение ключевого слова "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) для оценки ваших знаний,...
2
0
61
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

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

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

Из документации:

Устанавливает значение этого виджета ввода числа в заданное значение. Проверяет правильность формата номера.

Спасибо за Ваш ответ. У меня была идея пойти по этому пути, но я не нашел пути. Насколько мне известно, мне нужно использовать widgetVar в функции PF(...)? До сих пор я перемещался между элементами, используя путь html, и не нашел способа, как решить эту проблему с помощью PF?

Hypernia 11.04.2023 10:38

Я согласен, что виджет setValue() для InputNumber — это именно то, что вам нужно. Просто нужно выяснить, как получить виджет для ячейки, которую вы редактируете. Хотя это должно быть возможно.

Melloware 11.04.2023 16:37

В консоли браузера функция setValue отлично работает для данного widgetVar. Я попытался добавить следующие теги к моему <p:inputNumber>: id = "dtMTO#{mto.year}01" widgetVar = "dtMTO#{mto.year}01" чтобы иметь возможность использовать element.id в качестве моего widgetVar в функции PF(), но я предполагаю, что мой rowKey недоступен при создании идентификатора (id - mto01, widgetVar mto202301 для первой строки). Любая помощь приветствуется, чтобы получить мой виджет PF из заданного элемента js?

Hypernia 12.04.2023 10:21

Это другая проблема. Пожалуйста, посмотрите, сможете ли вы найти ответ на этот вопрос на SO. Если вы не можете, задайте новый вопрос и отметьте его PrimeFaces. См. например stackoverflow.com/questions/15660969/…

Jasper de Vries 12.04.2023 10:37

Я построил widgetVar на основе столбца и rowIndexVar. Затем я могу перебрать свой ввод, прочитать идентификатор столбца и сгенерированный номер строки, который эквивалентен индексу для использования PrimeFace setValue(). Что еще не работает: я частично обрабатываю эти значения в событии ajax и показываю сумму. Есть ли способ вызвать событие ajax при setValue() или обработать всю таблицу из моего javascript?

Hypernia 12.04.2023 15:13
stackoverflow.com/questions/16588327/…
Jasper de Vries 12.04.2023 15:28

Нашел: я использовал <p:remoteCommand>, который обновляет и обрабатывает все необходимое и вызывается в конце моего javascript.

Hypernia 12.04.2023 15:31

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