如何在不设置面板 header 的情况下使 p:dashboard 组件可拖动
How to make p:dashboard components draggable without panel header being set
作为对此 的跟进。 p:dashboard
中的组件似乎只有在其 parent 面板具有 header 集(包含标题)时才可拖动。即使未设置 header,我该怎么做才能拖动面板?所以整个面板将成为拖动它的句柄,而不仅仅是 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 说得对,基本上归结为 handle
属性 在 JS PrimeFaces.widget.Dashboard
init
函数中被硬编码。我使用相同的代码创建了自己的 javascript 文件,但没有设置句柄 属性,然后使用 h:outputScript
在 h:body
之后包含该脚本
这是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的相关部分
<h:body>
<h:outputScript library="js" name="pfaces.js" />
...
</h:body>
作为对此 p:dashboard
中的组件似乎只有在其 parent 面板具有 header 集(包含标题)时才可拖动。即使未设置 header,我该怎么做才能拖动面板?所以整个面板将成为拖动它的句柄,而不仅仅是 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 说得对,基本上归结为 handle
属性 在 JS PrimeFaces.widget.Dashboard
init
函数中被硬编码。我使用相同的代码创建了自己的 javascript 文件,但没有设置句柄 属性,然后使用 h:outputScript
h:body
之后包含该脚本
这是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的相关部分
<h:body>
<h:outputScript library="js" name="pfaces.js" />
...
</h:body>