本章介绍多对象控件中的目录树和目录点选控件的使用方法。目录树和目录点选可以支持的业务场景有很多，如：工程资源树、设备树、工厂树、数据字典树、组织部门树、行政区域树等，本章将以物料分类树的构建过程介绍目录树和目录点选控件的使用方法，物料分类树例子中需要完成这样的功能：

1) 构造一个左树右表的物料分类树，在树上可以创建物料的分类，并可在树上完成物料的新增、删除、编辑等操作；

2）实现物料列表表单设计，通过目录点选在创建物料的同时完成物料树父子关系的定义。

1.物料分类树设计

目录树是以实体类为基础构建一个树，为了实现上述物料分类树的功能我们设计了1个实体类和4个表单：

物料实体类：Materail

设计了4个表单：

MeterailAdd（添加物料）：该表单中使用了目录点选功能辅助完成目录树的维护；

MeterailList（物料清单）：在该表单中可以完成物料的增、删、改、查，数据的导入和导出，这部分内容在表单设计章节中有详细的介绍；在meterailList表单中新增和编辑功能中调用了MeterailAdd表单；

AddSub（新增目录）：用于在Materailtree表单中对物料的新增和编辑；

Materailtree（物料树）：是一个左树右表的物料分类树，这个表单设计是本章的重点，在该表单的新增和编辑中调用了AddSub表单；

在创建物料实体类Materail时，因为要构造目录树，需要创建实体类的时候勾选是否树的选项，勾选后会自动给实体类增加parentOid属性，该属性是用来构建树的外键。在例子中我们创建一个物料实体类：Matreail，并准备了物料数据。物料实体类的属性如下表。

如果创建的实体类需要构造目录树需要勾选”是否树“，点击右下角”确定“，勾选后系统会自动产生”parentOid“，见下图。

勾选”是否树“

2. 左树右表的业务构建

下面结合物料树来介绍下图常见的左树右表的业务表单构建，我们创建物料树Materailtree表单。

2.1页面布局构造设计

为了实现左树右表的构造，需要选择3个控件：

1）选择布局控件”多列‘控件，例子中选择2列；

2）左侧选择多对象控件中的“目录树”控件；

3）右侧选择多对象控件中的“表格”控件，表格控件用于显示左侧物料分类树上所包含的物料，表格控件的使用在已有详细介绍，本处不在赘述。

图 左树右表的表单布局

2.2 目录树的设置

2.2.1 目录树的属性设置

物料树MaterailTree表单中目录树的主要设置内容介绍如下：

根节点标签设置：在根节点标签设置下面的框中选择：物料名称、物料代号作为根节点的设置；

子节点标签设置：在子节点标签设置下面的框中选择：物料名称、物料代号作为子节点的设置；

根节点查询条件：把类型Type为“分类”，或父节点parentOid是空的作为根节点，查询条件如下：

and obj.Type = '分类'  and  (obj.parentOid is null or  obj.parentOid = '')

子节点查询条件：把父节点parentOid非空的作为子节点，查询条件如下：

and obj.parentOid is not null

其它设置：

• 懒加载：懒加载默认打开目录树2层
• 搜索框：选择搜索框可以在目录树上设置查询框
• 开启分页：选择”开启分页“目录树最下方可有分页显示
• 刷新按钮：选择：刷新按钮”可以在搜索框右侧显示刷新按钮

图 目录树的设置

2.2.2 目录树的事件设置

在左树右表的页面中需要实现以下的功能：

1）单击左树节点，右侧的表格可以列出该节点下面的物料；

2）在左侧树上选择根节点，可以新增根节点的分类；

3）在左侧树上选择子节点，可以新增该子节点下的物料。

单击节点事件：为了实现点击左侧的树节点，在右侧表格中显示选中节点下面所包含的物料，需要编写前端脚本实现。

var tree = this.getAddinById("SelfJoinsTree1");
var objs = tree.getSelected();
console.log(objs[0]);
var oid = objs[0].oid;
var query = " and obj.parentOid = '"+ oid +"'"
var table = this.getAddinById("Grid2");
table.freshData(query);

"新增"根节点、"新增"子节点需要编写脚本，以实现对分类节点和子节点下物料的增加功能，脚本如下：

var tree = this.GetAddinById("SelfJoinsTree1");
var nodes = tree.getSelected();
return {
    obj:{
        parentOid: nodes[0].oid
    }
}
tree.editNodeObj(obj, true);
tree.freshData();  
this.msgbox.success("已刷新!");

说明：目录树操作按钮显示可支持三种方式：图标，文字，图标+文字，以满足使用者对菜单显示设置的需要。建下图中的标注2。

图  目录树操作按钮三种显示方式

3. 目录点选控件的使用

目录点选可以选择目录树上的一个节点并回填到目标属性上去，该功能只是回填和显示，需要注意2个问题：

• 目录点选只与绑定的目标属性配合使用，如果选择回填路径则需要定义目标属性为能够存储回填路径的格式
• 如果要使用目录点选的功能辅助构建目录树，则目录点选回填属性的目标属性对应的是父对象标识，则回填要回填oid才能创建关联，以下就是一个用目录点选功能辅助生成目录树的应用场景。

场景：设计一个物料实体类新增物料的表单MeterailAdd（添加物料），实现在选择目录树某个节点下新增物料，即在完成新增物料的同时也同时创建出在目录树下所选择的节点下产生一个新的物料的父子关系。

以下为目录点选属性设置情况：

选择实体类：Materail

1）选择多对象控件中的“目录点选”；

2）目标属性设置：父对象表示：paientOid

3) 浏览字段设置：物料名称和物料代号，此处可以根据需要进行设置

4）回填字段：全局唯一标识

5）根节点查询，把类型Type为“分类”，或父节点parentOid是空的作为根节点，查询条件如下：

and obj.Type = '分类'  and  (obj.parentOid  is null or  obj.parentOid = '') 

6）子节点查询：把父节点parentOid非空的作为子节点，查询条件如下：

and obj.Type = '分类'

需要说明的问题：

1）目录点选控件属性设置中最下面有三个选项：

• 懒加载：懒加载默认打开目录树2层
• 显示路径：显示目录树的路径
• 回填路径：回填目录树的路径，这种情况多用于路径的搜索，而非构造目录树所用

2）目录点选与绑定的目标属性配合使用，如果选择回填路径则需要定义目标属性为能够存储回填路径的格式

3）如果要使用目录点选的功能辅助构建目录树，则目录点选回填属性的目标属性对应的是父对象标识，则回填要回填oid才能创建关联，在物料分类树的案例中，MaterailAdd表单中所属分类属性使用的就是目录点选树控件，此处是要维护物料分类树，需要选择要建立的物料是哪个分类节点下下的物料

4）在目录树上为维护新增或编辑目录，我们设计的AddSub表单，所属分类绑定的“对象选择“控件，该控件可以获得所在目录树上节点的位置分类信息，只需新增和编辑物料即可

5）目录点选控件开启懒加载，编辑态根据回填数据显示回填原则：

• 回填的属性（允许多属性回填），根据回填属性拼接查询条件查询数据（and），如果匹配出多条记录则显示第一条记录的显示属性值
• 开启懒加载后，如果回填是按照回填路径格式回填，则根据回填路径格式获取加载层数，进行定位，如果回填的是末级节点，则一级目录如果命中则定位，如果不命中则无法定位

4.小结

本章介绍目录树的构造设置和目录树点选控件的的使用，目录树和目录点选可用到很多场景，希望各位小伙伴认真学习和领会这2个控件的使用，在物料分类案例中，我们通过设计实体类Materail表单并使用目录点选辅助完成了目录树的构建，也创建了左树右表，通过在目录树上的新增和编辑来维护物料分类树。

我们把物料分类树的模型进行了打包，各位小伙伴可以导入物料分类树的模型包和materail数据进行学习和理解。

5.附件

物料分类树模型包.zip

materail (3).xlsx