This sample demonstrates how to extend PrimeFaces with javascript. Tree component displays the available columns which are draggable. where as column headers have drop targets and dropping a treenode onto one of these adds the related property column to the datatable. Column headers can also be moved back to the tree.
Documentation<style type="text/css"> .ui-state-active { background-color: #005b9f; } .ui-state-highlight { background-color: #007ad9; } </style> <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({ scope: 'tabletotree', helper: function() { var th = $(this); return th.clone().appendTo(document.body).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> <h:form id="form"> <p:remoteCommand name="treeToTable" action="#{columnManagerView.treeToTable}" update="tree cars" oncomplete="initDND()"/> <p:remoteCommand name="tableToTree" action="#{columnManagerView.tableToTree}" update="tree cars" oncomplete="initDND()"/> <p:tree id="tree" value="#{columnManagerView.availableColumns}" var="column" style="margin-bottom:20px"> <p:treeNode> <h:outputText value="#{column}" /> </p:treeNode> <p:treeNode type="column" icon="pi pi-ellipsis-v"> <h:outputText value="#{column.property}" /> </p:treeNode> </p:tree> <p:dataTable id="cars" var="car" value="#{columnManagerView.cars}"> <p:columns value="#{columnManagerView.columns}" var="column"> <f:facet name="header"> <h:outputText style="float:left;display:block;height:20px;width:10px;border:0 none;" styleClass="droppoint dropleft" /> <h:outputText style="float:right;display:block;height:20px;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> </h:form>
@Named @ViewScoped public class ColumnManagerView implements Serializable { private final List<String> VALID_COLUMN_KEYS = Arrays.asList("id", "brand", "year", "color"); private List<ColumnModel> columns = new ArrayList<ColumnModel>(); private List<Car> cars; private TreeNode availableColumns; @Inject private CarService service; @PostConstruct public void init() { cars = service.createCars(9); createAvailableColumns(); createDynamicColumns(); } private void createAvailableColumns() { availableColumns = new DefaultTreeNode("Root", null); TreeNode root = new DefaultTreeNode("Columns", availableColumns); root.setExpanded(true); TreeNode model = new DefaultTreeNode("column", new ColumnModel("Id", "id"), root); TreeNode year = new DefaultTreeNode("column", new ColumnModel("Year", "year"), root); TreeNode manufacturer = new DefaultTreeNode("column", new ColumnModel("Brand", "brand"), root); TreeNode color = new DefaultTreeNode("column", new ColumnModel("Color", "color"), root); } public void createDynamicColumns() { String[] columnKeys = new String[]{"id","year","brand"}; 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)); } public List<Car> getCars() { return cars; } public List<ColumnModel> getColumns() { return columns; } public TreeNode getAvailableColumns() { return availableColumns; } public void setService(CarService service) { this.service = service; } 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; } } }
@Named @ApplicationScoped public class CarService { private final static String[] colors; private final static String[] brands; 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"; brands = new String[10]; brands[0] = "BMW"; brands[1] = "Mercedes"; brands[2] = "Volvo"; brands[3] = "Audi"; brands[4] = "Renault"; brands[5] = "Fiat"; brands[6] = "Volkswagen"; brands[7] = "Honda"; brands[8] = "Jaguar"; brands[9] = "Ford"; } public List<Car> createCars(int size) { List<Car> list = new ArrayList<Car>(); for(int i = 0 ; i < size ; i++) { list.add(new Car(getRandomId(), getRandomBrand(), getRandomYear(), getRandomColor(), getRandomPrice(), getRandomSoldState())); } return list; } private String getRandomId() { return UUID.randomUUID().toString().substring(0, 8); } private int getRandomYear() { return (int) (Math.random() * 50 + 1960); } private String getRandomColor() { return colors[(int) (Math.random() * 10)]; } private String getRandomBrand() { return brands[(int) (Math.random() * 10)]; } private int getRandomPrice() { return (int) (Math.random() * 100000); } private boolean getRandomSoldState() { return (Math.random() > 0.5) ? true: false; } public List<String> getColors() { return Arrays.asList(colors); } public List<String> getBrands() { return Arrays.asList(brands); } }