treeGrid是一个带有树结构的grid组件，可以方便的展示部门，目录等组织结构，比单纯的树展示的更加详细。效果图如下

此组件的数据结构和树比较靠近，必须具有树的层次结构，页面代码写法和Grid类似，下面展示一个简单的treeGrid示例代码，页面代码定义了一个treeGrid表格，其列的定义与传统表格一致

<w:treeGrid id="treeGrid" title="居室装修工程" width="500" height="300">
   <w:outputColumn id="task" header="任务" width="230"/>
   <w:outputColumn id="duration" header="周期" align="center"/>
   <w:outputColumn id="user" header="安排人员" width="150"/>
</w:treeGrid>

后台代码必须返回特定结构的数据去填充前台页面，才能展现成树状表格的样子。ManagedBean:

@Bind(id = "treeGrid")
    private TreeGridDataProvider dataProvider = new TreeGridDataProviderAdapter() {
        @Override
        public Object[] getChildren(Object userData) {
            if(userData ==null){
                return new Object[]{"ROOT"};
            }
            if(userData.equals("ROOT")){
                return new Project[]{new Project("装修",13.25f,"Tommy Maintz","task-folder")};
            }
            if(userData instanceof Project){
                Project p=(Project)userData;
                if(p.getTask().equals("装修")){
                    return new Project[]{
                               new Project("购买家庭用品",1.25f,"Tommy Maintz","task-folder"),
                               new Project("改装",12f,"Tommy Maintz","task-folder")
                    };
                }else if(p.getTask().equals("购买家庭用品")){
                    return new Project[]{
                               new Project("厨房用品",0.25f,"Tommy Maintz","task"),
                               new Project("食品",0.4f,"Tommy Maintz","task"),
                               new Project("清洁用品",0.4f,"Tommy Maintz","task"),
                               new Project("办公用品",0.2f,"Tommy Maintz","task")
                    };
                }else if(p.getTask().equals("改装")){
                    return new Project[]{
                               new Project("厨房地板",6.5f,"Tommy Maintz","task"),
                               new Project("粉刷卧室",2.75f,"Tommy Maintz","task"),
                               new Project("装饰起居室",2.75f,"Tommy Maintz","task"),
                               new Project("安装电灯",0.75f,"Tommy Maintz","task"),
                               new Project("接上屏风",2f,"Tommy Maintz","task")
                    };
                }else{
                    return null;
                }
            }
            return null;
        }
        @Override
        public boolean isExpanded(Object userData) {
            if(userData instanceof Project && ((Project)userData).getTask().equals("装修"))
                return true;
            else
                return false;
        }
    };

从后台取数的代码可以看出，它和tree的取数方式完全一样。

想查看更多属性和相关示例，请看《treeGrid示例》 还有《构件参考》