1. 概述
树组件用于需要用树形的方式来展现层级结构信息，并且可以通过选择树的节点进行联动过滤显示表格数据和统计图的场景，也可以通过脚本的方式来实现一些增加、删除、修改树形的场景。
2. 示例分析
使用树组件实现以下报表。左侧树为多选树，勾选多个后点击确定，右侧表和统计图能按照选择的来联动过滤显示。
3. 实现步骤
拖入树组件。
设置树组件节点、节点图标、多选、钻取等属性。
1) 主题表：选择组件对应的主题表(必填)
2) 父节点ID字段：选择父节点ID字段(必填)
3) 节点ID字段：选择节点ID字段(必填)
4) 节点名称字段：选择节点在树上显示的名称字段，不设置则默认显示ID
5) 根节点的父节点：指定根节点，支持传空
6) 叶子节点图标：设置叶子节点文字前方图标
7) 展开图标：非叶子节点展开时的图标
8) 收起图标：非叶子节点收起时的图标
9) 展开方式：目前支持四种，详细可以查看属性的悬浮提示
10) 钻取设置：钻取是针对每一个树节点的onclick事件进行设置的，在钻取参数中，将树组件的参数名称中@换成$，可以将被选中的树节点的ID值作为参数值进行传递。
11) 是否多选：默认不允许多选，勾选后可以多选。不勾选选时，点击就可以实现钻取跳转。勾选后，需要先点击勾选，在点击确定按钮，才实现跳转。
12) 按钮相关设置：勾选多选后才会出现，按钮背景颜色与字体颜色可直接点击下拉框后，进行设置。
13) 显示搜索框：搜索框逻辑是从当前选中节点的下一个第一个可见节点开始搜索。
4. 相关接口
4.1接口说明
方法名 | 参数说明 | 方法说明 |
getSelectItem(name) | name: 对应树组件的代号 | 获取指定树组件被选中节点 |
getSelectItemId(name) | name: 对应树组件的代号 | 获取指定树组件被选中节点的id（如果没有选中的节点会给出提示） |
refreshTree(name, expandtype) | name:对应树组件的代号, expandtype:展开方式 默认1："def1" 默认2："def2" 全展开："allopen" 全收起："allclose" | 重新加载树组件上的所有节点，并根据展开方式进行展开，不传默认使用组件设置的展开方式 |
refreshChildrenNode(name，itemtxt, refreshalltree) | name: 对应树组件的代号， itemtxt : 刷新后定位到的节点名称(只能是选中节点和其子节点) refreshalltree：是否刷新整树 （true 刷新整树） | 重新加载树组件上选中节点的父节点的子节点，如果没有选中的节点则刷新整树。 设置itemtxt，传入回填组件的值 ，新增时可以定位到新增的节点，修改时定位到修改的节点， 不设置itemtxt 都定位的是选中的节点
|
deleteTreeItemByType(name, typefield, type, afterDeleteSelectParentItem) | name: 对应树组件的代号， typefield : 标识字段 type ： 标识字段对应的值 afterDeleteSelectParentItem: 在删除以后是否选择父节点 | 目前删除不删数据，只是隐藏，树组件还未做过滤条件 ，因此需要一个字段 作为标记字段，对其进行操作控制数据的展示和隐藏，同时需要同步创建一张根据标记字段作为过滤条件的视图 |
4.2应用举例
注意：ABI551暂不支持数据回填，故数据回填相关接口暂不可用。
树组件的钻取
_zcalcn([['Widget1','HHH15','@p=$p;@a=']]); //热区式钻取， 参数@p=$p @p是钻取后使用的参数名 $p 是树组件上的参数名 用$将@替换，在钻取时会将选中节点的id传入
|
新增按钮的钻取
var id = getSelectItemId("HHH5"); id= EUI.isStrEmpty(id) ? "" : id; _zcalcn([['Widget1','HHH15','@p='+id+';@a=add']]); //获取到选中节点的id 在新增时 将该节点作为 新节点的父节点 |
保存按钮的钻取
g_rptpage.cmd_saveReportData("",function(){ var value =g_formmgr.rpts.HHH15.childs.HHH40.getValue(); refreshChildrenNode("HHH5", value , true ); }); //先使用表单保存的接口，在回调中是调用刷新接口， g_formmgr.rpts.HHH15.childs.HHH40.getValue(); var rpts = g_formmgr.rpts;//结果态表单对象 var container = rpts.HHH15//对象里的表单容器 var input = container.childs.HHH40; //容器子组件里的 回填组件 |
删除按钮的钻取
deleteTreeItemByType("HHH5", "content", "1"); refreshChildrenNode("HHH5","", true); _zcalcn([['Widget1','HHH15','@p=;@a=']]); //使用删除接口将 标记字段的值设置为失效 然后刷新节点，并重置回填组件的值 |
重置按钮的钻取
var id = getSelectItemId("HHH5"); id= EUI.isStrEmpty(id) ? "" : id; _zcalcn([['Widget1','HHH15','@p=' + id+';@a=change']]); //重置回填组件中的值，第一次点击左树节点时的值，如果想重置为空，不传参即可 |
请先登录