如何在不设置面板标题的情况下使 p:dashboard 组件可拖动
Posted
技术标签:
【中文标题】如何在不设置面板标题的情况下使 p:dashboard 组件可拖动【英文标题】：How to make p:dashboard components draggable without panel header being set 【发布时间】：2016-03-19 16:16:18 【问题描述】：作为此question 的后续行动。 p:dashboard 中的组件似乎只有在其父面板具有标题集（包含标题）时才可拖动。即使没有设置标题，我该如何制作面板也可以拖动？所以整个面板将是拖动它的句柄，而不仅仅是标题。
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;
【问题讨论】：
解决方案：查看 PrimeFaces 源并对其进行调整... 【参考方案1】：Kukeltje 说得对，基本上它归结为 handle 属性在 JS PrimeFaces.widget.Dashboard init 函数中被硬编码。我使用相同的代码创建了自己的 javascript 文件，但没有设置句柄属性，然后在 h:body 之后使用 h:outputScript 包含该脚本
这是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 组件可拖动的主要内容，如果未能解决你的问题，请参考以下文章
如何在不先启动 IE 的情况下使我的 WinCE 应用程序中的网络工作？
如何在不需要额外点击的情况下使 DataGridCheckBoxColumn 可编辑？