primefaces - 具有多个目的地的 Primefaces DragDrop DataTable

Question

我有一个 Employee 类，我想通过拖放将人员分布在不同的列表中。应使用按钮动态创建目标位置（即框）。我也想删除元素和框（列表）。

如何使用 primefaces 定义多个目标位置？

我的示例是PrimeFaces DataTable的简化版本。

这是我想要的示例照片： 示例图表

public class Employee {
    private String id;
    private String name;
    private String dept;

    // getters, setters, constructor
}

@Named
@ViewScoped
public class EmployeeBean implements Serializable {

    @Inject
    private EmployeeService service;

    private List<Employee> employees;

    private List<Employee> droppedEmployees;

    private Employee selectedEmployee;

    @PostConstruct
    public void init() {
        employees = service.getEmployees(5);
        droppedEmployees = new ArrayList<>();
    }

    public void onEmployeeDrop(DragDropEvent<Employee> ddEvent) {
        Employee employee = ddEvent.getData();

        droppedEmployees.add(employee);
        employees.remove(employee);
    }

    public void setService(EmployeeService service) {
        this.service = service;
    }

    public List<Employee> getEmployees() {
        return employees;
    }

    public List<Employee> getDroppedEmployees() {
        return droppedEmployees;
    }

    public Employee getSelectedEmployees() {
        return selectedEmployee;
    }

    public void setSelectedEmployees(Employee selectedEmployee) {
        this.selectedEmployee = selectedEmployee;
    }
}

@Named
@ApplicationScoped
public class EmployeeService {

    List<Employee> employees;

    @PostConstruct
    public void init() {
        employees = new ArrayList<>();
        employees.add(new Employee(1000, "f230fh0g3","Person 1"));
        employees.add(new Employee(1001, "nvklal433","Person 2"));
        employees.add(new Employee(1002, "zz21cz3c1","Person 3"));
        employees.add(new Employee(1003, "244wgerg2","Person 4"));
        employees.add(new Employee(1004, "h456wer53","Person 5"));
        employees.add(new Employee(1005, "av2231fwg","Person 6"));
    }

    public List<Employee> getEmployees() {
        return new ArrayList<>(employees);
    }

    public List<Employee> getEmployees(int size) {

        if (size > employees.size()) {
            Random rand = new Random();

            List<Employee> randomList = new ArrayList<>();
            for (int i = 0; i < size; i++) {
                int randomIndex = rand.nextInt(employees.size());
                randomList.add(employees.get(randomIndex));
            }

            return randomList;
        }

        else {
            return new ArrayList<>(employees.subList(0, size));
        }

    }

    public List<Employee> getClonedEmployees(int size) {
        List<Employee> results = new ArrayList<>();
        List<Employee> originals = getEmployees(size);
        for (Employee original : originals) {
            results.add(original.clone());
        }
        return results;
    }
}

<script type="text/javascript">
    function handleDrop(event, ui) {
        var droppedEmployees = ui.draggable;
        droppedEmployees.fadeOut('fast');
    }
</script>

<div class="card">
    <h:form id="employeeForm">
        <h5 class="p-mt-0">Available Employees</h5>
        <p:dataTable id="availableEmployees" var="employee" value="#{employeeBean.employees}">
            <p:column headerText="Name">
                <h:outputText id="name" value="#{employee.name}"/>
                <p:draggable for="name" revert="true" helper="clone" icon="#{icon.search}"/>
            </p:column>
        </p:dataTable>

        <p:fieldset id="selectedEmployees" legend="Selected Employees" style="margin-top:20px">
            <p:outputPanel id="dropArea">
                <p:dataTable id="selectedEmployeeTable" var="employee" value="#{employeeBean.droppedEmployees}"
                             rendered="#{not empty employeeBean.droppedEmployees}">
                    <p:column>
                        <h:outputText value="#{employee.name}"/>
                    </p:column>
                </p:dataTable>
            </p:outputPanel>
        </p:fieldset>

        <p:droppable for="selectedEmployees" tolerance="touch" activeStyleClass="ui-state-highlight"
                     datasource="availableEmployees" onDrop="handleDrop">
            <p:ajax listener="#{employeeBean.onEmployeeDrop}" update="dropArea availableEmployees"/>
        </p:droppable>

        <p:dialog header="Employee Detail" widgetVar="employeeDialog" resizable="false" draggable="true"
                  showEffect="fade" hideEffect="fade" modal="true">
            <p:outputPanel id="display">
                <p:column rendered="#{not empty employeeBean.selectedEmployees}">
                    <div class="employee">
                        <div class="employee-grid-item card" style="margin-bottom: 0">
                            <div class="employee-grid-item-top">
                                <div>
                                    <i class="pi pi-tag employee-category-icon"/>
                                </div>
                            </div>
                            <div class="product-grid-item-content">
                                <div class="product-name">#{employeeBean.selectedEmployees.name}</div>
                            </div>
                        </div>
                    </div>
                </p:column>
            </p:outputPanel>
        </p:dialog>
    </h:form>
</div>

标签： primefaces