0

私は Primefaces の初心者です....そして、例の DragDrop - Native Primefaces を作成しようとしました。

この例に関連するすべてのクラスと xhtml ファイルを投稿します。

任意の列をドラッグできますが、ドロップ プロパティが機能しません....

このリンクで問題を示す画像を見ることができますhttps://lh3.googleusercontent.com/clMOtntqI99ltjXGYpzUGt-8yg4N8ahtQQIBT5leNA=w314-h207-p-no

最初のファイルは dndColumns.xhtml です

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui">
   <h:head>
      <title>dndColumns</title>
   </h:head>
   <body>
      <h:form id="form">  

    <p:remoteCommand name="updateColumns" actionListener="#{tableBean.onColumnDrop}" 
                     update="cars" oncomplete="initDND()"/>  

    <p:tree id="tree" value="#{tableBean.availableColumns}" var="column">  
        <p:treeNode>  
            <h:outputText value="#{column}" />  
          </p:treeNode>  

    <p:treeNode type="column" icon="ui-icon-grip-dotted-vertical">  
        <h:outputText value="#{column.property}" />  
    </p:treeNode>  
</p:tree>  

<p:dataTable id="cars" var="car" value="#{tableBean.carsSmall}">                      
    <p:columns value="#{tableBean.columns}" var="column">  
        <f:facet name="header">  
       <h:outputText style="float:left;display:block;height:12px;width:10px;border:0 none;" 
                     styleClass="droppoint dropleft" />                             
       <h:outputText style="float:right;display:block;height:12px;width:10px;border:0 none;" 
                     styleClass="droppoint dropright" />  
       <h:outputText value="#{column.header}" />  
        </f:facet>  

        <h:outputText value="#{car[column.property]}" />  
    </p:columns>  

</p:dataTable>  

<script type="text/javascript">  
    function initDND() {  
        $('.ui-treenode-leaf').draggable({  
           helper: 'clone',  
           scope: 'treetotable',  
           zIndex: ++PrimeFaces.zindex  
        });  

        $('.ui-datatable .droppoint').droppable({  
           activeClass: 'ui-state-active',  
           hoverClass: 'ui-state-highlight',  
           tolerance: 'pointer',  
           scope: 'treetotable',  
           drop: function(event, ui) {  
               var property = ui.draggable.find('.ui-treenode-label').text(),  
               droppedColumnId = $(this).parents('th:first').attr('id'),  
               dropPos = $(this).hasClass('dropleft') ? 0 : 1;  

               treeToTable([  
                    {name: 'property', value:  property}  
                   ,{name: 'droppedColumnId', value: droppedColumnId}  
                   ,{name: 'dropPos', value: dropPos}  
               ]);  
           }  
        });  

        $('.ui-datatable th').draggable({  
           helper: 'clone',  
           scope: 'tabletotree',  
           helper: function() {  
               var th = $(this);  

               return th.clone().css('width', th.width());  
           }  
        });  

        $('.ui-tree').droppable({  
           helper: 'clone',  
           scope: 'tabletotree',  
           activeClass: 'ui-state-active',  
           hoverClass: 'ui-state-highlight',  
           tolerance: 'touch',  
           drop: function(event, ui) {                                 
               tableToTree([  
                   {name: 'colIndex', value:  ui.draggable.index()}  
               ]);  
           }  
        });  
    }  

    $(function() {  
        initDND();  
    });  
</script>  
<hr/>
<p:menu>
   <p:submenu label="Resources">
   <p:menuitem value="Demo" url="http://www.primefaces.org/showcase-labs/ui/dndColumns.jsf" />
  </p:submenu>
</p:menu>
</h:form> 
</body>
</html>

2 番目のファイルは TableBean.java です。

package org.sagarpa.src.managedBean;

import java.io.Serializable;  
import java.util.Arrays;  
import java.util.ArrayList;  
import java.util.Date;  
import java.util.List;  
import java.util.Map;  
import java.util.UUID;  
import java.util.logging.Logger;  

import javax.faces.context.FacesContext;  
import org.primefaces.model.DefaultTreeNode;  
import org.primefaces.model.TreeNode;  

import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;

// import org.primefaces.examples.domain.Car;
import org.sagarpa.src.bean.Car;  

@ManagedBean
@SessionScoped
public class TableBean implements Serializable {  

private final static List<String> VALID_COLUMN_KEYS = Arrays.asList("model", "manufacturer", "year", "color");  

private final static String[] colors;  

private final static String[] manufacturers;  

private String columnTemplate = "model manufacturer year";  

static {  
    colors = new String[10];  
    colors[0] = "Black";  
    colors[1] = "White";  
    colors[2] = "Green";  
    colors[3] = "Red";  
    colors[4] = "Blue";  
    colors[5] = "Orange";  
    colors[6] = "Silver";  
    colors[7] = "Yellow";  
    colors[8] = "Brown";  
    colors[9] = "Maroon";  

    manufacturers = new String[10];  
    manufacturers[0] = "Mercedes";  
    manufacturers[1] = "BMW";  
    manufacturers[2] = "Volvo";  
    manufacturers[3] = "Audi";  
    manufacturers[4] = "Renault";  
    manufacturers[5] = "Opel";  
    manufacturers[6] = "Volkswagen";  
    manufacturers[7] = "Chrysler";  
    manufacturers[8] = "Ferrari";  
    manufacturers[9] = "Ford";  
    }  

private List<Car> carsSmall;  

private List<Car> carsLarge;  

private List<ColumnModel> columns = new ArrayList<ColumnModel>();  

private TreeNode availableColumns;  

public TableBean() {  
    carsSmall = new ArrayList<Car>();  

    populateRandomCars(carsSmall, 9);  
    createDynamicColumns();  
    createAvailableColumns();  
}  

private void populateRandomCars(List<Car> list, int size) {  
    for(int i = 0 ; i < size ; i++)  
        list.add(new Car(getRandomModel(), getRandomYear(), getRandomManufacturer(),         getRandomColor()));  
}  

public List<Car> getCarsSmall() {  
    return carsSmall;  
}  

private int getRandomYear() {  
    return (int) (Math.random() * 50 + 1960);  
}  

private String getRandomColor() {  
    return colors[(int) (Math.random() * 10)];  
}  

private String getRandomManufacturer() {  
    return manufacturers[(int) (Math.random() * 10)];  
}  

private String getRandomModel() {  
    return UUID.randomUUID().toString().substring(0, 8);  
}  

public List<ColumnModel> getColumns() {  
    return columns;  
}  

private void createAvailableColumns() {  
    availableColumns = new DefaultTreeNode("Root", null);  
    TreeNode root = new DefaultTreeNode("Columns", availableColumns);  
    root.setExpanded(true);  
    TreeNode model = new DefaultTreeNode("column", new ColumnModel("Model", "model"), root);  
    TreeNode year = new DefaultTreeNode("column", new ColumnModel("Year", "year"), root);  
    TreeNode manufacturer = new DefaultTreeNode("column", new ColumnModel("Manufacturer", "manufacturer"), root);  
    TreeNode color = new DefaultTreeNode("column", new ColumnModel("Color", "color"), root);  
}  

public TreeNode getAvailableColumns() {  
    return availableColumns;  
}  

public void createDynamicColumns() {  
    String[] columnKeys = columnTemplate.split(" ");  
    columns.clear();        

    for(String columnKey : columnKeys) {  
        String key = columnKey.trim();  

        if(VALID_COLUMN_KEYS.contains(key)) {  
            columns.add(new ColumnModel(columnKey.toUpperCase(), columnKey));  
        }  
    }  
}  

public void treeToTable() {  
    Map<String,String> params = FacesContext.getCurrentInstance().getExternalContext().getRequestParameterMap();  
    String property = params.get("property");  
    String droppedColumnId = params.get("droppedColumnId");  
    String dropPos = params.get("dropPos");  

    String[] droppedColumnTokens = droppedColumnId.split(":");  
    int draggedColumnIndex = Integer.parseInt(droppedColumnTokens[droppedColumnTokens.length - 1]);  
    int dropColumnIndex = draggedColumnIndex + Integer.parseInt(dropPos);  

    //add to columns  
    this.columns.add(dropColumnIndex, new ColumnModel(property.toUpperCase(), property));  

    //remove from nodes  
    TreeNode root = availableColumns.getChildren().get(0);  
    for(TreeNode node : root.getChildren()) {  
        ColumnModel model = (ColumnModel) node.getData();  
        if(model.getProperty().equals(property)) {  
            root.getChildren().remove(node);  
            break;  
        }  
    }  
}  

public void tableToTree() {  
    Map<String,String> params = FacesContext.getCurrentInstance().getExternalContext().getRequestParameterMap();  
    int colIndex = Integer.parseInt(params.get("colIndex"));  

    //remove from table  
    ColumnModel model = this.columns.remove(colIndex);  

    //add to nodes  
    TreeNode property = new DefaultTreeNode("column", model, availableColumns.getChildren().get(0));  
}  

static public class ColumnModel implements Serializable {  

    private String header;  
    private String property;  

    public ColumnModel(String header, String property) {  
        this.header = header;  
        this.property = property;  
    }  

    public String getHeader() {  
        return header;  
    }  

    public String getProperty() {  
        return property;  
    }  
}  
}

3 番目と最後のファイルは Car.java です。

package org.sagarpa.src.bean;

//    import java.util.Date;

public class Car {

    private String model;
    private int year;
    private String manufacturer;
    private String color;

    public Car(String model, int year, String manufacturer, String color) {
            this.model = model;
            this.year = year;
            this.manufacturer = manufacturer;
            this.color = color;
    }

    public String getModel() {
            return model;
    }

    public void setModel(String model) {
            this.model = model;
    }

    public int getYear() {
            return year;
    }

    public void setYear(int year) {
            this.year = year;
    }

    public String getManufacturer() {
            return manufacturer;
    }

    public void setManufacturer(String manufacturer) {
            this.manufacturer = manufacturer;
    }

    public String getColor() {
            return color;
    }

    public void setColor(String color) {
            this.color = color;
    }
}

テーブルまたは列領域の四角形にドロップできないため、コンポーネントをドラッグしたいときに問題が発生します。

お願いします....コードを完成させるのを手伝ってくれませんか??? 任意の提案???

よろしく...

4

2 に答える 2

0

私はまだ私の問題を解決しました....

最初のファイルに変更を加えるのは dndColumns.xhtml だけです

この行を置き換える必要があります。

<p:remoteCommand name="updateColumns" actionListener="#{tableBean.onColumnDrop}" update="cars" oncomplete="initDND()"/>

他の次の 2 行の場合:

<p:remoteCommand name="treeToTable" actionListener="#{tableBean.treeToTable}" update="tree cars" oncomplete="initDND()"/>
<p:remoteCommand name="tableToTree" actionListener="#{tableBean.tableToTree}" update="tree cars" oncomplete="initDND()"/>

で、再テスト……。

素晴らしい....！！！！！！

于 2013-11-07T18:54:33.237 に答える