PrimeFaces: 将Excel表粘贴到带有InputNumber的DataTable

huangapple go评论72阅读模式
英文:

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:

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

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:

$(&#39;input&#39;).bind(&#39;paste&#39;, 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(&quot;Text&quot;);
    if (data.length &gt; 0) {
        if (data.indexOf(&quot;\t&quot;) &gt; -1) {
            var columns = data.split(&quot;\n&quot;);
            $.each(columns, function () {
                var values = this.split(&quot;\t&quot;);
                $.each(values, function () {
                    $start.val(this);
                    if ($start.next(&#39;input&#39;)) {
						$start = $start.next(&#39;input&#39;);
						$start.val(this);
                    }
                    if ($start.closest(&#39;td&#39;).next(&#39;td&#39;).find(&#39;input&#39;)) {
						$start = $start.closest(&#39;td&#39;).next(&#39;td&#39;).find(&#39;input&#39;);
                    }
                    else
                    {
						return false;  
                    }
                });
                $start = $start.closest(&#39;td&#39;).parent().next(&#39;tr&#39;).children(&#39;td:first&#39;).find(&#39;input&#39;);
            });
            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.

huangapple
  • 本文由 发表于 2023年4月11日 16:12:01
  • 转载请务必保留本文链接:https://go.coder-hub.com/75983747.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定