1

我正在创建一个板，我可以在其中放置对象并希望动态地进行操作。

我想要的是这样的：

<p:outputPanel id="ASlot1" styleClass="slot">  
    <p:droppable tolerance="fit" activeStyleClass="slotActive" scope="PC1" datasource="availableComputers">  
        <p:ajax listener="#{sampleUI.onDrop}" update="selectedComputers" />  
    </p:droppable>  
</p:outputPanel>

支持豆：

HtmlPanelGroup panel;
OutputPanel table [][] = new OutputPanel[x][y];
Panel p = new Panel();

for (int i = 0; i < x; i++) {
    for (int j = 0; j < y; j++) {
        table[i][j] = new OutputPanel();
        table[i][j].setId(tableConcat+i+j);
        table[i][j].setStyle(" background:#444444; width:100px; height:100px; display:block; boarder-style: solid;");
        grid.getChildren().add(table[i][j]);
    }
}

panel.getChildren().add(grid);

p.setId("pnel");
panel.getChildren().add(p);

RequestContext requestContext = RequestContext.getCurrentInstance();
requestContext.update("panelForm");

JSF 页面：

<h:form id="panelForm">
    <h:panelGroup id="panelIt" binding="#{pane.panel}"/>
</h:form>

我将在我的支持 bean 中添加什么？

编辑：

所以我添加了这个

 Droppable d = new Droppable();

 d.setScope("PCName");
 d.setDatasource("availableComputers");
 d.setActiveStyleClass("slotActive");
 d.setOnDrop("handleDrop");
 d.setTolerance("fit");

然后把每一个放在动态创建的输出面板中

d.getChildren().add(table[i][j]);

它似乎不起作用。

4

1 回答 1

0

首先，您需要拖动某物。为了能够放下它，所以我将按照展示示例进行操作：

<p:panel header="Squad">  
            <p:dataGrid id="availablePlayers" value="#{barcelona.players}" var="player" columns="4">  
                <p:column>  
                    <p:graphicImage id="player" value="/images/barca/#{player.photo}" styleClass="playerImage"/>  

                    <p:draggable for="player" revert="true" scope="#{player.position}" stack=".playerImage"/>  
                </p:column>  
            </p:dataGrid>  
        </p:panel>

在这里，它有一个dataGrid完整的播放器模式类（pojo），p:draggable并使这些图像可拖动。当您实现p:droppable并p:ajax在其中实现时，可以通过以下方式调用支持 bean 方法并获取丢弃的玩家 id：

<p:ajax listener="#{barcelona.onDrop}" update="selectedPlayers growl" />

所有你需要实现的onDrop方法：

public void onDrop(DragDropEvent event) {  
    Player player = (Player) event.getData();  
    selectedPlayers.add(player);  
    FacesContext.getCurrentInstance().addMessage(null, new FacesMessage(player.getName() + " added", "Position:" + event.getDropId()));  
}

在这里，它获取我们已删除的特定播放器并添加FacesMessage将显示在咆哮声中的特定播放器。你可以做任何你想做的事情，让那个特定的玩家去数据库并保存它等等。

如果您想获得多个输出面板的可放置技能，您应该通过以下方式通知客户端：

RequestContext.getCurrentInstance().addCallbackParam("x", x);
RequestContext.getCurrentInstance().addCallbackParam("y", y);

然后用某物。类似于下面的 js 函数在构建输出面板时调用它：

function gainDroppable() {
    var x = '#{sampleUI.x}';
    var y = '#{sampleUI.x}';
    for (int i = 0; i < x; i++) {
        for (int j = 0; j < y; j++) {
        $(element) = $(document.getElementById('table:'+x+'outputPanel'+'y');
        element.append('<p:droppable tolerance=&quot;fit&quot; activeStyleClass=&quot;slotActive&quot; scope=&quot;PC1&quot; datasource=&quot;availableComputers&quot;>  
        <p:ajax listener=&quot;#{sampleUI.onDrop}&quot; update=&quot;selectedComputers&quot; />  
    </p:droppable> ');
        }
    }
}

您肯定应该更改有关上层功能的一些事情，因为我不知道您的确切客户端代码是什么，因此客户端 ID 生成应该与document.getElementById.

但这是你应该遵循的方式。实际上在服务器端生成输出面板可能是有害的，并且将来会出现很多问题，所以我建议摆脱 Java 上的客户端代码并尝试通过 javascript 实现类似的代码。

于 2013-04-23T14:09:16.667 回答