jsf - 如何使用 p :dataTable to hide/show another component? 的 rowIndex

Question

我正在尝试使用 p:dataTable。在那里我有三列。在第二列中，我有命令按钮，单击它时，它应该在第三列的相应行上显示输入框。第 3 列的输入框已设置为 style="display:none"

我的 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>

我认为它应该有效，但我不知道我在哪里做错了。

Answer 1

当我运行你的代码时，我在 js 中遇到了错误，比如 som_0.show不是函数。我猜 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 PrimeFaces.widget.InputText 中的方法喜欢 PrimeFaces.widget.Dialog .所以需要从 widgetVar中提取后面的jQuery对象并且可以通过 widgetVar.getJQ() 来完成或 widgetVar.jq ;这两个已在 PrimeFaces.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;
    }

});

我已经删除了我之前的评论，因为它是错误的。 widgetVar确实支持 el。希望它会有所帮助。