如何一次打开 p:inplace 中的多个组件

Question

我需要在单击 h:commandLink

时将所有组件设置为可编辑

这是我的代码

<p:dataTable styleClass="borderless" id="projectsTable" var="o" value="#{order.orderList}">
<p:column>
<div class="tasks">
    <div class="task-item task-success"> 
        <h:form>
            <div class="task-text">

                <div class="form-group">  
                    <h:outputLabel for="projectName" value="Project Name:" />
                    <p:inplace  effectSpeed="fast" editor="true">
                        <p:inputText  styleClass="form-control" value="#{o.productName}" required="true" label="text" />
                    </p:inplace>                             
                </div>

                <div class="form-group">  
                    <h:outputLabel for="projectURL" value="Project URL:" />
                    <p:inplace  effectSpeed="fast" editor="true">
                        <p:inputText  styleClass="form-control" value="#{o.price}" required="true" label="text" />
                    </p:inplace>                             
                </div>
            </div>
            <div class="task-footer">
                <div class="pull-left">
                    <h:commandLink   >
                        <span class="glyphicon glyphicon-ok-circle" aria-hidden="true"></span> EDIT
                    </h:commandLink>
                </div>
                <div class="pull-right">
                    <h:commandLink  action="#{order.deleteAction(o)}" >
                        <span class="glyphicon glyphicon-remove-circle" aria-hidden="true"></span> Delete
                    </h:commandLink>
                </div>
            </div> 
        </h:form>
    </div>
</div>

那是 link 我需要点击它并打开所有 h:inputText

<h:commandLink   action="#{order.update(o)}">
   <span class="glyphicon glyphicon-ok-circle" aria-hidden="true">
   </span> EDIT
</h:commandLink>

例如linkedIn在editProfile页面点击按钮出现所有可编辑组件

示例：

Befor click button

After clicked button

Answer 1

午休的时候很好奇，就匆匆看了一眼

我查看了第一项 the showcase 中 生成的 来源：

<span id="j_idt88:basic" class="ui-inplace ui-hidden-container" data-widget="widget_j_idt88_basic">
  <span id="j_idt88:basic_display" class="ui-inplace-display" style="display:inline">Edit Me</span>
  <span id="j_idt88:basic_content" class="ui-inplace-content" style="display:none">
    <input id="j_idt88:j_idt91" name="j_idt88:j_idt91" value="Edit Me" class="ui-inputfield ui-inputtext ui-widget ui-state-default ui-corner-all" role="textbox" aria-disabled="false" aria-readonly="false" type="text" />
  </span>
</span>

我注意到每个组件上都有 class='ui-inplace-display' class。以下jquery代码选择了所有可以点击的inplace组件：

$('.ui-inplace-display')

我在 FireFox 开发人员控制台中尝试了此操作，结果如下：

Object { length: 5, prevObject: Object, context: HTMLDocument → inplace.xhtml, selector: ".ui-inplace-display", 5 more… }

我知道您可以通过单击一个项目来启用编辑，因此我必须找到一种方法来单击每个项目。幸运的是，您只需将 .click() 附加到选择器即可单击它们中的每一个。它将应用于每个组件：

$('.ui-inplace-display').click()

如前所述，您不需要任何 jsf 按钮，只需一个普通的 html 按钮即可在 onlclick 中执行 javascript：

<input onclick="$('.ui-inplace-display').click()" value="Click to edit" type="button">

完美运行。

如您所见，在深入使用更复杂的框架之前学习网络开发的基础知识是值得的，因为没有框架可以解决您的所有问题，并且有时（比您想象的更频繁），您确实需要有点低级javascript

Answer 2

首先，每个 PrimeFaces 组件都有一个 javascript 表示，可以通过 widgetVar 访问。

Inplace 的小部件有一个名为 show() 的方法，您可以使用它来显示输入字段。检查此代码：

<p:inplace ... widgetVar="myinplace">
    <p:inputText ... />
</p:inplace>

<!-- this button's click will show the input -->
<button onclick="myinplace.show()">Click Me</button>

我建议您为 inplace 组件设置 widgetVar 属性，并在您可以随处使用的函数中对每个组件调用 show 方法：

<script>
function showInplaces() {
    myinplace1.show();
    myinplace2.show();
    ...
}

干杯

如何一次打开 p:inplace 中的多个组件

How to open multiple component in p:inplace at once

jsf

primefaces

jsf-2.2