Revision history [back]

click to hide/show revision 1
initial version

answered 2015-02-25 06:38:08 +0800

hawk gravatar image hawk

http://hawkphoenix.blogsp... ZK Team

You can use either model.fireEvent(TreeDataEvent.INTERVAL_ADDED, model.getPath(selectedItem) , index, index) or @NotifyChange("model") to update the tree in a browser. But first way has better performance.

Notice that fireEvent()'s 2nd parameter is the path of newly-added node's parent node, you can get a node's path with AbstractTreeModel.getPath().

@Command 
// @NotifyChange("model") simple but cost more effort for it renders the whole tree again 
public void add(){
    if (selectedItem != null){
        MyNode newChild = new MyNode(Calendar.getInstance().getTime().toString());
        selectedItem.getChildren().add(newChild);
        int index = selectedItem.getChildren().indexOf(newChild);
        //fire an event upon situations, please refer to TreeDataEvent for complete list of tree data events
        model.fireEvent(TreeDataEvent.INTERVAL_ADDED, model.getPath(selectedItem) , index, index);
        // no effect for no binding on root
        //      BindUtils.postNotifyChange(null, null, model.getRoot(), "*"); 
    }
}

When using a tree model, you should consider ZK's default tree model and node class first, then replace some of them with your own according to the complexity of your requirement. DefaultTreeModel and DefaultTreeNode will fire events automatically for you. But implement your own tree model, you should fire events by yourselves.

You can use either model.fireEvent(TreeDataEvent.INTERVAL_ADDED, model.getPath(selectedItem) , index, index) or @NotifyChange("model") to update the tree in a browser. But first way has better performance.

Notice that fireEvent()'s 2nd parameter is the path of newly-added node's parent node, you can get a node's path with AbstractTreeModel.getPath().AbstractTreeModel.getPath().

Here is a simple example to demonstrate the idea:

<div apply="org.zkoss.bind.BindComposer"
    viewModel="@id('vm') @init('support.component.tree.TreeEventVM')">
    <button onClick="@command('add')">add</button>
    <tree model="@bind(vm.model)" selectedItem="@save(vm.selectedItem)">
        <template name="model">
            <treeitem>
                <treerow>
                    <treecell label="@load(each)"></treecell>
                </treerow>
            </treeitem>
        </template>
    </tree>
</div>

@Command 
// @NotifyChange("model") simple but cost more effort for it renders the whole tree again 
public void add(){
    if (selectedItem != null){
        MyNode newChild = new MyNode(Calendar.getInstance().getTime().toString());
        selectedItem.getChildren().add(newChild);
        int index = selectedItem.getChildren().indexOf(newChild);
        //fire an event upon situations, please refer to TreeDataEvent for complete list of tree data events
        model.fireEvent(TreeDataEvent.INTERVAL_ADDED, model.getPath(selectedItem) , index, index);
        // no effect for no binding on root
        //      BindUtils.postNotifyChange(null, null, model.getRoot(), "*"); 
    }
}

When using a tree model, you should consider ZK's default tree model and node class first, then replace some of them with your own according to the complexity of your requirement. DefaultTreeModel and DefaultTreeNode will fire events automatically for you. But implement your own tree model, you should fire events by yourselves.

You can use either model.fireEvent(TreeDataEvent.INTERVAL_ADDED, model.getPath(selectedItem) , index, index) or @NotifyChange("model") to update the tree in a browser. But first way has better performance.

Notice that fireEvent()'s 2nd parameter is the path of newly-added node's parent node, you can get a node's path with AbstractTreeModel.getPath().

Here is a simple example to demonstrate the idea:

<div apply="org.zkoss.bind.BindComposer"
    viewModel="@id('vm') @init('support.component.tree.TreeEventVM')">
    <button onClick="@command('add')">add</button>
    <tree model="@bind(vm.model)" selectedItem="@save(vm.selectedItem)">
        <template name="model">
            <treeitem>
                <treerow>
                    <treecell label="@load(each)"></treecell>
                </treerow>
            </treeitem>
        </template>
    </tree>
</div>

@Command 
// @NotifyChange("model") simple but cost more effort for it renders the whole tree again 
public void add(){
    if (selectedItem != null){
        MyNode newChild = new MyNode(Calendar.getInstance().getTime().toString());
        selectedItem.getChildren().add(newChild);
        int index = selectedItem.getChildren().indexOf(newChild);
        //fire an event upon situations, please refer to TreeDataEvent for the complete list of tree data events
        model.fireEvent(TreeDataEvent.INTERVAL_ADDED, model.getPath(selectedItem) , index, index);
        // no effect for no binding on root
        //      BindUtils.postNotifyChange(null, null, model.getRoot(), "*"); 
    }
}

When using a tree model, you should consider ZK's default tree model and node class first, then replace some of them with your own according to the complexity of your requirement. DefaultTreeModel and DefaultTreeNode will fire events automatically for you. But implement your own tree model, you should fire events by yourselves.

Support Options
  • Email Support
  • Training
  • Consulting
  • Outsourcing
Learn More