使用 JavaScript 更改数据表中的 header 列

Question

我有一个数据表的 XHTML 代码。

<p:dataTable id="processes" var="process" value="#{homeBean.processesList}" filteredValue="#{homeBean.filteredProcesses}"
                                    rowKey="#{process.pid}" selection="#{homeBean.selectedProcesses}" 
                                    paginator="true" rows="8" paginatorTemplate="{FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink}"
                                    rowsPerPageTemplate="5,10,15" >
                                <f:facet name="header">
                                    <h:outputText value="Processes" />
                                </f:facet>
                                <p:column name="owner" filterBy="owner" filterMatchMode="contains" sortBy="owner" headerText="Owner">
                                    <h:outputText value="#{process.owner}" />
                                </p:column>
                                <p:column name="pid" filterBy="pid" filterMatchMode="exact" sortBy="pid" headerText="PID">
                                    <h:outputText value="#{process.pid}" />
                                </p:column>
                                <p:column name="ppid" filterBy="ppid" filterMatchMode="exact" sortBy="ppid" headerText="PPID">
                                    <h:outputText value="#{process.ppid}" />
                                </p:column>
                                <p:column name="c" filterBy="c" filterMatchMode="exact" sortBy="c" headerText="C">
                                    <h:outputText value="#{process.c}" />
                                </p:column>
                                <p:column name="stime" filterBy="stime" filterMatchMode="contains" sortBy="stime" headerText="STIME">
                                    <h:outputText value="#{process.stime}" />
                                </p:column>
                                <p:column name="tty" filterBy="tty" filterMatchMode="contains" sortBy="tty" headerText="TTY">
                                    <h:outputText value="#{process.tty}" />
                                </p:column>
                                <p:column name="time" filterBy="time" filterMatchMode="contains" sortBy="time" headerText="TIME">
                                    <h:outputText value="#{process.time}" />
                                </p:column>
                                <p:column name="cmd" filterBy="cmd" filterMatchMode="contains" sortBy="cmd" headerText="CMD">
                                    <h:outputText value="#{process.cmd}" />
                                </p:column>

                            </p:dataTable>

此代码在 table 中显示所选服务器中每个进程的所有者、pid、ppid、c、stime、time、tty 和 cmd 信息。当我得到 windows 服务器时，我想更改 headerText，所以我写了这个 javascript 代码，我走的是正确的方法吗？？

                    <script type="text/javascript">
                    var server_os = "#{homeBean.selectedLogicalServer.os}";
                    if (server_os.search("Windows") != -1 ) {
                        document.getElementById("owner").headerText="User Name";
                        document.getElementById("ppid").headerText="Sesion Number";
                        document.getElementById("c").headerText="Sesion Number";
                        document.getElementById("stime").headerText="User Name";
                        document.getElementById("tty").headerText="Sesion Name";
                        document.getElementById("cmd").headerText="Image Name";
                    }
                </script>

Answer 1

您可以在服务器端执行此操作，而不是在 JavaScript 中执行，如下所示：

<p:column name="tty" 
   headerText="#{homeBean.selectedLogicalServer.os eq 'Windows' ? 'Session Name' : 'TTY'}">
     <h:outputText value="#{process.tty}" />
</p:column>

我不确定语法，但应该可以达到那种效果。

使用 JavaScript 更改数据表中的 header 列

Change header of columns in a dataTable with JavaScript

javascript

html

scripting

xhtml