如何在不设置面板标题的情况下使p:dashboard组件可拖动 [英] How to make p:dashboard components draggable without panel header being set
问题描述
作为此问题的后续措施.看来p:dashboard中的组件仅在其父面板具有标题集(包含标题)的情况下才可拖动.我如何做到这一点，即使未设置标题也可以拖动面板?因此，整个面板将是拖动它的手柄，而不仅仅是标题.
As a follow up to this question. It appears the components in a p:dashboard are only draggable if their parent panel has a header set (which contains the title). How do I make it so the panels can be dragged even if the header isn't set? So the whole panel will be the handle to drag it around, not just the header.
XHTML
<!DOCTYPE html>
<html xmlns="http://www.w3c.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:p="http://primefaces.org/ui">
<h:head>
<title>Example</title>
</h:head>
<h:body>
<h:form id="splitButtonForm">
<p:splitButton value="Action" icon="ui-icon-circle-triangle-s">
<p:menuitem value="New text entry" icon="ui-icon-newwin"
actionListener="#{dashboardView.addTextWidget}"
update="dashboardForm:dashboardPanel" />
</p:splitButton>
</h:form>
<div style="height: 500px">
<h:form id="dashboardForm">
<p:dashboard id="dashboardPanel" model="#{dashboardView.model}"
binding="#{dashboardView.dashboardPanel }">
<p:ajax event="reorder" />
</p:dashboard>
<div style="clear: both" />
</h:form>
</div>
</h:body>
</html>
还有豆子
import java.io.Serializable;
import javax.annotation.PostConstruct;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.ViewScoped;
import javax.faces.component.UIComponent;
import javax.faces.event.ActionEvent;
import org.primefaces.component.inputtext.InputText;
import org.primefaces.component.panel.Panel;
import org.primefaces.model.DashboardColumn;
import org.primefaces.model.DashboardModel;
import org.primefaces.model.DefaultDashboardColumn;
import org.primefaces.model.DefaultDashboardModel;
@SuppressWarnings("serial")
@ManagedBean
@ViewScoped
public class DashboardView implements Serializable
{
private DashboardModel model;
private UIComponent dashboardPanel;
public void addTextWidget(ActionEvent event)
{
Panel panel = new Panel();
InputText textWidget = new InputText();
int childCount = dashboardPanel.getChildCount();
String widgetId = "widget" + String.valueOf(childCount);
panel.setHeader(widgetId); //I don't want to have to do this
panel.setId(widgetId);
panel.getChildren().add(textWidget);
addWidget(widgetId);
dashboardPanel.getChildren().add(panel);
}
public void addWidget(String widgetId)
{
DashboardColumn column1 = model.getColumn(0);
column1.addWidget(widgetId);
}
public UIComponent getDashboardPanel()
{
return dashboardPanel;
}
public DashboardModel getModel()
{
return model;
}
@PostConstruct
public void init()
{
model = new DefaultDashboardModel();
DashboardColumn column1 = new DefaultDashboardColumn();
DashboardColumn column2 = new DefaultDashboardColumn();
model.addColumn(column1);
model.addColumn(column2);
}
public void setDashboardPanel(UIComponent dashboardPanel)
{
this.dashboardPanel = dashboardPanel;
}
}
推荐答案
Kukeltje正确无误，基本上可以归结为在JS PrimeFaces.widget.Dashboard init函数中硬编码的handle属性.我使用相同的代码创建了自己的javascript文件，但未设置handle属性，然后使用h:outputScript
Kukeltje had it right, basically it comes down to the handle property being hardcoded in the JS PrimeFaces.widget.Dashboard init function. I created my own javascript file with the same code but without the handle property set and then included that script after the h:body using h:outputScript
这是JavaScript
Here's the javascript
PrimeFaces.widget.Dashboard = PrimeFaces.widget.BaseWidget
.extend({
init : function(b) {
this._super(b);
this.cfg.connectWith = this.jqId + " .ui-dashboard-column";
this.cfg.placeholder = "ui-state-hover";
this.cfg.forcePlaceholderSize = true;
this.cfg.revert = false;
var a = this;
if (this.cfg.behaviors) {
var c = this.cfg.behaviors.reorder;
if (c) {
this.cfg.update = function(h, g) {
if (this === g.item.parent()[0]) {
var f = g.item.parent().children().filter(
":not(script):visible").index(g.item), i = g.item
.parent().parent().children().index(
g.item.parent());
var d = {
params : [ {
name : a.id + "_reordered",
value : true
}, {
name : a.id + "_widgetId",
value : g.item.attr("id")
}, {
name : a.id + "_itemIndex",
value : f
}, {
name : a.id + "_receiverColumnIndex",
value : i
} ]
};
if (g.sender) {
d.params.push({
name : a.id + "_senderColumnIndex",
value : g.sender.parent().children()
.index(g.sender)
})
}
c.call(a, d)
}
}
}
}
$(this.jqId + " .ui-dashboard-column").sortable(this.cfg)
}
});
以及XHTML的相关部分
And the relevant part of the XHTML
<h:body>
<h:outputScript library="js" name="pfaces.js" />
...
</h:body>
这篇关于如何在不设置面板标题的情况下使p:dashboard组件可拖动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
