如何一次打开 p:inplace 中的多个组件
How to open multiple component in p:inplace at once
我需要在单击 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
午休的时候很好奇,就匆匆看了一眼
我查看了第一项 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
首先,每个 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();
...
}
干杯
我需要在单击 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
午休的时候很好奇,就匆匆看了一眼
我查看了第一项 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
首先,每个 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();
...
}
干杯