Question

我在前端有一个Primefaces 5.1表格用户界面。

每行都有上传按钮。

在特定行浏览并选择文件时，上传按钮在最后一行变为活动状态。它需要在浏览和选择文件的位置处于活动状态。使用文件上传器与表格UI结合使用时似乎存在javascript错误。上传按钮工作（除了其在不同行的UI），文件上传到右侧行（文件之前浏览过的行）。

<h:panelGroup rendered="#{datas.attach_doc_ids==null}">
   <p:growl id="uploadMSG" showDetail="true"/>
   <p:fileUpload 
      previewWidth="0"
      process="data_tab"
      id="file_upper"
      styleClass="fileUploadStyle"
      onstart="showloader();"
      oncomplete="hideloader();"
      auto="false"
      mode="advanced"
      label=""
      dragDropSupport="false"
      widgetVar="fileUploader"
      fileUploadListener="#{datasBean.submitUploadedFile}"
      allowTypes="/(\.|\/)(gif|jpe?g|png|pdf|doc|docx|doc)$/"
      onerror="console.log('bad file type!');"
      update="uploadMSG"/>

<script>
   registerRowClickForFileUpload(#{indexvar});
</script>
</h:panelGroup>

你知道可能导致这种情况的原因吗？

下面的数据表定义：

styleClass="wr_datatable"
                id="data_tab"
                paginatorPosition="bottom"
                var="datas"
                value="#{datasBean.listDatas}"
                widgetVar="dataTable"
                emptyMessage="No data found. Please change the search criteria above."
                paginator="true"
                selection="#{datasBean.selectedData}"
                rowKey="#{datas.data_pk}"
                selectionMode="single"
                rowIndexVar="indexvar"
                draggableColumns="true"
                resizableColumns="true"
                paginatorTemplate="{CurrentPageReport}
                {FirstPageLink}
                {PreviousPageLink}
                {PageLinks}
                {NextPageLink}
                {LastPageLink}
                {RowsPerPageDropdown}"
                rows="10"
                rowsPerPageTemplate="5,10,15,20"

数据表：

        <p:column headerText="Status" width="150"
                  sortBy="#{datas.data_status}">

            <p:selectOneMenu  value="#{datas.data_status}" onchange="selectme(#{indexvar});">
                <f:selectItem itemValue="0" />
                <f:selectItem itemValue="1" />
                <f:selectItem itemValue="2" />
                <f:selectItem itemValue="3" >
                <f:selectItem itemValue="5" />
                <f:selectItem itemValue="4" />

                <p:ajax event="change"
                        async="true"
                        process="@form"
                        global="true"
                        update="data_tab"
                        listener="#{datasBean.updatedataStatus}">
                    <f:setPropertyActionListener value="#{datas}"
                                                 target="#{datasBean.selecteddata}"/>
                </p:ajax>
            </p:selectOneMenu>

        </p:column>
        <p:column headerText=“name” sortBy="#{datas.name}" ><h:outputText value="#{datas.name}"/></p:column>
        <p:column headerText=“dob"><h:outputText value="#{datas.date_of_birth}"/></p:column>
        <p:column headerText=“number” sortBy="#{datas.number}" ><h:outputText value="#{datas.number}”/></p:column>
        <p:column headerText=“date” sortBy="#{datas.data_datetime}"><h:outputText value="#{datas.data_datetime}"/></p:column>
        <p:column headerText=“second name“ sortBy="#{datas.second_name}”>
            <h:outputText value="#{datas.second_name}”/>
        </p:column>
                        <p:column headerText="Institution" sortBy="#{datas.institution}">
            <h:outputText value="#{datas.institution}"/>
        </p:column>
        <p:column headerText="Documents" >

                                <p:graphicImage library="images"
                            name="attach-doc-exist.png"
                            title="Open Attachement Document"
                            onclick="selectme(#{indexvar});
                                    openDocJS(‘ATTACHEMET_DOCUMENT');" 
                            rendered="#{datas.attach_doc_ids!=null}"/>
            <h:panelGroup rendered="#{datas.attach_doc_ids==null}">
                <p:growl id="uploadMSG" showDetail="true"/>
                <p:fileUpload 
                    previewWidth="0"
                    process="data_tab"
                    id="file_upper"
                    styleClass="fileUploadStyle"
                    onstart="showloader();"
                    oncomplete="hideloader();"
                    auto="false"
                    mode="advanced"
                    label=""
                    dragDropSupport="false"
                    widgetVar="fileUploader"
                    fileUploadListener="#{datasBean.submitUploadedFile}"
                    allowTypes="/(\.|\/)(gif|jpe?g|png|pdf|doc|docx|doc)$/"
                    onerror="console.log('bad file type!');"
                    update="uploadMSG"/>

                <script>
                    registerRowClickForFileUpload(#{indexvar});

                </script>
            </h:panelGroup>

            <p:remoteCommand name="openMedicalReport"
                             global="true"
                             async="true"
                             actionListener="#{datasBean.manageReport}"/>

            <p:remoteCommand name="lockFile"
                             global="true"
                             async="true"
                             actionListener="#{datasBean.manageFilePermission}"/>
        </p:column>
        <p:column headerText="MOD" width="30">

            <h:outputText value="#{datas.data_mods}"/>
        </p:column>


        <p:ajax event="rowSelect" async="true" global="false">
            <f:setPropertyActionListener target="#{datasBean.selecteddata}" value="#{datas}" />
        </p:ajax>
    </p:dataTable>

Answer 1

使用动态生成的值替换widgetVar以获取唯一文件上传小部件，该小部件修复了上述注释所建议的问题：）

<h:panelGroup rendered="#{datas.attach_doc_ids==null}">
   <p:growl id="uploadMSG" showDetail="true"/>
   <p:fileUpload 
      previewWidth="0"
      process="data_tab"
      id="file_upper"
      styleClass="fileUploadStyle"
      onstart="showloader();"
      oncomplete="hideloader();"
      auto="false"
      mode="advanced"
      label=""
      dragDropSupport="false"
      widgetVar="#{datas.data_pk}"
      fileUploadListener="#{datasBean.submitUploadedFile}"
      allowTypes="/(\.|\/)(gif|jpe?g|png|pdf|doc|docx|doc)$/"
      onerror="console.log('bad file type!');"
      update="uploadMSG"/>

<script>
   registerRowClickForFileUpload(#{indexvar});
</script>
</h:panelGroup>

每个表行的Primefaces文件上载UI问题

1 个答案: