Data displayed on treetable can be edited at row or cell level.
<style>
.ui-editable-column .ui-cell-editor-input {
overflow: hidden;
}
.ui-editable-column .ui-cell-editor-input * {
box-sizing: border-box;
}
</style>
<h:form id="form">
<p:growl id="msgs" showDetail="true"/>
<div class="card">
<h5>Row Editing</h5>
<p:treeTable value="#{ttEditView.root}" editable="true" var="document">
<p:ajax event="rowEdit" listener="#{ttEditView.onRowEdit}" update=":form:msgs"/>
<p:ajax event="rowEditCancel" listener="#{ttEditView.onRowCancel}" update=":form:msgs"/>
<p:column headerText="Name">
<p:cellEditor>
<f:facet name="output"><h:outputText value="#{document.name}"/></f:facet>
<f:facet name="input"><p:inputText value="#{document.name}" style="width:100%"/></f:facet>
</p:cellEditor>
</p:column>
<p:column headerText="Size">
<p:cellEditor>
<f:facet name="output"><h:outputText value="#{document.size}"/></f:facet>
<f:facet name="input"><p:inputText value="#{document.size}" style="width:100%"/></f:facet>
</p:cellEditor>
</p:column>
<p:column headerText="Type">
<p:cellEditor>
<f:facet name="output"><h:outputText value="#{document.type}"/></f:facet>
<f:facet name="input"><p:inputText value="#{document.type}" style="width:100%"/></f:facet>
</p:cellEditor>
</p:column>
<p:column style="width:6rem">
<p:rowEditor/>
</p:column>
</p:treeTable>
</div>
<div class="card">
<h5>Cell Editing</h5>
<p:treeTable value="#{ttEditView.root2}" editable="true" editMode="cell" var="document">
<p:ajax event="cellEdit" listener="#{ttEditView.onCellEdit}" update=":form:msgs"/>
<p:column headerText="Name">
<p:cellEditor>
<f:facet name="output"><h:outputText value="#{document.name}"/></f:facet>
<f:facet name="input"><p:inputText value="#{document.name}" style="width:100%"/></f:facet>
</p:cellEditor>
</p:column>
<p:column headerText="Size">
<p:cellEditor>
<f:facet name="output"><h:outputText value="#{document.size}"/></f:facet>
<f:facet name="input"><p:inputText value="#{document.size}" style="width:100%"/></f:facet>
</p:cellEditor>
</p:column>
<p:column headerText="Type">
<p:cellEditor>
<f:facet name="output"><h:outputText value="#{document.type}"/></f:facet>
<f:facet name="input"><p:inputText value="#{document.type}" style="width:100%"/></f:facet>
</p:cellEditor>
</p:column>
</p:treeTable>
</div>
<div class="card">
<h5>Cell Editing can be triggered by a custom event, like double click (dblclick)</h5>
<p:treeTable value="#{ttEditView.root2}" editable="true" editMode="cell" var="document"
editInitEvent="dblclick" style="margin-bottom:20px">
<p:ajax event="cellEdit" listener="#{ttEditView.onCellEdit}" update=":form:msgs"/>
<p:column headerText="Name">
<p:cellEditor>
<f:facet name="output"><h:outputText value="#{document.name}"/></f:facet>
<f:facet name="input"><p:inputText value="#{document.name}" style="width:100%"/></f:facet>
</p:cellEditor>
</p:column>
<p:column headerText="Size">
<p:cellEditor>
<f:facet name="output"><h:outputText value="#{document.size}"/></f:facet>
<f:facet name="input"><p:inputText value="#{document.size}" style="width:100%"/></f:facet>
</p:cellEditor>
</p:column>
<p:column headerText="Type">
<p:cellEditor>
<f:facet name="output"><h:outputText value="#{document.type}"/></f:facet>
<f:facet name="input"><p:inputText value="#{document.type}" style="width:100%"/></f:facet>
</p:cellEditor>
</p:column>
</p:treeTable>
</div>
</h:form>
@Named("ttEditView")
@ViewScoped
public class EditView implements Serializable {
private TreeNode<Document> root;
private TreeNode<Document> root2;
private TreeNode<Document> root3;
@Inject
private DocumentService service;
@PostConstruct
public void init() {
root = service.createDocuments();
root2 = service.createDocuments();
root3 = service.createDocuments();
}
public TreeNode<Document> getRoot() {
return root;
}
public TreeNode<Document> getRoot2() {
return root2;
}
public TreeNode<Document> getRoot3() {
return root3;
}
public void setService(DocumentService service) {
this.service = service;
}
public void onRowEdit(RowEditEvent<TreeNode> event) {
FacesMessage msg = new FacesMessage("Document Edited", event.getObject().toString());
FacesContext.getCurrentInstance().addMessage(null, msg);
}
public void onRowCancel(RowEditEvent<TreeNode> event) {
FacesMessage msg = new FacesMessage("Edit Cancelled", event.getObject().toString());
FacesContext.getCurrentInstance().addMessage(null, msg);
}
public void onCellEdit(CellEditEvent event) {
Object oldValue = event.getOldValue();
Object newValue = event.getNewValue();
if (newValue != null && !newValue.equals(oldValue)) {
FacesMessage msg = new FacesMessage(FacesMessage.SEVERITY_INFO, "Cell Changed", "Old: " + oldValue + ", New:" + newValue);
FacesContext.getCurrentInstance().addMessage(null, msg);
}
}
}
public class Document implements Serializable, Comparable<Document> {
private String name;
private String size;
private String type;
public Document(String name, String size, String type) {
this.name = name;
this.size = size;
this.type = type;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getSize() {
return size;
}
public void setSize(String size) {
this.size = size;
}
public String getType() {
return type;
}
public void setType(String type) {
this.type = type;
}
//Eclipse Generated hashCode and equals
@Override
public int hashCode() {
final int prime = 31;
int result = 1;
result = prime * result + ((name == null) ? 0 : name.hashCode());
result = prime * result + ((size == null) ? 0 : size.hashCode());
result = prime * result + ((type == null) ? 0 : type.hashCode());
return result;
}
@Override
public boolean equals(Object obj) {
if (this == obj) {
return true;
}
if (obj == null) {
return false;
}
if (getClass() != obj.getClass()) {
return false;
}
Document other = (Document) obj;
if (name == null) {
if (other.name != null) {
return false;
}
}
else if (!name.equals(other.name)) {
return false;
}
if (size == null) {
if (other.size != null) {
return false;
}
}
else if (!size.equals(other.size)) {
return false;
}
if (type == null) {
if (other.type != null) {
return false;
}
}
else if (!type.equals(other.type)) {
return false;
}
return true;
}
@Override
public String toString() {
return name;
}
public int compareTo(Document document) {
return this.getName().compareTo(document.getName());
}
}
@Named
@ApplicationScoped
public class DocumentService {
public TreeNode<Document> createDocuments() {
TreeNode<Document> root = new DefaultTreeNode(new Document("Files", "-", "Folder"), null);
TreeNode applications = new DefaultTreeNode(new Document("Applications", "100kb", "Folder"), root);
TreeNode cloud = new DefaultTreeNode(new Document("Cloud", "20kb", "Folder"), root);
TreeNode desktop = new DefaultTreeNode(new Document("Desktop", "150kb", "Folder"), root);
TreeNode documents = new DefaultTreeNode(new Document("Documents", "75kb", "Folder"), root);
TreeNode downloads = new DefaultTreeNode(new Document("Downloads", "25kb", "Folder"), root);
TreeNode main = new DefaultTreeNode(new Document("Main", "50kb", "Folder"), root);
TreeNode other = new DefaultTreeNode(new Document("Other", "5kb", "Folder"), root);
TreeNode pictures = new DefaultTreeNode(new Document("Pictures", "150kb", "Folder"), root);
TreeNode videos = new DefaultTreeNode(new Document("Videos", "1500kb", "Folder"), root);
//Applications
TreeNode primeface = new DefaultTreeNode(new Document("Primefaces", "25kb", "Folder"), applications);
TreeNode primefacesapp = new DefaultTreeNode("app", new Document("primefaces.app", "10kb", "Application"), primeface);
TreeNode nativeapp = new DefaultTreeNode("app", new Document("native.app", "10kb", "Application"), primeface);
TreeNode mobileapp = new DefaultTreeNode("app", new Document("mobile.app", "5kb", "Application"), primeface);
TreeNode editorapp = new DefaultTreeNode("app", new Document("editor.app", "25kb", "Application"), applications);
TreeNode settingsapp = new DefaultTreeNode("app", new Document("settings.app", "50kb", "Application"), applications);
//Cloud
TreeNode backup1 = new DefaultTreeNode("document", new Document("backup-1.zip", "10kb", "Zip"), cloud);
TreeNode backup2 = new DefaultTreeNode("document", new Document("backup-2.zip", "10kb", "Zip"), cloud);
//Desktop
TreeNode note1 = new DefaultTreeNode("document", new Document("note-meeting.txt", "50kb", "Text"), desktop);
TreeNode note2 = new DefaultTreeNode("document", new Document("note-todo.txt", "100kb", "Text"), desktop);
//Documents
TreeNode work = new DefaultTreeNode(new Document("Work", "55kb", "Folder"), documents);
TreeNode expenses = new DefaultTreeNode("document", new Document("Expenses.doc", "30kb", "Document"), work);
TreeNode resume = new DefaultTreeNode("document", new Document("Resume.doc", "25kb", "Resume"), work);
TreeNode home = new DefaultTreeNode(new Document("Home", "20kb", "Folder"), documents);
TreeNode invoices = new DefaultTreeNode("excel", new Document("Invoice.xsl", "20kb", "Excel"), home);
//Downloads
TreeNode spanish = new DefaultTreeNode(new Document("Spanish", "10kb", "Folder"), downloads);
TreeNode tutorial1 = new DefaultTreeNode("document", new Document("tutorial-a1.txt", "5kb", "Text"), spanish);
TreeNode tutorial2 = new DefaultTreeNode("document", new Document("tutorial-a2.txt", "5kb", "Text"), spanish);
TreeNode travel = new DefaultTreeNode(new Document("Travel", "15kb", "Folder"), downloads);
TreeNode hotelpdf = new DefaultTreeNode("travel", new Document("Hotel.pdf", "10kb", "PDF"), travel);
TreeNode flightpdf = new DefaultTreeNode("travel", new Document("Flight.pdf", "5kb", "PDF"), travel);
//Main
TreeNode bin = new DefaultTreeNode("document", new Document("bin", "50kb", "Link"), main);
TreeNode etc = new DefaultTreeNode("document", new Document("etc", "100kb", "Link"), main);
TreeNode var = new DefaultTreeNode("document", new Document("var", "100kb", "Link"), main);
//Other
TreeNode todotxt = new DefaultTreeNode("document", new Document("todo.txt", "3kb", "Text"), other);
TreeNode logopng = new DefaultTreeNode("picture", new Document("logo.png", "2kb", "Picture"), other);
//Pictures
TreeNode barcelona = new DefaultTreeNode("picture", new Document("barcelona.jpg", "90kb", "Picture"), pictures);
TreeNode primeng = new DefaultTreeNode("picture", new Document("primefaces.png", "30kb", "Picture"), pictures);
TreeNode prime = new DefaultTreeNode("picture", new Document("prime.jpg", "30kb", "Picture"), pictures);
//Videos
TreeNode primefacesmkv = new DefaultTreeNode("video", new Document("primefaces.mkv", "1000kb", "Video"), videos);
TreeNode introavi = new DefaultTreeNode("video", new Document("intro.avi", "500kb", "Video"), videos);
return root;
}
public TreeNode<Document> createCheckboxDocuments() {
TreeNode<Document> root = new CheckboxTreeNode(new Document("Files", "-", "Folder"), null);
TreeNode applications = new CheckboxTreeNode(new Document("Applications", "100kb", "Folder"), root);
TreeNode cloud = new CheckboxTreeNode(new Document("Cloud", "20kb", "Folder"), root);
TreeNode desktop = new CheckboxTreeNode(new Document("Desktop", "150kb", "Folder"), root);
TreeNode documents = new CheckboxTreeNode(new Document("Documents", "75kb", "Folder"), root);
TreeNode downloads = new CheckboxTreeNode(new Document("Downloads", "25kb", "Folder"), root);
TreeNode main = new CheckboxTreeNode(new Document("Main", "50kb", "Folder"), root);
TreeNode other = new CheckboxTreeNode(new Document("Other", "5kb", "Folder"), root);
TreeNode pictures = new CheckboxTreeNode(new Document("Pictures", "150kb", "Folder"), root);
TreeNode videos = new CheckboxTreeNode(new Document("Videos", "1500kb", "Folder"), root);
//Applications
TreeNode primeface = new CheckboxTreeNode(new Document("Primefaces", "25kb", "Folder"), applications);
TreeNode primefacesapp = new CheckboxTreeNode("app", new Document("primefaces.app", "10kb", "Application"), primeface);
TreeNode nativeapp = new CheckboxTreeNode("app", new Document("native.app", "10kb", "Application"), primeface);
TreeNode mobileapp = new CheckboxTreeNode("app", new Document("mobile.app", "5kb", "Application"), primeface);
TreeNode editorapp = new CheckboxTreeNode("app", new Document("editor.app", "25kb", "Application"), applications);
TreeNode settingsapp = new CheckboxTreeNode("app", new Document("settings.app", "50kb", "Application"), applications);
//Cloud
TreeNode backup1 = new CheckboxTreeNode("document", new Document("backup-1.zip", "10kb", "Zip"), cloud);
TreeNode backup2 = new CheckboxTreeNode("document", new Document("backup-2.zip", "10kb", "Zip"), cloud);
//Desktop
TreeNode note1 = new CheckboxTreeNode("document", new Document("note-meeting.txt", "50kb", "Text"), desktop);
TreeNode note2 = new CheckboxTreeNode("document", new Document("note-todo.txt", "100kb", "Text"), desktop);
//Documents
TreeNode work = new CheckboxTreeNode(new Document("Work", "55kb", "Folder"), documents);
TreeNode expenses = new CheckboxTreeNode("document", new Document("Expenses.doc", "30kb", "Document"), work);
TreeNode resume = new CheckboxTreeNode("document", new Document("Resume.doc", "25kb", "Resume"), work);
TreeNode home = new CheckboxTreeNode(new Document("Home", "20kb", "Folder"), documents);
TreeNode invoices = new CheckboxTreeNode("excel", new Document("Invoice.xsl", "20kb", "Excel"), home);
//Downloads
TreeNode spanish = new CheckboxTreeNode(new Document("Spanish", "10kb", "Folder"), downloads);
TreeNode tutorial1 = new CheckboxTreeNode("document", new Document("tutorial-a1.txt", "5kb", "Text"), spanish);
TreeNode tutorial2 = new CheckboxTreeNode("document", new Document("tutorial-a2.txt", "5kb", "Text"), spanish);
TreeNode travel = new CheckboxTreeNode(new Document("Travel", "15kb", "Folder"), downloads);
TreeNode hotelpdf = new CheckboxTreeNode("travel", new Document("Hotel.pdf", "10kb", "PDF"), travel);
TreeNode flightpdf = new CheckboxTreeNode("travel", new Document("Flight.pdf", "5kb", "PDF"), travel);
//Main
TreeNode bin = new CheckboxTreeNode("document", new Document("bin", "50kb", "Link"), main);
TreeNode etc = new CheckboxTreeNode("document", new Document("etc", "100kb", "Link"), main);
TreeNode var = new CheckboxTreeNode("document", new Document("var", "100kb", "Link"), main);
//Other
TreeNode todotxt = new CheckboxTreeNode("document", new Document("todo.txt", "3kb", "Text"), other);
TreeNode logopng = new CheckboxTreeNode("picture", new Document("logo.png", "2kb", "Picture"), other);
//Pictures
TreeNode barcelona = new CheckboxTreeNode("picture", new Document("barcelona.jpg", "90kb", "Picture"), pictures);
TreeNode primeng = new CheckboxTreeNode("picture", new Document("primefaces.png", "30kb", "Picture"), pictures);
TreeNode prime = new CheckboxTreeNode("picture", new Document("prime.jpg", "30kb", "Picture"), pictures);
//Videos
TreeNode primefacesmkv = new CheckboxTreeNode("video", new Document("primefaces.mkv", "1000kb", "Video"), videos);
TreeNode introavi = new CheckboxTreeNode("video", new Document("intro.avi", "500kb", "Video"), videos);
return root;
}
}