0

データの表示とデータの編集に使用するJSFテーブルがあります。

<table>
    <ui:repeat var="ud" value="#{DCProfileTabGeneralController.dcData}">

        <tr>
            <td>Datacenter Type</td>
            <td>
                <h:outputText value="#{ud.type}" 
                              rendered="#{not DCProfileTabGeneralController.editable}" />
                <h:inputText value="#{ud.type}" rendered="#{DCProfileTabGeneralController.editable}" />
            </td>                                    
        </tr>
        <tr>
            <td>Date Added</td>
            <td>
                <h:outputText value="#{ud.dateAdded}" 
                              rendered="#{not DCProfileTabGeneralController.editable}" />
                <h:inputText styleClass="datepicker" value="#{ud.dateAdded}" rendered="#{DCProfileTabGeneralController.editable}" />
            </td>                                    
        </tr>
        <tr>
            <td>Hour Added</td>
            <td>
                <h:outputText value="#{ud.hourAdded}" 
                              rendered="#{not DCProfileTabGeneralController.editable}" />
                <h:inputText value="#{ud.hourAdded}" rendered="#{DCProfileTabGeneralController.editable}" />
            </td>                                    
        </tr>
        <tr>
            <td>Date Deployed</td>
            <td>
                <h:outputText value="#{ud.dateDeployed}" 
                              rendered="#{not DCProfileTabGeneralController.editable}" />
                <h:inputText styleClass="datepicker" value="#{ud.dateDeployed}" rendered="#{DCProfileTabGeneralController.editable}" />
            </td>                                    
        </tr>
        <tr>
            <td>Hour Deployed</td>
            <td>
                <h:outputText value="#{ud.hourDeployed}" 
                              rendered="#{not DCProfileTabGeneralController.editable}" />
                <h:inputText value="#{ud.hourDeployed}" rendered="#{DCProfileTabGeneralController.editable}" />
            </td>                                    
        </tr>

    </ui:repeat>
</table>

このソリューションは正常に機能しますが、このように拡張したいと思います。編集フラグをtrueに設定するボタンをクリックしたいと思います。テーブルの値の上にマウスを移動すると、outputTextがinputTextに変わります。

そしてもう1つ簡単な質問です。グローバルにすべてのフィールドに下部パディングを追加するにはどうすればよいですか？

4

1 に答える 1

0

Richfacesライブラリを使用<rich:inplaceInput>し、以下のようにコンポーネントを使用することをお勧めします。

<rich:inplaceInput value="hhhh" editEvent="onmouseover"/>

ただし、これに固執したい場合javascriptは、これがコンセプトです。

<h:form id="myForm">
  <h:outputText value="aaa" id="outText"/><br/>
  <h:inputText value="aaa" style="display:none;" id="inText" />
</h:form>

これがjavascriptコードです

<script>
    window.onload = function() {
        var outputText = document.getElementById("myForm:outText");
        var inputText = document.getElementById("myForm:inText");
        outputText.onmouseover = function() {
            outputText.style.display = 'none';
            inputText.style.display = '';
        }
        inputText.onblur = function() {
            outputText.style.display = '';
            inputText.style.display = 'none';
        }
    };
</script>

を使用しているため、それに応じてコードui:repeatを変更する必要があります。javascript

于 2012-12-29T05:20:18.207 に答える