Question

作为此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;
    }

}

Answer 1

Kukeltje说得对，基本上归结为JS handle PrimeFaces.widget.Dashboard函数中的init属性被硬编码。我使用相同的代码创建了自己的javascript文件，但没有设置handle属性，然后在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：仪表板组件可拖动而不设置面板标题

1 个答案: