Question

我正在创建一个可以删除对象并希望动态执行的板。

我想拥有的是这样的：

<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>

支持Bean：

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]);

它似乎不起作用。

Answer 1

首先你需要拖动某事。能够放弃它，所以我将遵循showcase example:

<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的方法：

<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，它将显示在咆哮声中。你可以用那个特定的玩家去DB做任何你想做的事情并保存等等。

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

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

然后使用......类似于以下js函数在构造outputpanels时调用它：

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> ');
        }
    }
}

你应该肯定地改变一些关于上层函数的东西，因为我不知道你的确切客户端代码是什么，document.getElementById的客户端ID生成应该是不同的。

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

将droppable和ajax行为添加到outputPanel JSF

1 个答案: