简体   繁体   English

使用JSF将数据从Excel复制并粘贴到数据表(Primefaces)

[英]Copy & Paste the data from Excel to Datatable using JSF (Primefaces)

i want to Copy & Paste the data from Excel to Datatable using JSF (Primefaces). 我想使用JSF(Primefaces)将数据从Excel复制并粘贴到数据表。 please suggest me a possibilities to achieve copy & paste. 请建议我实现复制和粘贴的可能性。

You can listen to a paste event of dataTable primefaces object and get the clipboard data from the event object, format the data to a JSONobject (in the example I used a JSONArray) to send it via remoteCommand to a backingBean. 您可以侦听dataTable primefaces对象的粘贴事件,并从事件对象获取剪贴板数据,将数据格式化为JSONobject(在示例中,我使用JSONArray)通过remoteCommand将其发送到backingBean。

xhtml: xhtml:

<p:remoteCommand name="updateData" process="@this" action="#{backingBean.updateData()}" update="dt" />

<p:dataTable widgetVar="dt" id="dt" value="#{backingBean.data}" var="d">
    <p:column headerText="column 1">
        <p:outputLabel value="#{d.col1}" />
    </p:column>
    <p:column headerText="column 2">
        <p:outputLabel value="#{d.col2}" />
    </p:column>
</p:dataTable>

<h:outputScript>
    $(function(){
        PF('dt').jq.on("paste", function(e){
            var data = e.originalEvent.clipboardData;
            var table = [];
            if(data &amp;&amp; data.items &amp;&amp; data.items[0]) {

                data.items[0].getAsString(function(text){

                    $.each( text.split("\n"), function(i, r){
                        table[i] = r.split("\t");
                    });

                    updateData([{name: 'data', value: JSON.stringify(table) }]);
                });
            }
        });

    });
</h:outputScript>

In your remoteCommand action decode the JSON data and populate the dataTable data provider. 在remoteCommand操作中,解码JSON数据并填充dataTable数据提供程序。 Table data is only a Java object with 2 properties (col1 and col2). 表数据只是具有2个属性(col1和col2)的Java对象。

BackingBean: BackingBean:

private List<TableData> data;

public List<TableData> getData() {
    return data;
}

public void setData(List<TableData> data) {
    this.data = data;
}

public void updateData(){
    Map<String, String> paramValues = FacesContext.getCurrentInstance().getExternalContext().getRequestParameterMap();
    String json = paramValues.get("data");
    JSONArray table = new JSONArray(json);
    data = new ArrayList<>();
    for (int i = 0; i < table.length(); i++){
        JSONArray row = table.getJSONArray(i);
        TableData t = new TableData();

        for (int j = 0; j < row.length(); j++ ){
            String o = row.getString(j);
            if (j == 0){
                t.setCol1(o);
            } else {
                t.setCol2(o);
            }
        }

        data.add(t);

    }
}

This is only an example, an hint, it needs more work to work properly. 这只是一个示例,只是一个提示,它需要更多的工作才能正常工作。 Maybe you need a custom primefaces object to do so or extend the PF dataTable. 也许您需要一个自定义的primefaces对象来执行此操作或扩展PF dataTable。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM