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>

该链接我需要点击它并打开所有h：inputText

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

如在editProfile页面中的linkedIn，当点击按钮时出现所有可编辑的组件

示例：

Befor click button

After clicked button

Answer 1

首先，每个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();
    ...
}

干杯

Answer 2

在午餐期间我很好奇，所以我确实快速看了一下。

我查看了第一项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'类。以下jquery代码选择可以单击的所有就地组件：

$('.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">

完美无缺。

正如您所看到的，在开始使用更复杂的框架之前，了解Web开发的基础知识是值得的，因为没有任何框架可以解决您的所有问题并且不时（更常见的是您认为），您需要一点点低级javascript

如何在p：inplace中一次打开多个组件

2 个答案: