英文:
PrimeFaces: Paste Excel table to DataTable with InputNumber
问题
<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>
$('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();
        }
    }
});
If you need further assistance, feel free to ask.
英文:
I have a p:dataTable that has multiple columns for month values like this:
<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>
My users want to be able to paste excel cells into this DataTable.
I tried different javascript snippets, e. g. this and adapted it like this:
$('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();
        }
    }
});
When I paste data, the currency symbol is lost, no validation happens (I can paste letters) and as soon as I hover over a field with the mouse, the value is reset to its original value.
What I am looking for is a solution that 'tabs' to the next field and inputs the value like I would via the keyboard (e. g. numbers only). If too many columns are pasted, they can be omitted. A new line in the excel data should result in a new line in the DataTable (if I paste a 3x3 table in column 4 of line 1, columns 4 to 6 in rows 1 to 3 should be filled).
答案1
得分: 2
使用小部件 API 并使用其 setValue 函数来设置组件输入字段的值,而不是直接将值写入组件的输入字段。
从文档中可以得知:
将此输入数字小部件的值设置为给定的值。确保数字被正确格式化。
英文:
Instead of directly writing the value to the component's input field, use the widget API and use its setValue function to set the value.
From the documentation:
> Sets the value of this input number widget to the given value. Makes sure that the number is formatted correctly.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。


评论