在嵌套数据表中拖放

Posted 2023-05-08

【中文标题】在嵌套数据表中拖放

【英文标题】：Drag and Drop in nested dataTables

【发布时间】：2014-06-24 04:54:40

【问题描述】：

我使用的是 primeface 4.0。

primeface showcase 仅显示如何将draggable 拖入droppable。 但是然后如何将draggable 拖出 那个droppable 从未提及。

我想制作一个数据表：

每个td 包含一个droppable 面板，其中多个draggable 既可以拖入也可以拖出。 一个back bean对象，它“保留”这个dataTable的数据，我假设如果dataTable是2*2，那么back bean中会有4个List，每个存储一个draggable对应@987654331对象的列表@ 区域。

有点像p:schedule 的简单版本，它允许在单元格之间拖放事件。

我的努力：

我设法使一些功能正常工作，例如拖入droppable

但是我不能使拖动的draggable 删除，因为p:draggable 中没有ajax 事件drag 将数据传回bean，就像我在p:droppable 中所做的drop 事件一样。（有一种方法可以使用JQuery 可拖动事件start 和stop 将col 和row num 传递给back bean，但我不确定这是一个好方法去）

我不认为我的实现是正确的方法，因为有一些奇怪的错误，比如有时我从ddEvent.getData() 得到的拖动对象不是正确的. （我想这与p:droppable的唯一数据源有关。Issue1469）

---

更新： 我认为主要问题是p:droppable 只绑定一个数据源，所以ddEvent.getData() 总是会从绑定的数据源中获取“对象”，我的问题是我有 multiple droppable 区域并且每个都需要绑定多个数据源 .

---

。 可惜不能发截图……

这是我的代码： xml: 转移 ...

<p:columns value="#scheduleControler.weekdays" var="date"
    styleClass="schedule_date" columnIndexVar="colIndex">
    <f:facet name="header">
        <h:outputText value="#scheduleControler.weekdays[colIndex]">
            <f:convertDateTime pattern="EEE, dd MMM" />
        </h:outputText>
    </f:facet>
    <!-- Droppable:   -->
    <p:outputPanel id="dropArea">
        <p:outputPanel id="dropped">
            <p:dataTable var="shift2"
                value="#scheduleControler.getDailyShift(employee.id,date)"
                rendered="#not empty scheduleControler.getDailyShift(employee.id,date)">
                <p:column>
                    <p:outputPanel id="shiftBlock2" styleClass="shift_block"
                        style="background-color: \##shift2.color">
                        <h:outputText value="#shift2.name" />
                    </p:outputPanel>

                    <p:draggable for="shiftBlock2" opacity="0.5" revert="true">
                    </p:draggable>
                </p:column>

            </p:dataTable>
        </p:outputPanel>
    </p:outputPanel>
    <!-- Config Droppable: update entire table, pass additional param by attributes -->
    <p:droppable for="dropArea" tolerance="intersect"
        activeStyleClass="ui-state-highlight" datasource=":shiftTable">
        <f:attribute name="weekday" value="#date" />
        <f:attribute name="eid" value="#employee.id" />
        <p:ajax event="drop" listener="#scheduleControler.onShiftDrop"
            update=" :centerForm:scheduleTbale" />

    </p:droppable>
</p:columns>

回豆：

 public List<ShiftDto> getDailyShift(String eid, Date date) 
            return this.tmpSchedule.getShifts(eid).get(date);
        
    public void onShiftDrop(DragDropEvent ddEvent) 
            ShiftDto shift = ((ShiftDto) ddEvent.getData());
            Date weekday = (Date) ddEvent.getComponent().getAttributes()
                    .get("weekday");
            String eid = (String) ddEvent.getComponent().getAttributes().get("eid");
            System.out.println("onShiftDrop: " + shift);
            System.out.println("dropedDate: " + weekday);
            System.out.println("dropedEmployee: " + eid);

            this.tmpSchedule.addShift(eid, weekday, shift);

        

tmpSchedule 只是一个类似于容器的地图，其中包含每个员工的每周轮班。

【参考方案1】：

您始终可以将拖放从一个容器拖到另一个容器。

将 p:table 或 p:panel 中的可拖动行说成 ap:panelgrid（A 侧）到 Droppable p:outPanel（B 侧）你将维护两个 List，一个用于 A 侧，另一个用于 B 侧.

并使 A 端可放置，B 端可拖动以具有循环拖放行为（两者都将充当彼此可放置标签的数据源）并使用 ddEvent.getData 来添加和删除控制器端的对象列表。

对于上述要求，您可以实现一个 panelGrid 并拥有多个这样的关系。

或

使用 dragabblerows = "true" 和 draggableColumns="true" 来处理 P:table 参数中的行和列。 :p