3.6.4 页面控件--树控件

树控件分为两种，单表下拉树和复杂下拉树。单表下拉树适用于表字段引用了本表的场景，例如部门表的上级部门字段又引用了部门表，从而形成多级部门树的概念；复杂下拉树则可以利用关联字段形成关联字段分类作为树的上一层，如果关联字段对应的表还有关联字段，则还可以向上形成关联字段的关联字段的分类方式作为树的更上一层，以此类推。

如果希望用户选择这种表数据的时候缺省就用树控件而不是下拉数据集，就需要在表定义界面定义 默认树 的参数：

当然，我们也可以在控件配置中对树控件进行各种参数的手动控制：手动配置需要了解一个前提，就是目前树控件引用了页面的前端数据集，所以为了配合树控件的使用，页面中的变量集里一定不能少相关表的前端数据集。

如下图所示：

上面讲的树控件，都是d出式的，也可以制作嵌入式的，可以直接看到树控件里面的全貌

通过选择上图中的模式可以切换树控件的显示模式。同时可以配置是否多选，是否展开节点，是否显示连接线等参数。

这个根节点的配置单表下拉树和复杂下拉树是一样的，这里不再赘述。

下面看一下单表下拉树控件的二级节点的配置

二级节点的配置界面和上面很像，只是没有设置父级引用列，这样从某种程度上就认为这一层是计算父子关系的结束层。

三级节点通过父级引用列对二级节点形成配对关系，这样就形成了部门-用户树。

我们可以在新建项目的导航树的控件演示/输入模块下找到相关的控件演示页面，这些页面演示了各种各样的参数配置情况。

嗯，报表控件与图表控件还是不一样的。

但是你以加了个“图形界面比较好”，比较费解。我估计你的意思还是图表控件。

然后你也没有讲明白有啥条件限制，我估计你是JavaScript 图表插件，好吧。

好的插件有很多。以下有10个非常酷的JavaScript图表库，有简单的也有复杂的，以满足不同的需求。

个人还是很推荐highcharts的，RGraph很炫，

1. Cubism.js

一个基于D3.js的插件，可以实时显示时间序列。D3.js是一个针对HTML和SVG的JavaScript可视化库。

2. RGraph

一个HTML5 JavaScript图表库，支持20多种不同类型的图表。

3. Cytoscape Web

一个开源的图形可视化库，基于jQuery编写。

4. sigma.js

一个开源的轻量级JavaScript库，使用HTML canvas元素来绘制图形。

5. Morris.js

一个小巧的、效果漂亮的JavaScript库，用于可视化时间序列数据。

6. Timeplot

基于DHTML的AJAX部件，用于绘制时间序列，并在上面叠加基于时间的事件。

7. Dracula

一套用于显示和设计交互式图表的工具，包含了各种不同的算法。无需Flash、Java和其他插件。

8. gRaphael

一个开源的JavaScript图表库，基于Raphael（拉斐尔）JavaScript库。

9. gvChart

一个jQuery插件，使用谷歌的Charts API以及HTML <table>标记中的数据，来创建交互式、可视化的图表。

10. jQuery Highcharts Table

简易，漂亮，该插件可以将HTML表格中的数据自动转换成图表，也可以抓取excel，连数据库也没有问题。

---