4

p：dataTableを試してみました。そこに3つの列があります。2番目の列にはコマンドボタンがあり、クリックすると3番目の列のそれぞれの行に入力ボックスが表示されます。3列目の入力ボックスが設定されましたstyle="display：none"

MY xhtml

<h:form>
    <p:dataTable var="name" value="#{model.namelist}" rowIndexVar="rowIndex">
        <p:column>
                <h:outputText value="#{name} -----"></h:outputText>
        </p:column>
        <p:column>
                <p:commandButton value="click" onclick="som_#{rowIndex}.show();"></p:commandButton>
        </p:column>
        <p:column>
        <p:inputText widgetVar="som_#{rowIndex}" style="display:none">
                </p:inputText>                  
        </p:column>

    </p:dataTable>
    </h:form>

うまくいくはずだと思いますが、どこでミスをしているのかわかりません。

4

1 に答える 1

6

あなたのコードを実行するとsom_0.show、関数ではないようにjsでエラーが発生しました。widgetVarはelをサポートしていないと思います。そのため、コードは機能しません。しかし、これで問題は解決するはずです。

<h:form>
    <p:dataTable var="name" value="#{model.nameList}" rowIndexVar="rowIndex">
        <p:column>
            <h:outputText value="#{name} -----"></h:outputText>
        </p:column>
        <p:column>
            <p:commandButton value="click" onclick="$('.som_#{rowIndex}').show();"/>
        </p:column>
        <p:column>
            <p:inputText styleClass="som_#{rowIndex}" style="display:none"/>
        </p:column>

    </p:dataTable>
</h:form>

styleClassサポートとしてel。styleClassだから私は少しのjQueryで同じことをしました。

編集：

おそらく、コードのどこかに次の行を追加する必要があります。

<h:outputScript library="primefaces" name="jquery/jquery.js" />

編集：

これが動的widgetVarバージョンです。

<h:form>
    <p:dataTable var="name" value="#{so15320268.nameList}" rowIndexVar="rowIndex" widgetVar="table">
        <p:column>
            <h:outputText value="#{name} -----"></h:outputText>
        </p:column>
        <p:column>
            <p:commandButton value="click" onclick="textVar_#{rowIndex}.getJQ().show();"/>
        </p:column>
        <p:column>
            <p:inputText styleClass="som_#{rowIndex}" widgetVar="textVar_#{rowIndex}" style="display:none"/>
        </p:column>
    </p:dataTable>                                  
</h:form>

Primefacesのjsソースを掘り下げた後、私はのようなshow方法がないことを知りました。したがって、jQueryオブジェクトをから抽出する必要があります。これはまたは;で実行できます。これら2つは次のように定義されています。PrimeFaces.widget.InputTextPrimeFaces.widget.DialogwidgetVarwidgetVar.getJQ()widgetVar.jqPrimeFaces.widget.BaseWidget

PrimeFaces.widget.BaseWidget = Class.extend({

    init: function(cfg) {
        this.cfg = cfg;
        this.id = cfg.id;
        this.jqId = PrimeFaces.escapeClientId(this.id),
        this.jq = $(this.jqId);

        //remove script tag
        $(this.jqId + '_s').remove();
    },

    //used mostly in ajax updates, reloads the widget configuration
    refresh: function(cfg) {
        return this.init(cfg);
    },

    //returns jquery object representing the main dom element related to the widget
    getJQ: function(){
        return this.jq;
    }

});

以前のコメントは間違っているので取り消し線を引いています。widgetVarelをサポートします。それがお役に立てば幸いです。

于 2013-03-10T08:47:25.207 に答える