4

我正在尝试使用 p:dataTable。我有三列。在第二列中，我有命令按钮，当单击它时，它应该在第三列的相应行上显示输入框。第三列的输入框已设置 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>

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

4

1 回答 1

6

当我运行您的代码时，我在 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 源之后，我才知道like中没有show方法。所以你需要从后面提取jQuery对象，可以通过or来完成。这两个被定义为：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;
    }

});

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

于 2013-03-10T08:47:25.207 回答