# 树型列表
下面我们学习如何实现树型分组。
未配置过报表设计器的请先参考报表设计器
效果如下:
# 设计报表
我们可以按照常规报表介绍新建报表,设计数据源,设计报表。
也可以直接打开示例
本地报表设计器
http://localhost:5555/designer/?report=treeview (opens new window)
在线报表设计器
http://www.satrda.com/designer/?report=treeview (opens new window)
其它格式设计参考常规报表设计。
# 设置报表Tree
点击设计器中间报表的空白部份,设置报表属性。在右面的属性面板中,类型选中树型
。
Treeview类型的报表,数据字段必须包含parentId
和id
字段,我们设置报表属性
parentId
属性设置为parentId
id
属性设置为deptId

示例报表数据如下:
[
{"deptId":100,"parentId":0,"dept_name":"SatRDA组件","order_num":0,"leader":"","phone":"15888888888","email":"satrda@qq.com","status":"0"},
{"deptId":101,"parentId":100,"dept_name":"深圳总公司","order_num":1,"leader":"","phone":"15888888888","email":"satrda@qq.com","status":"0"},
{"deptId":102,"parentId":100,"dept_name":"北京分公司","order_num":2,"leader":"","phone":"15888888888","email":"satrda@qq.com","status":"0"},
{"deptId":103,"parentId":101,"dept_name":"研发部门","order_num":1,"leader":"","phone":"15888888888","email":"satrda@qq.com","status":"0"},
{"deptId":104,"parentId":101,"dept_name":"市场部门","order_num":2,"leader":"","phone":"15888888888","email":"satrda@qq.com","status":"0"},
{"deptId":105,"parentId":101,"dept_name":"测试部门","order_num":3,"leader":"","phone":"15888888888","email":"satrda@qq.com","status":"0"},
{"deptId":106,"parentId":101,"dept_name":"财务部门","order_num":4,"leader":"","phone":"15888888888","email":"satrda@qq.com","status":"0"},
{"deptId":107,"parentId":101,"dept_name":"运维部门","order_num":5,"leader":"","phone":"15888888888","email":"satrda@qq.com","status":"0"},
{"deptId":108,"parentId":102,"dept_name":"市场部门","order_num":1,"leader":"","phone":"15888888888","email":"satrda@qq.com","status":"0"},
{"deptId":109,"parentId":102,"dept_name":"财务部门","order_num":2,"leader":"","phone":"15888888888","email":"satrda@qq.com","status":"0"}
]
# 设置Tree属性
- 选中单元格
A2
,设置类型属性为Tree
最终效果: