菜单

表单

相关内容

什么是表单？

图片按钮（`iconClick`）

说明

图片按钮也叫图标按钮，外观由图标决定，没有固定的矩形区域，与常规按钮有所不同。

图标的格式，支持sgv、jpg/png，以及自行绘制。如下所示（可点击）：

注意：本组件没有弹出框 *属性组。

使用

如下所示，分别是在组件面板，和编辑器右键菜单插入两种方式找到组件：

属性

功能

打开链接（`openURL`）

字符类型可读写

浏览器地址。运行模式下点击，会在浏览器新页签打开地址。

启用提示（`toolTip`）

布尔类型可读写

运行时提示是否可见。默认编辑状态下非空内容的提示鼠标放在上面都可见，需要勾选该属性运行模式下才可见。

禁用（`disabled`）

布尔类型可读写

禁止鼠标操作。

关联页签（`bindTabview`）

数组类型可读写

默认关联Tab1页签，填入其图元组件的标签即可，无需连线。使用方式：
数组索引0处填入tab页签的标签，索引1处填入tab页签对应的索引。

点击事件（`clicked`）

函数类型

鼠标点击时触发的事件函数。

数据参数（`param`）

注意：该属性需展开
才能看到。

函数类型

自定义传入参数。用来点击事件clicked触发时传入。较少使用。

外观

图标路径（`path`）

字符类型可读写

图标。可以设置其他图标地址。
如果清空，则会自动填充一个纯色矩形，并且默认透明度为0.1。可以设置默认、划过、点击颜色来调整。

默认颜色（`default-background`）

颜色类型可读写

默认背景色

划过颜色（`hover-background`）

颜色类型可读写

鼠标悬停、滑过/划过时背景色

按下颜色（`click-background`）

颜色类型可读写

鼠标按下时背景色

其他参见

公共属性

普通按钮（`button`）

包含普通按钮 V2。差异化在属性中注明。属性名称括号内，普通按钮和普通按钮v2的属性标识，以竖线隔开。

说明

普通按钮组件与图片按钮都是用于触发点击，区别主要在外观设置：按钮外观为边框、文字、背景色等组成，图片按钮外观完全取决于图标。

按钮组件分为普通按钮和普通按钮 v2两种，前者是矢量按钮，后者是非矢量（dom）。使用上的区别，除了矢量按钮缩放不失真，后者放大会模糊，更主要的区别在于上下层次控制上。此外，前者没有弹出框 *属性组，后者有。

首先要知道，UIOTOS中的组件分为矢量组件和非矢量组件两类，比如绘图相关的矩形、连线，都是矢量的。绝大部分表单组件比如下拉框、树表，以及容器组件都是非矢量的。

拖放到页面中，上下层控制时，以下三点需要注意：

矢量组件和矢量组件能够任意调整上下层。
非矢量组件和非矢量组件之间也能任意调整上下层。
矢量永远在非矢量组件下方，通常情况下无法显示在矢量组件之上。

按钮是极为常见的组件，不管是组态绘图，还是UI界面。如果只有一种按钮，总有一种场景不适合，毕竟如果不能控制上下层显示，会导致不少功能无法实现。

如下所示，容器嵌套页面后，上面叠放按钮，只能是非矢量的普通按钮 v2：

再比如下面，要将矢量图形放到按钮上方不被遮盖，就需要用矢量的普通按钮：

使用

属性

功能

禁用（`ht.disabled`|`disabled`）

布尔类型可读写

勾选后，按钮不可点击，并且边框、背景、文字等颜色，将切换成禁用色。通常是在对应颜色属性数组的末尾项中配置。如下所示：

关联页签（`bindTabview`）

数组类型可读写

默认关联Tab1页签，填入其图元组件的标签即可，无需连线。使用方式：
数组索引0处填入tab页签的标签，索引1处填入tab页签对应的索引。

点击事件（`onFormClick`）

事件函数可读写

当点击时对外触发。

点击事件（`clicked`）

注意：仅普通按钮有，用途于点击事件（onFormClick）一样，兼容作用。

函数类型

鼠标点击时触发的事件函数。

数据参数（`param`）

注意：仅普通按钮有，且该属性需展开
才能看到。

函数类型

自定义传入参数。用来点击事件clicked触发时传入。较少使用。

外观

文字（`ht.text`|`text`）

字符类型可读写

按钮上的显示文字。

本属性的设置，除了属性面板中，通常还能直接双击，可弹出窗口显示按钮文字，输入文字后确定就能修改文字，用于快速设置该属性。

注意，如果勾选了通用属性组中的编辑时双击执行，则不会打开弹窗。

字体（`ht.font`|`textFont`）

字体类型可读写

文字大小、粗细、字体等设置。

文字颜色（`ht.textColor`|`textColor`）

颜色数组可读写

索引0、1、2、3分别对应默认、悬停、按下、禁用时文字颜色。

边框宽度（`ht.borderWidth`|`borderWidth`）

非负数字可读写

注意：普通按钮v2在深色按钮背景时，建议边框宽度固定位0，因为目前有用到cssborder来定义边框，且由非矢量实现，当宽度非0尤其是奇数，会出现边框与内边的透明间隙，在按钮所在页面为浅色而按钮自身为深色、边框也为深色时，显得不美观。后续版本会修复。如图所示：

边框圆角（`ht.borderRadius`|`borderRadius`）

非负数字|非负数字数组可读写

普通按钮的左上、右上、右下、左下四个角统一圆角设置。
普通按钮V2，支持数组配置，依次设置上面四个角各自的圆角。

普通按钮V2可以实现如下风格的圆角：

边框颜色（`ht.borderColor`|`borderColor`）

非负数字数组可读写

索引0、1、2、3分别对应默认、悬停、按下、禁用时边框颜色。

背景颜色（`background`）

颜色数组可读写

索引0、1、2、3分别对应默认、悬停、按下、禁用时背景颜色。

注意：对索引0的颜色清空，会自动联动其他几个颜色一并自动清空，形成透明背景色。
通常需要先去掉深色风格（darkStyle）的勾选，确保文字颜色为深色。否则默认白色文字，加上透明背景，在浅色页面上将看不到按钮。

深色风格（`darkStyle`）

布尔类型可读写

默认勾选，深色背景。去掉勾选后，字体和背景颜色互换，形成浅色风格。

注意：如果要快速设置透明背景（悬停、点击背景也是透明，仅文字颜色、边框等变化），步骤如下，
去掉本按钮勾选，自动翻转配色（文字和背景互换），通常此时为浅色风格（背景浅色，文字深色）。
对背景颜色（background）索引0的颜色，清空掉，或者设置透明度为0，此时会自动联动其他几个背景颜色也自动清空。形成透明背景色。如下所示：

图标路径（`iconPath`）

注意：该属性需展开
才能看到。

路径字符可读写

可以设置按钮上的图标路径地址。设置后，其他图标相关的属性才有效，否则不起作用。

图标位置（`ht.iconPosition`|`iconPosition`）

注意：该属性需展开
才能看到。

枚举类型可读写

图标相对于按钮上文字的方位。

图标大小（`iconSize`）

注意：该属性需展开
才能看到。

非负数字数组可读写

索引0为宽度；索引1为高度。

图标间隙（`iconGap`）

注意：该属性需展开
才能看到。

数字类型可读写

图标与文字的间隙。

图标背景（`icon-background`）

注意：该属性需展开
才能看到。

颜色类型可读写

图标的背景颜色。

其他参见

公共属性

开关（`switch`）

说明

开关按钮除了能点击，还能切换状态，对外输出开或关的状态。当然，也能设置开或关的状态。

使用

属性

功能

打开（`open`）

布尔类型可读写

当前开关的状态，或者设置开关状态。勾选为打开，不勾选为关闭。

打开文字（`textOpen`）

字符类型可读写

开关打开时显示的文字。

关闭文字（`textClose`）

字符类型可读写

开关关闭时显示的文字。

文字可见（`textVisible`）

注意：该属性需展开
才能看到。

布尔类型可读写

是否显示文字。

打开事件（`onOpen`）

事件函数可读写

开关打开时对外触发的事件。

关闭事件（`onClose`）

注意：该属性需展开
才能看到。

事件函数可读写

开关关闭时对外触发的事件。

值改变事件（`onChange`）

注意：该属性需展开
才能看到。

事件函数可读写

开关打开或关闭，切换状态时对外触发的事件。

外观

背景颜色（`background`）

颜色类型可读写

打开时背景颜色。

关闭颜色（`closedColor`）

颜色类型可读写

关闭时背景颜色。

背景边框宽度（`back.borderWidth`）

注意：该属性需展开
才能看到。

非负数字类型可读写

边框宽度。

背景圆角（`back.radius`）

非负数字类型可读写

边框圆角。

圆点缩放（`dot.dotScale`）

注意：该属性需展开
才能看到。

非负数字类型可读写

滑动开关小圆点相对于当前尺寸的缩放比例，0~1为缩小，大于1为放大。

文字缩放（`textScale`）

注意：该属性需展开
才能看到。

非负数字类型可读写

滑动开关显示文字相对于当前尺寸的缩放比例，0~1为缩小，大于1为放大。

字体（`font`）

字体类型可读写

滑动开关显示文字的字体，包括大小、粗细等。

间隙调整（`gapsAdjust`）

注意：该属性需展开
才能看到。

数字数组可读写

间隙调整，数组类型。索引0代表文字与圆点之间的间隙。索引1功能暂未开放。

其他参见

公共属性

按钮组（`buttonGroup`）

说明

按钮组是互斥按钮的组合，通常与Tab页签组件配合使用，用于切换当前页签。

使用

属性

功能

关联页签（`bindTabview`）

字符类型可读写

关联的页签组件。

填入指定页签组件的标识即可（默认为"tab1"），不需要再连线。此时，按钮组当前索引值，会自动同步给页签组件的索引，实现按钮组切换时，指定页签的页面同步切换。如下所示：

方向（`direction`）

枚举类型可读写

水平（horizontal）模式；垂直（vertical）模式。

各按钮文字（`buttons`）

字符数组可读写

从左到右按钮显示文字。

各按钮数据（`btnDatas`）

注意：该属性需展开
才能看到。

对象数组可读写

显示文字（buttons）用于界面展示，这里用于对应按钮的用户数据。

当前数据（`btnData`）

注意：该属性需展开
才能看到。

对象类型可读写

各按钮数据（btnDatas）属性有设置时，本属性为当前选中索引对应的按钮数据。如果按钮数据没有配置，或者对应索引没有配置数据项，那么从各按钮显示文字属性去匹配。注意：本属性与当前索引（select）属性双向同步。

当前索引（`select`）

整数类型可读写

对应当前选中按钮的索引（从0开始）。-1表示都不选中。

划过时触发（`hoverTrigger`）

注意：该属性需展开
才能看到。

布尔类型可读写

划过/悬停时点击触发。默认需要点击才能切换，勾选本属性后，鼠标悬停即切换，省去鼠标点击操作。

加载时触发（`initialTrigger`）

布尔类型可读写

初始触发连线操作。默认不勾选，勾选后初始加载值时，如果对外有连线，并且初始值为非空时，也会触发对外的赋值连线操作。

值改变事件（`onChange`）

事件函数可读写

当值发生变化时会触发本事件。

外观

间隙（`gap`）

数字类型可读写

按钮和按钮之间的间隙。

背景颜色（`background`）

颜色数组可读写

背景颜色。索引依次为：
0：未选中按钮的默认背景色。
1：未选中按钮的悬停背景色。
2：未选中按钮的按下背景色。
3：选中按钮的默认背景色。
4：选中按钮的悬停背景色。
5：选中按钮的按下背景色。

文字颜色（`textColor`）

颜色数组可读写

文字颜色。索引依次为：
0：未选中按钮的默认文字色。
1：未选中按钮的悬停文字色。
2：未选中按钮的按下文字色。
3：选中按钮的默认文字色。
4：选中按钮的悬停文字色。
5：选中按钮的按下文字色。

字体（`textFont`）

字体类型可读写

字体类型包括大小、粗细设置。

圆角（`radius`）

数字数组可读写

索引0、1、2、3的值分别对应按钮组的左上角、右上角、右下角、左下角。

边框颜色（`borderColor`）

颜色类型可读写

如果不设置，那么边框颜色将自动跟随当前选中项目的背景颜色。

边框宽度（`borderWidth`）

数字类型可读写

简单线样式（`simpleLineStyle`）

布尔类型可读写

勾选后，样式为简单风格：无背景色，只有文字、下划线和对应颜色。

选中颜色取决于背景颜色索引3和索引4。
划过/悬停颜色取决于文字颜色的索引1。
边框宽度设置为0时，下划线将不可见。
如果下划线宽度太大，可以调整组件的整体宽度，以及按钮间隙。

其他参见

公共属性

文本框（`textArea`）

说明

文本框用于输入或显示多行文本，并且支持显示html格式的文本内容。

使用

属性

功能

值内容（`value`）

对象类型可读写

支持字符串、数字、布尔、对象、数组等各种类型的值输入和显示。注意，对象类型{}通常显示为[object Object]。字符串、整数等数组类型，通常直接内容逗号隔开的方式显示。

网页格式（`htmlContent`）

注意：该属性需展开
才能看到。

布尔类型可读写

勾选后，值内容可输入html文本，并以html格式显示。

只读（`readOnly`）

布尔类型可读写

是否只读。勾选后，运行时不允许输入。注意，对非网页格式有用。

加载时触发（`initialTrigger`）

注意：该属性需展开
才能看到。

布尔类型可读写

初始触发连线操作。默认不勾选，勾选后初始加载值时，如果对外有连线，并且初始值为非空时，也会触发对外的赋值连线操作。

即时触发（`instantTrigger`）

布尔类型可读写

勾选后，输入时就会对外触发值改变（onChange）事件。

值改变事件（`onChange`）

事件函数可读写

当值发生变化时会触发本事件。

外观

边框圆角（`borderRadius`）

非负数字类型可读写

边框宽度（`borderWidth`）

非负数字类型可读写

边框颜色（`borderColor`）

颜色数组可读写

索引0：默认边框颜色；
索引1：输入时边框颜色。

背景颜色（`background`）

颜色数组可读写

索引0：默认背景色。
索引1：只读（readOnly）禁用时背景色。

文字颜色（`color`）

颜色数组类型可读写

索引0：文字内容颜色；索引1：标签文本颜色。

字体（`font`）

字体类型可读写

字体类型包括大小、粗细设置。

占位提示符（`placeholder`）

字符类型可读写

未输入（值内容为空）时默认显示的占位提示文字。

其他参见

公共属性

文档编辑器（`document`）*

略

说明

使用

属性

功能

外观

其他参见

公共属性

输入框（`input`）*

说明

输入框用于输入或显示单行文本，支持回车事件，默认固定高度35像素。

使用

属性

略

功能

外观

其他参见

公共属性

输入组合框（`inputGroup`）*

略

说明

使用

属性

功能

外观

其他参见

公共属性

标签（`title`）*

略

说明

使用

属性

功能

外观

其他参见

公共属性

疑问（`tip`）*

略

说明

使用

属性

功能

外观

其他参见

公共属性

勾选框（`checkBox`）

说明

勾选框以及勾选框组（默认三项）。

使用

属性

功能

禁用（`disabled`）

布尔类型可读写

是否禁用。
勾选后用户无法操作，相当于只读。

选中（`selected`）

布尔类型可读写

第一个勾选框是否选中。
只有一个勾选框时，获取和设置值更为简便。

数据内容（`datas`）

对象数组可读写

勾选框组的数据。

可以是单纯的列表，即列表的每个元素就是字符串，对应勾选框的显示文字，如下所示：

['张三','李四','王五']

此外，列表每个元素也可以是带有text、id字段的json对象。text字段对应显示
文字，id字段对应数据ID。如下所示：

[
  {
    "text":"张三",
    "id":124
  },{
    "text":"李四",
    "id":53
  }
]

勾选时，分别生成勾选项文字（textValues）、勾选项ID（idsValues）。

注意，除了text、id字段组合，也支持name、value字段组合，
此时将name当做text字段，value当做id字段来处理。

勾选项值（`indexValues`）

注意：该属性需展开
才能看到。

对象数组可读写

勾选项对应的索引序号。

勾选项ID（`idValues`）

注意：该属性需展开
才能看到。

对象数组可读写

名称对应的数据ID，通常由数据库查询返回。

与勾选项值（indexValues）、勾选项文字（textValues）用途类似，都是用来记录勾选的项，只是当前记录的是数据ID（通常对应数据库中的主键），而另两个分别是显示的索引序号和显示的文字。

勾选项文字（`textValues`）

对象数组可读写

勾选项对应的文本。

外观

标签文本（`labelText`）

字符串可读写

标题显示文字。

注意，该属性值会同步到标题属性组的内容属性。

标题字体（`labelFont`）

注意：该属性需展开
才能看到。

字体类型可读写

标签文本对应的字体。

注意，该属性值会同步到标题属性组的字体属性。

标签颜色（`labelColor`）

颜色类型可读写

标签文本对应的颜色。

注意，该属性值会同步到标题属性组的颜色属性。

勾选框字体（`checkboxFont`）

注意：该属性需展开
才能看到。

字体类型可读写

勾选框各项的字体。

勾选框颜色（`checkboxColor`）

注意：该属性需展开
才能看到。

颜色类型可读写

勾选项文字对应的颜色。

其他参见

公共属性

单选框（`radioBox`）*

略

说明

输入框用于输入或显示单行文本，支持回车事件，默认固定高度35像素。

使用

属性

功能

外观

其他参见

公共属性

下拉框（`comboBox`）

说明

下拉框也叫组合框，下拉选择项可以是列表或者树。

使用

属性

功能

打开（`open`）

布尔类型可读写

勾选后可以展开下拉框。主要用于编辑状态下方便下拉展开测试。

只读（`readOnly`）

布尔类型可读写

是否只读。

禁用（`disabled`）

注意：该属性需展开
才能看到。

布尔类型可读写

是否禁用。勾选后禁止下拉。

通常作为只读（readOnly）属性的补充，勾选后，会自动强制设置为只读，并且无法下拉选择。单独只勾选只读属性时，用户无法输入编辑，但是可以下拉选择。
对于表单页面的查看模式下，下拉框通常需要勾选该属性，无需手动再勾选只读属性。

节点可选择（`nodeUsable`）

注意：该属性需勾选专业模式才可见。

布尔类型可读写

勾选后，树列表节点双击可选中。
不勾选，树列表节点双击不可选中，而是展开下级。

数据内容（`datas`）

（对象）数组类型可读写

数据源，字符串数组或对象数组。

下拉列表的数据格式，可以是基本列表，比如：

['星期一' , '星期二' , '星期三' ]

也可以是对象列表，其中需要有name、value两个字段，分别用于作为显示名称和数据ID，其中value字段的值可以是字符串、数字等类型，比如：


[
  {
    "name": "不限",
    "value": ""
  },{
    "name": "故障",
    "value": "fault"
  },{
    "name": "报警",
    "value": "alarm"
  }
]

值内容（`value`）

对象类型可读写

当前选择的值。

通常结合选择ID（selectedID）和选择文字（selectedText）属性一起使用，值通常可以是对象、ID数字或文字，将自动识别匹配格式。

值是对象并且带有name、value字段时，会自动同步选择IDselectedID和选择文字（selectedText）。
数据内容为普通列表比如['a','b','c','d']时，这里值通常需要在字符串列表中存在。

注意，如果值是数字或数字的字符串形式，那么将被识别为索引，需要列表索引对应存在，此时将自动转成索引项作为当前值。

数据内容为对象列表时，允许当前值内容在列表中不存在，并保持显示。注意：

如果设置当前的值内容（value）为undefined或null时，相当于复位，此时实际显示，取决于默认项索引（defaultIndex）配置索引对应的值。
如果传入空字符串""，不等同于复位，将直接清空显示。如果数据内容有配置值为空字符串""的，那么按照配置的name字段显示，通常取决于空选项配置（noneInfo）：索引1如果配置空字符串""，那么索引为0的文字将被用于显示。

清空保持值（`noDatasKeepVal`）

注意：该属性需展开
才能看到。

布尔类型可读写

在数据内容（datas）为空时，
值内容（value）属性值是否保持不被清空。

当勾选时，当数据内容（datas）属性为空数组时，对值内容（value）属性任意设置值时，会被自动清空；
当不勾选时，则会保留值内容（value）中非空属性值，即便此时下拉列表为空。

选择ID（`selectedID`）

注意：该属性需展开
才能看到。

对象类型可读写

当前选择项对应的ID值。

设置本属性时，与值内容（value）属性中设置效果等同。

注意，如果下拉框内容是文字列表，那么当前就是序号。

选择文字（`selectedText`）

字符串类型可读写

当前选中的项对应的名称文字。

注意，配置属性时，在树形结构中由于不同层级显示文字可能重复，此时会默认取第一个一个匹配到的项，而简单列表结构则一般不会有重复显示。设置时与用值内容（value）属性效果等同。

提供空选项（`hasNoneItem`）

注意：该属性需展开
才能看到。

布尔类型可读写

是否默认带空选项。

与属性空选项配置（noneInfo）配合使用。当勾选后，可以设置下拉列表的首项作为空选项，通常显示为无、全部等。

空选项配置（`noneInfo`）

注意：该属性需展开
才能看到。

对象数组可读写

是否默认带空选项。

当勾选了提供空选项（hasNoneItem）时，当前属性配置生效。配置方式：

索引0：用于配置空选项的显示文字，通常为无、所有等，作为下拉列表的第一个选项。
索引1：对应选择空时，选中ID（selectedID）的属性值。
索引2：对应值内容（value）。

注意：动态配置索引1和索引2，通常用于下拉选择空时，对外连线赋值清空，结合清空时（onEmpty）事件。该事件属于变化时（onChange）事件的子集，因此也可以用变化时事件，其结合当前属性来对外做重置清空。

选择过滤函数（`allowChoosing`）

注意：该属性需勾选专业模式才可见。

对象数组可读写

可否选中的过滤函数。

过滤函数

function allowChoosing(data,gv,cache,content,item){

}

参数说明

content

对象类型，其中有字段：

datas：数据内容（datas）属性的内容。
value：值内容（value）属性值。

如果数据项是对象，那么就是对象内的value字段值；如果数据项不是对象，那么就等同于数据项。

item

对象结构的值，显示字段为名称，值字段为id。

返回值

函数返回true时，当前项能选中，否则不能选中。

展开事件（`onOpened`）

注意：该属性需勾选专业模式才可见。

事件函数可读写

下拉展开列表时触发的事件。

值改变事件（`onChange`）

事件函数可读写

当下拉时当前选择的项（即值内容）发生变化时会触发本事件。

外观

背景颜色（`background`）

颜色数组类型可读写

背景色。
索引0：默认背景颜色。
索引1：只读时悬停背景色、禁用时默认背景色。
索引2：只读或禁用时按下背景色。

效果如下所示：

不勾选只读和禁用时，索引1和2的配置不起作用。
勾选只读且不勾选禁用时，下拉框鼠标悬停时，才显示索引1的颜色，并且下拉框能展开，但是不能输入，只能下拉选择。
勾选禁用时，会自动勾选上只读，此时默认显示就是索引1的颜色，并且点击也无法下拉，同时也无法输入。只能显示值。

字体（`font`）

注意：该属性需展开
才能看到。

字体类型可读写

下拉框内文字字体。
（不包括下拉展开列表的文字）

文字颜色（`color`）

注意：该属性需展开
才能看到。

颜色数组类型可读写

索引0：下拉框内文字颜色。索引1：标签文本颜色。
（不包括下拉展开列表的文字）

边框宽度（`borderWidth`）

数字类型可读写

下拉框边框宽度。
（不包含下拉展开列表边框）

边框圆角（`borderRadius`）

数字类型可读写

下拉框边框圆角。
（不包含下拉展开列表边框）

边框颜色（`borderColor`）

颜色数组可读写

下拉框边框圆角。
索引0：默认边框色。
索引1：输入时边框色。

占位提示符（`placeholder`）

字符类型可读写

未输入（值内容为空）时默认显示的占位提示文字。

标签颜色（`labelColor`）

颜色类型可读写

标签文本对应的颜色。

注意，该属性值会同步到标题属性组的颜色属性。

下拉树框阴影（`treeBoxShadow`）

注意：该属性需勾选专业模式才可见。

字符串类型可读写

格式类似：0px 8px 22px rgba(0,0,0,0.1)
其中后面rgba()用于设置阴影颜色。

下拉树背景色（`treeBackground`）

注意：该属性需勾选专业模式才可见。

颜色数组可读写

展开下拉的背景色。

索引0：默认背景色。
索引1：边框颜色。
索引2：行线颜色。
索引3：行默认背景色。
索引4：行悬停背景色。
索引5：行选中背景色。
索引6：行焦点背景色。

下拉树文字色（`treeLabelColor`）

注意：该属性需勾选专业模式才可见。

颜色数组可读写

展开下拉的文本颜色。

索引0：默认文字颜色；
索引1：悬停文字颜色；
索引2：选中文字颜色。

下拉树字体（`treeLabelFont`）

注意：该属性需勾选专业模式才可见。

字体类型可读写

下拉树文字字体。

下拉树行高（`treeRowHeight`）

注意：该属性需勾选专业模式才可见。

数字类型可读写

下拉树行的高度。

下拉树边框宽度（`treeBorderWidth`）

注意：该属性需勾选专业模式才可见。

数字类型可读写

下拉树边框的宽度。

下拉树边框圆角（`treeBorderRadius`）

注意：该属性需勾选专业模式才可见。

数字数组可读写

下拉树边框的圆角。
索引0~3依次是上、右、下、左。

下拉树四周边距（`treePadding`）

注意：该属性需勾选专业模式才可见。

数字数组可读写

下拉树四周边距。
索引0~3依次是上、右、下、左。

其他参见

公共属性

抽屉面板（`platte`）*

略

说明

使用

属性

功能

外观

其他参见

公共属性

日期时间（`range`）*

（参考下拉框整理）

说明

使用

属性

功能

外观

其他参见

公共属性

树表格（treeTable）

说明

树表格组件兼容了二维表格table（行不带父子节点）、树tree（带层级节点的单列）、列表list（不带层级节点的单列）。也就是说常规表格、树、列表，都可以通过树表格组件的配置来实现。

使用

属性

功能

重新加载 *（`reload`）

注意：该属性需勾选专业模式才可见。

布尔类型可读写

重新加载。通常用于连线触发表格重新加载数据。

重置行ID *（`rowsIdReset`）

注意：该属性需勾选专业模式才可见。

布尔类型可读写

重新加载。通常用于连线触发表格重新加载数据。注意，ID会按照行索引重置。

行选择模式 ★（`checkMode`）

注意：该属性需展开
才能看到。

枚举类型可读写

用于设置表格行是否可以勾选，以及勾选模式。

不启用单选或勾选 - 推荐√

默认值，行数据没有勾选/单选框。

勾选（仅自身）

没有更下级子节点的叫做末端节点。

该模式下，不论父节点还是子节点、末端节点，都可以独立勾选，并且不会相互影响。如下所示：

勾选（联动下级节点）

该模式下，父节点勾选，会联动直接下级子节点勾选，如下所示：

子节点的勾选，不会联动父节点。

勾选（联动各级子节点）

该模式下，父节点勾选，会逐层联动所有各级子节点勾选，如下所示：

子节点的勾选，不会联动父节点。

勾选（联动各级子以及父节点）- 推荐 ✓

该模式下，父子节点勾选，都会相互联动。并且对父节点被子节点联动勾选时，会有勾选、未勾选、半勾选三种状态。如下所示：

单选 - 推荐 ✓

该模式下，父子节点都可以单选，如下所示：

单选（父节点用于清空）

该模式下，末端节点可以单选，父节点不可选中，用于点击时清空选择，如下所示：

全部选中 *（`selectAllSet`）

注意：该属性需勾选专业模式才可见。

布尔类型只写

设置为全选。
要求行选择模式为勾选模式。

全部展开 ★（`expandAll`）

注意：该属性需展开
才能看到。

布尔类型可读写

全部展开。
对于有父子节点类型的表格起作用，对没有父子节点的表格设置无效。

允许行拖放 *（`dragDropEnable`）

注意：该属性需勾选专业模式才可见。

布尔类型可读写

启用拖放。
行可以拖放位置。

关键词查找（`visibleFilterInput`）

字符串类型可读写

行数据关键词过滤。
将所有行列文字作为内容，按照过滤规则进行关键词匹配，以此实现表格行数据搜索。

过滤规则如下：

空格隔开的字符串，被识别为多个独立的关键词，分别进行匹配，并且所有的都匹配到整体才算匹配成功，相当于交集。
英文逗号隔开的字符串，也被识别为多个独立的关键词，分别进行匹配，并且任一关键词匹配到，那么整体都算匹配成功，相当于并集。
当前属性如果是字符串数组，那么被当做情况1来处理，即多个关键词交集。
关键词末尾为空格（以空格结束）时，将严格匹配关键词字符串，内容中有包含字符且紧接后面还有字符时，不被认作匹配。

更多参见属性搜索。

鼠标禁用提示 *（`disableTooltip`）

注意：该属性需勾选专业模式才可见。

布尔类型可读写

禁用鼠标悬停提示。开启后，当前单元格的数据，悬停时能鼠标提示完整内容。

鼠标提示列 *（`columnForTooltip`）

注意：该属性需勾选专业模式才可见。

布尔类型可读写

禁用鼠标悬停提示。开启后，当前单元格的数据，悬停时能鼠标提示完整内容。

提示自定义函数 *（`toolTipCallback`）

注意：该属性需勾选专业模式才可见。

函数类型可读写

自定义鼠标悬停提示回调函数。注意：返回非空内容时，以这里设置为准。

参数说明：

data：当前表格组件图元对象
rowData：当然行各列数据
colIndex：当前单元格列索引
tipIndex：设置为提示列的索引
rowNode：当前行数据图元对象

颜色过滤函数 *（`colorFilterFunc`）

注意：该属性需勾选专业模式才可见。

函数类型可读写

指定行列文字的颜色。过滤函数提供行列信息，可指定某一列，或者某一行的某一列（单元格），根据内容判断返回指定的颜色。

参数说明：

node：组件对象
rObj：行数据
cObj：列定义
cIndex：列索引
value：当前值

数据过滤函数 *（`dataFilterFunc`）

注意：该属性需勾选专业模式才可见。

函数类型可读写

转换指定行列的显示内容。过滤函数提供行列信息，可指定某一列，或者某一行的某一列（单元格），根据内容判断返回指定的转换后的内容。

参数说明：

node：组件对象
rObj：行数据（图元对象）
cObj：列定义
cIndex：列索引
value：当前值

操作按钮函数 *（`btnsFilterFunc`）

注意：该属性需勾选专业模式才可见。

函数类型可读写

操作按钮列过滤。用于针对操作列中的按钮，提供当前行数据，自定义按钮对象的操作，包括识别行数据的标记，对某个按钮进行显示或隐藏等。无需返回，直接操作按钮对象即可。

参数说明：

node：组件对象
rObj：行数据
bObj：按钮象组
bIndex：按钮组中的索引

初始化用户数据 *（`userDataSelfInit`）

注意：该属性需勾选专业模式才可见。

布尔类型可读写

初始化用户数据。勾选后，默认以当前组件对象，作为用户数据值。

行点击事件（`onClick`）

事件函数可读写

当单击行时对外触发。

行双击事件（`onDoubleClick`）

事件函数可读写

当双击行时对外触发。

行勾选事件（`onCheck`）

事件函数可读写

当勾选时对外触发。

表格加载完成事件（`onDatasLoaded`）

事件函数可读写

当表格数据加载完成时触发。

操作按钮点击事件（`onLastButtonClick`）

事件函数可读写

操作按钮点击时触发。

操作按钮选择事件（`onLastButtonSelected`）

注意：该属性需展开
才能看到。

事件函数可读写

操作按钮切换选择时触发。

数据

数据内容（`datas`）

对象数组类型可读写

树表组件的数据。

支持以下三种格式：

格式一：对象数组（树表专用，对象字段固定有rowData、children）

数组的每个对象对应一行数据。
对象中，固定有名为rowData的字段。
该字段为数组类型，对应从当前行，第一列（如果算上可隐藏的序号列，这是第二列）开始的依次各行数据，通常是字符串，其他参见特殊情况。
下面示例中，1-1、1-2、1-3，分别是当前行的三列数据。
对象中，可能也会有名为children的字段。
该字段用来定义当前行作为父节点时，下级子行的数据。格式可完全参考当前数据对象数组格式。没有该字段或者该字段的值为空数组，就没有子行。

如下所示：

[
    {
        "rowData":["1-1","1-2","1-3"],
        "children":[
          {
            "rowData":["1-1-1","1-1-2","1-1-3"],
            "children":[]
          },{
            "rowData":["1-1-1","1-1-2","1-1-3"],
            "children":[]
          }
        ]
    },{
      "rowData":["2-1","2-2","2-3"]
    },{
      "rowData":["3-1","3-2","3-3"]
    }
]

加载效果：

注意：
该格式无需为表格的每列定义特定字段来对应数据。数据完全是按照从左至右，依次填入表格的各列。
rowData数组的数据个数，小于表格列数时，右侧空出的列数据显示为空。
rowData数组的数据个数，大于表格列数时，多出的数据不显示在表格中。

格式二：数组数组（常规表格，无需定义列字段，数组按顺序对应列）

与格式一类似，都无需定义列字段，列数据数组，按照顺序依次对应到各列。
不支持父子节点行的定义，数据中无任何字段，结构非常简单。

加载示例如下：

[
    [ "1-1", "1-2", "1-3" ],
    [ "2-1", "2-2", "2-3" ],
    [ "3-1", "3-2", "3-3" ]
]

格式三：对象数组（常规表格：对象字段对应列，需定义数据字段）

需要为列定义数据字段。序号首列除外（操作列也除外）。对象数组的配置过程，如果不方便，可参见：对象数组配置。
列定义对象中的name，用于存放定义的数据字段。
数据对象数组，将严格按照列字段和数据字段的匹配加载数据，不是按照数据字段的顺序。

数据示例如下，加载效果跟格式二中的一样：

[
    {
        "user": "1-1",
        "password": "1-2",
        "email": "1-3"
    },
    {
        "user": "2-1",
        "password": "2-2",
        "email": "2-3"
    },
    {
        "user": "3-1",
        "password": "3-2",
        "email": "3-3"
    }
]

特殊情况：
单元格除了显示字符串，还可以是内嵌一个或多个图标/图片等，甚至是内嵌其他页面。现在分别说明如下：

情况一：单元格内嵌图片

当列定义中有设置字段"drawCell":{}时，表格支持的三种格式的数据，都可以填入以下格式的对象（或对象数组），代替常见的字符串值，实现单元格内嵌一个或多个图片或图标，并且可以点击。如下所示：

type
类型字段值固定位"image"（如果是单元格内嵌页面，那么值是"graphView"）。
icon
图标（.json后缀）、图片（.png/jpg后缀）等路径。

值可以是单个对象

{
    "type": "image",
    "icon": "assets/develop/uiotos/arranged/assets/界面素材/01.png"
}

也可以是对象数组

[{
    "type": "image",
    "icon": "assets/develop/uiotos/arranged/assets/界面素材/01.png"
},{
    "type": "image",
    "icon": "assets/develop/uiotos/arranged/assets/界面素材/01.png"
},{
    "type": "image",
    "icon": "assets/develop/uiotos/arranged/assets/界面素材/01.png"
}]

三种格式分别示例如下：

格式一

表格列定义

指定列支持自定义单元格，即加上键值对drawCell:{}

[
    {
        "displayName": "序号"
    },
    {
        "displayName": "人员姓名"
    },
    {
        "displayName": "所属公司",
        "drawCell": {}
    },
    {
        "displayName": "人员类型"
    }
]

数据内容

任意在某行数据的对应列，用上述指定格式的对象，或者对象数组作为值。
注意：数据数组（rawData）中不包含索引列（自动序号作为数据）。因此这里数据索引，跟列定义索引存在错位。

[
    {
        "rowData":["1-1","1-2","1-3"],
        "children":[
          {
            "rowData":[
                "1-1-1",{
                    "type": "image",
                    "icon": "assets/develop/uiotos/arranged/assets/界面素材/01.png"
                },
                "1-1-3"
            ],
            "children":[]
          },{
            "rowData":["1-1-1","1-1-2","1-1-3"],
            "children":[]
          }
        ]
    },{
      "rowData":["2-1","2-2","2-3"]
    },{
      "rowData":["3-1","3-2","3-3"]
    }
]

加载效果

如果值是对象数组，那么会内嵌有多个图片：

格式二

表格列定义

指定列支持自定义单元格，即加上键值对drawCell:{}

[
    {
        "displayName": "序号"
    },
    {
        "displayName": "人员姓名"
    },
    {
        "displayName": "所属公司",
        "drawCell": {}
    },
    {
        "displayName": "人员类型"
    }
]

数据内容

[
    [
        "1-1",{
            "type": "image",
            "icon": "assets/develop/uiotos/arranged/assets/界面素材/01.png"
        },
        "1-3"
    ],
    [
        "2-1",
        "2-2",
        "2-3"
    ],
    [
        "3-1",
        "3-2",
        "3-3"
    ]
]

加载效果

格式三

表格列定义

指定列支持自定义单元格，即加上键值对drawCell:{}

[
    {
        "displayName": "序号"
    },
    {
        "displayName": "人员姓名",
        "name": "user"
    },
    {
        "displayName": "所属公司",
        "name": "password",
        "drawCell": {}
    },
    {
        "displayName": "人员类型",
        "name": "email"
    }
]

数据内容

[
    {
        "user": "1-1",
        "password": "1-2",
        "email": "1-3",
        "id": 1
    },
    {
        "user": "2-1",
        "password": {
            "type": "image",
            "icon": "assets/develop/uiotos/arranged/assets/界面素材/01.png"
        },
        "email": "2-3",
        "id": 2
    },
    {
        "user": "3-1",
        "password": "3-2",
        "email": "3-3",
        "id": 3
    }
]

数据内容

此外，内嵌图标/图片相关属性：

内嵌图片间距 *（itemsGap）

情况二：单元格内嵌页面

列定义设置字段"drawCell":{}时，表格支持的三种格式的数据，也可以填入以下格式的对象，代替常见的字符串值，实现单元格内嵌任意其他页面。如下所示：

type
类型字段值固定位"graphView"（如果是单元格内嵌图标，那么值是"image"）。
display
其他任意页面路径。
注意：原则上，内嵌页面能实现单元格的任意自定义，包括内嵌图标。但对于仅只需显示图片在单元格的情况，用内嵌页面就太重了。

{
    "type": "graphView",
    "display": "displays/admin/uiotos/editor/widgets/cellGraphView.json"
}

三种格式分别示例如下：

格式一

表格列定义

指定列支持自定义单元格，即加上键值对drawCell:{}

[
    {
        "displayName": "序号"
    },
    {
        "displayName": "人员姓名"
    },
    {
        "displayName": "所属公司",
        "drawCell": {}
    },
    {
        "displayName": "人员类型"
    }
]

数据内容

任意在某行数据的对应列，用上述指定格式的对象，或者对象数组作为值。
注意：数据数组（rawData）中不包含索引列（自动序号作为数据）。因此这里数据索引，跟列定义索引存在错位。

[
    {
        "rowData":["1-1","1-2","1-3"],
        "children":[
          {
            "rowData":[
                "1-1-1",{
                    "type": "graphView",
                    "display": "displays/admin/uiotos/editor/widgets/cellGraphView.json"
                },
                "1-1-3"
            ],
            "children":[]
          },{
            "rowData":["1-1-1","1-1-2","1-1-3"],
            "children":[]
          }
        ]
    },{
      "rowData":["2-1","2-2","2-3"]
    },{
      "rowData":["3-1","3-2","3-3"]
    }
]

加载效果

格式二

表格列定义

指定列支持自定义单元格，即加上键值对drawCell:{}

[
    {
        "displayName": "序号"
    },
    {
        "displayName": "人员姓名"
    },
    {
        "displayName": "所属公司",
        "drawCell": {}
    },
    {
        "displayName": "人员类型"
    }
]

数据内容

[
    [
        "1-1",{
            "type": "graphView",
            "display": "displays/admin/uiotos/editor/widgets/cellGraphView.json"
        },
        "1-3"
    ],
    [
        "2-1",
        "2-2",
        "2-3"
    ],
    [
        "3-1",
        "3-2",
        "3-3"
    ]
]

加载效果

格式三

表格列定义

指定列支持自定义单元格，即加上键值对drawCell:{}

[
    {
        "displayName": "序号"
    },
    {
        "displayName": "人员姓名",
        "name": "user"
    },
    {
        "displayName": "所属公司",
        "name": "password",
        "drawCell": {}
    },
    {
        "displayName": "人员类型",
        "name": "email"
    }
]

数据内容

[
    {
        "user": "1-1",
        "password": "1-2",
        "email": "1-3"
    },
    {
        "user": "2-1",
        "password": {
            "type": "graphView",
            "display": "displays/admin/uiotos/editor/widgets/cellGraphView.json"
        },
        "email": "2-3"
    },
    {
        "user": "3-1",
        "password": "3-2",
        "email": "3-3"
    }
]

数据内容

注意：数据内容通常由接口查询返回，而非手动配置。

因此，通常结合工具函数查询返回转树表，可以让API接口查询返回数据给到表格。在线示例：

displays/demo/3-示例/02-小示例/15-接口数据给树表.json

附：综合典型示例

表格列定义

[
    {
        "displayName": "序号"
    },
    {
        "displayName": "人员姓名"
    },
    {
        "displayName": "所属公司",
        "editable": false,
        "editorClass": "ht.ui.editor.StringEditor"
    },
    {
        "displayName": "人员类型",
        "editable": true,
        "editorClass": "ht.ui.editor.StringEditor"
    },
    {
        "displayName": "连接状态",
        "drawCell": {}
    },
    {
        "displayName": "设备名称",
        "drawCell": {
            "width": 25,
            "height": null
        }
    },
    {
        "displayName": "通行照片",
        "editable": true,
        "drawCell": {
            "width": null,
            "height": null
        }
    },
    {
        "displayName": "运行状态",
        "editable": true,
        "drawCell": {}
    },
    {
        "displayName": "操作"
    }
]

数据内容

[
    {
        "rowData": [
            "设备1",
            "南入口出入通道模块",
            "南入口通道",
            {
                "type": "graphView",
                "display": "displays/admin/uiotos/editor/widgets/cellGraphView.json"
            },
            [
                {
                    "type": "image",
                    "icon": "symbols/demo/uiotos/icons/light/address-book.json"
                },
                {
                    "type": "image",
                    "icon": "symbols/demo/uiotos/icons/light/amp-guitar.json"
                }
            ],
            "正常通行",
            {
                "type": "graphView",
                "display": "displays/admin/uiotos/editor/widgets/cellGraphViewMutiple.json"
            }
        ],
        "children": [
            {
                "rowData": [
                    "子设备M",
                    "北入口通道出入模块",
                    "北入口通道",
                    {
                        "type": "graphView",
                        "display": "displays/admin/uiotos/editor/widgets/cellGraphView.json"
                    },
                    [
                        {
                            "type": "image",
                            "icon": "symbols/demo/uiotos/icons/light/ambulance.json"
                        },
                        {
                            "type": "image",
                            "icon": "symbols/demo/uiotos/icons/light/american-sign-language-interpreting.json"
                        },
                        {
                            "type": "image",
                            "icon": "symbols/demo/uiotos/icons/light/american-sign-language-interpreting.json"
                        },
                        {
                            "type": "image",
                            "icon": "symbols/demo/uiotos/icons/light/american-sign-language-interpreting.json"
                        }
                    ],
                    "正常"
                ],
                "children": [
                    [
                        "子设备A",
                        "西门出入口",
                        "1号门",
                        {
                            "type": "graphView",
                            "display": "displays/admin/uiotos/editor/widgets/cellGraphView.json"
                        },
                        {
                            "type": "image",
                            "icon": "symbols/demo/uiotos/icons/light/address-book.json"
                        },
                        [
                            {
                                "type": "image",
                                "icon": "assets/demo/fcj/403db210783cba7d2720ac2852122342.png"
                            },
                            {
                                "type": "image",
                                "icon": "symbols/demo/uiotos/icons/light/address-book.json"
                            }
                        ],
                        "测试",
                        {
                            "type": "graphView",
                            "display": "displays/admin/uiotos/editor/widgets/cellGraphViewMutiple.json"
                        }
                    ],
                    [
                        "子设备B",
                        "北入口通道出入模块",
                        "北入口通道",
                        {
                            "type": "graphView",
                            "display": "displays/admin/uiotos/editor/widgets/cellGraphView.json"
                        },
                        [
                            {
                                "type": "image",
                                "icon": "symbols/demo/uiotos/icons/light/amp-guitar.json"
                            },
                            {
                                "type": "image",
                                "icon": "symbols/demo/uiotos/icons/light/amp-guitar.json"
                            },
                            {
                                "type": "image",
                                "icon": "symbols/demo/uiotos/icons/light/amp-guitar.json"
                            },
                            {
                                "type": "image",
                                "icon": "symbols/demo/uiotos/icons/light/amp-guitar.json"
                            },
                            {
                                "type": "image",
                                "icon": "symbols/demo/uiotos/icons/light/american-sign-language-interpreting.json"
                            },
                            {
                                "type": "image",
                                "icon": "symbols/demo/uiotos/icons/light/american-sign-language-interpreting.json"
                            },
                            {
                                "type": "image",
                                "icon": "symbols/demo/uiotos/icons/light/american-sign-language-interpreting.json"
                            }
                        ],
                        "非法通行",
                        {
                            "type": "graphView",
                            "display": "displays/admin/uiotos/editor/widgets/cellGraphView.json"
                        }
                    ]
                ],
                "id": 2
            }
        ],
        "id": 1
    },
    [
        "设备3",
        "西门出入口",
        "1号门",
        {
            "type": "graphView",
            "display": "displays/admin/uiotos/editor/widgets/cellGraphView.json"
        },
        {
            "type": "image",
            "icon": "symbols/demo/uiotos/icons/light/address-book.json"
        },
        [
            {
                "type": "image",
                "icon": "assets/demo/fcj/403db210783cba7d2720ac2852122342.png"
            },
            {
                "type": "image",
                "icon": "symbols/demo/uiotos/icons/light/address-book.json"
            }
        ],
        "测试",
        {
            "type": "graphView",
            "display": "displays/admin/uiotos/editor/widgets/cellGraphViewMutiple.json"
        }
    ],
    [
        "设备4",
        "1门出入口",
        "2号门",
        {
            "type": "graphView",
            "display": "displays/admin/uiotos/editor/widgets/cellGraphView.json"
        },
        {
            "type": "image",
            "icon": "symbols/demo/uiotos/icons/light/address-book.json"
        },
        [
            {
                "type": "image",
                "icon": "assets/demo/fcj/403db210783cba7d2720ac2852122342.png"
            },
            {
                "type": "image",
                "icon": "symbols/demo/uiotos/icons/light/address-book.json"
            }
        ],
        "测试2",
        {
            "type": "graphView",
            "display": "displays/admin/uiotos/editor/widgets/cellGraphViewMutiple.json"
        }
    ],
    [
        "设备5",
        "北入口通道出入模块",
        "北入口通道",
        {
            "type": "graphView",
            "display": "displays/admin/uiotos/editor/widgets/cellGraphView.json"
        },
        [
            {
                "type": "image",
                "icon": "symbols/demo/uiotos/icons/light/amp-guitar.json"
            },
            {
                "type": "image",
                "icon": "symbols/demo/uiotos/icons/light/amp-guitar.json"
            },
            {
                "type": "image",
                "icon": "symbols/demo/uiotos/icons/light/amp-guitar.json"
            },
            {
                "type": "image",
                "icon": "symbols/demo/uiotos/icons/light/amp-guitar.json"
            },
            {
                "type": "image",
                "icon": "symbols/demo/uiotos/icons/light/american-sign-language-interpreting.json"
            },
            {
                "type": "image",
                "icon": "symbols/demo/uiotos/icons/light/american-sign-language-interpreting.json"
            },
            {
                "type": "image",
                "icon": "symbols/demo/uiotos/icons/light/american-sign-language-interpreting.json"
            }
        ],
        "非法通行",
        {
            "type": "graphView",
            "display": "displays/admin/uiotos/editor/widgets/cellGraphView.json"
        }
    ],
    {
        "rowData": [
            "设备6",
            "南入口出入通道模块",
            "南入口通道",
            {
                "type": "graphView",
                "display": "displays/admin/uiotos/editor/widgets/cellGraphView.json"
            },
            [
                {
                    "type": "image",
                    "icon": "symbols/demo/uiotos/icons/light/address-book.json"
                },
                {
                    "type": "image",
                    "icon": "symbols/demo/uiotos/icons/light/amp-guitar.json"
                }
            ],
            "正常通行",
            {
                "type": "graphView",
                "display": "displays/admin/uiotos/editor/widgets/cellGraphViewMutiple.json"
            }
        ],
        "children": [
            {
                "rowData": [
                    "子设备X",
                    "北入口通道出入模块",
                    "北入口通道",
                    {
                        "type": "graphView",
                        "display": "displays/admin/uiotos/editor/widgets/cellGraphView.json"
                    },
                    [
                        {
                            "type": "image",
                            "icon": "symbols/demo/uiotos/icons/light/ambulance.json"
                        },
                        {
                            "type": "image",
                            "icon": "symbols/demo/uiotos/icons/light/american-sign-language-interpreting.json"
                        },
                        {
                            "type": "image",
                            "icon": "symbols/demo/uiotos/icons/light/american-sign-language-interpreting.json"
                        },
                        {
                            "type": "image",
                            "icon": "symbols/demo/uiotos/icons/light/american-sign-language-interpreting.json"
                        }
                    ],
                    "正常"
                ],
                "children": [],
                "id": 9
            }
        ],
        "id": 8
    },
    [
        "设备7",
        "北入口通道出入模块",
        "北入口通道",
        {
            "type": "graphView",
            "display": "displays/admin/uiotos/editor/widgets/cellGraphView.json"
        },
        [
            {
                "type": "image",
                "icon": "symbols/demo/uiotos/icons/light/ambulance.json"
            },
            {
                "type": "image",
                "icon": "symbols/demo/uiotos/icons/light/american-sign-language-interpreting.json"
            },
            {
                "type": "image",
                "icon": "symbols/demo/uiotos/icons/light/american-sign-language-interpreting.json"
            },
            {
                "type": "image",
                "icon": "symbols/demo/uiotos/icons/light/american-sign-language-interpreting.json"
            }
        ],
        "正常"
    ]
]

列宽定义

[75,150,180,80,100,-0.65,-0.35,100,150]

操作按钮项

['查看','添加','删除']

效果示例：

其他相关：

上述列出当前组件支持的所有格式的数据。除此之外，还支持对任意JSON对象数据加载显示，参见JSON对象转树表（treeJsonToTreeTable），可以由该函数将任意JSON对象，按照指定规则，转换成可识别的格式。
根据ID字段值获取一行或多行数据，以及删除行数据，可参见JSON数组获取对象元素（arrObjItem）。

ID字段 ★（`idField`）

注意：该属性需展开
才能看到。

字符串类型可读写

行数据的ID字段。默认为“id”，可以指定其他。勾选行ID属性（checkSelected）存放勾选的ID列表，以这里确定的字段为准。

本属性支持传入的数据格式跟数据内容完全一样（对象数组）。此外，还支持仅传入符合对象格式的单个对象，追加单行数据。

数据追加 ★（`dataAdd`）

注意：该属性需展开
才能看到。

对象数组只写

添加数据。
在已有数据内容基础上，追加一行或多行。

本属性支持传入的数据格式跟数据内容完全一样（对象数组）。此外，还支持仅传入符合对象格式的单个对象，追加单行数据。

表格列定义（`columns`）

对象数组可读写

定义表格的列数量、数据字段，以及列的自定义相关参数等。
对象数组的快捷配置参见：对象数组配置

列宽定义（`columnWidths`）

字符串数组可读写

定义各列宽度。包括固定宽度，比例宽度，隐藏等。

具体设置规则如下（可以类比网格组件的行列比例规则）：

值>1时：
绝对像素宽度。比如200，表示当前列宽为200px。
值=1或=-1时：
表格剩余的总宽度作为当前的列宽。
-1<值<0，或0<值<1时：
除了绝对像素宽度外，剩余总宽的比例。
负数跟正数一样，比如-0.2和0.2都是20%。如果表格宽度，减去固定宽度剩余100px，那么当前列宽就是20px。并且随着表格宽度动态变化，也按剩余20%变化。
值=0时：
剩余宽度等比分配。
如果有多个设置了0，那么这多个等比分。比如出去固定像素、比例像素0.4，那么剩下60%，当有3列分别设置为0时，各列等同于分别设置0.2。
值=-1时：
当前列不可见（列宽为0）。

效果如下所示：

列字段定义 *（`columnFields`）

注意：该属性需勾选专业模式才可见。

对象数组可读写

列的数据字段。用于快速定义，表格列定义（columns）也能实现，但是这里更方便设置，通常与特定工具函数结合使用。

详细说明如下：

等同于表格列定义（columns）对象的name字段，两处配置会自动同步，保持索引对应。
首项默认为空（null）。因为表格列定义（columns）中，首项为序号列且内容自动生成，仅开放列定显示名称配置，因此无数据字段。当前属性实际数据字段从索引1开始。
工具函数查询返回转换成树表操作树表格的数据内容（datas）属性时，会自动将字段同步到当前属性上（保持首项默认为空，从索引1开始），以对应树表的各个数据字段。
有操作按钮列（操作按钮项属性有配置）时，本属性不会同步给列定义中对应的末尾项。因为操作列也是通常无数据字段的，仅有编辑、删除、修改等按钮。

下拉框对应列 *（`fieldForCombo`）

注意：该属性需勾选专业模式才可见。

整数类型可读写

取指定索引列的数据，生成下拉框所需的格式，输出给取下拉框数据属性。值可以是列名称或者列索引（数字会被当成索引，且从0开始（第0列属于序号列）。

取下拉框数据 *（`dataComboType`）

注意：该属性需勾选专业模式才可见。

对象类型只读

指定列的下拉框格式的数据。由属性下拉框对应列（fieldForCombo）指定。

该属性的数据通常用于给到表格之外的下拉框组件。比如条件查询列表数据中，某个条件选项。

取表格内嵌页 *（`innerDisplays`）

注意：该属性需勾选专业模式才可见。

对象数组只读

单元格可能存在的内嵌页面。只读，从数据内容（datas）属性配置中自动提取过来。

对象格式如下：

cellPos：单元格位置
rowId：行索引。
colId：列索引。
display：内嵌页地址。

{
    cellPos: {
        rowId: 1, //行索引
        colId: 1 //列索引
    },
    display: "displays/xxx.json"
}

取所有行ID * （`allRowsIdGet`）

注意：该属性需勾选专业模式才可见。

数字数组只读

获取所有行id。其中，id取决于ID字段属性。

当前选择的ID * （`currentIdSelect`）

注意：该属性需勾选专业模式才可见。

对象类型可读性

当前选择的ID。

取当前点击数据 * （`currentClicked`）

对象类型可读写

获取当前点击的行数据。对象格式，包含了当前行的所有信息。注意，单击、双击、勾选、取消勾选时都会出触发当前属性值更新。

对象结构说明如下：

kind：事件类型名称。
rowData：当前行数据对象。
rowObj：行数据键值对，格式与rowData数据互补。
rowId：当前行ID。
button：操作按钮（可能没有该字段）。
text：操作按钮显示文字。
index：从0开始，操作按钮从左到右的索引。

统计勾选数 * （`checkCountGet`）

注意：该属性需勾选专业模式才可见。

非负整数类型只读

已勾选的行数。只读属性，且勾选模式下生效。注意，不包含节点，只统计末端节点（无更下级节点）的行勾选数。

统计总行数 * （`allRowCountGet`）

注意：该属性需勾选专业模式才可见。

非负整数类型只读

所有末端行数量。只读属性。
注意，不包含节点，只统计没有更下级节点行的总数。

采用节点链 * （`useTreeLined`）

注意：该属性需勾选专业模式才可见。

布尔类型可读写

树表多级节点展开时，末端节点（无更下级节点）的文字显示，在不同节点下会重复。本属性就是为了精准定位某行，用于精确查找以及勾选设置等。

节点链的规则：以自身文字，逐层加上级节点文字，直到根节点，形成的一串并且默认以">"间隔隔开的字符串。如下所示：

示例数据：
行1： a -
行2： b
行3： c -
行4： d
节点d的上级节点为c，再上级为a，因此可以用"a>c>d"（也称作行keyURL）来匹配定位d。在查询匹配项（queryMatched）、关键词查找（visibleFilterInput）等场景非常有用。
关键词查找（visibleFilterInput）
用文字的节点链代替原文字内容被检索。
查询匹配项（queryMatched）
显示的不是文字d，而是逐层带上节点后节点链文字"a>c>d"。

节点链对应ID * （`treeLinedAttr2Id`）

注意：该属性需勾选专业模式才可见。

对象类型可读写

行节点链与数据ID的键值对。

查询指定字段 * （`fieldQueryRely`）

注意：该属性需勾选专业模式才可见。

字符串类型可读写

字段查询依赖。支持传入列索引，或列定义中的数据字段名（name），或显示字段名（displayName） 。

该属性需行数据能单选或勾选才有意义（行选择模式 ★（checkMode））。决定了查询匹配项（queryMatched）属性，具体采用当前行中，哪一列的文字用于匹配是否选中。并且间接影响到勾选行ID（checkSelected）和勾选行序号 *（checkIndexsGet）属性。使用方式：

通过列索引、列的显示名称（displayName）或数据字段名（name），来指定某一列。
以下情况，默认指定索引为1的列（序号列的索引为0）：
属性值未设置，或设为空字符串；
设为0、"0"、null，且序号列没有定义数据字段（name）时；
设置字段名称字符串，但在列定义中没有；
设置的索引值，超出列定义数组长度（或索引位置为空对象）时；

使用效果如下：

查询匹配项（`queryMatched`）

对象数组可读写

查询匹配项。与勾选行ID（checkSelected）属性双向同步，用来设置或显示与匹配到的行。

该属性需行数据能单选或勾选才有意义（行选择模式 ★（checkMode））。

一方面用于在勾选行ID（checkSelected）属性设置了选中行的ID后，这里对应为选中行的文字。注意，行通常有多列，取行中某一列的文字，具体由查询指定字段 * （fieldQueryRely）属性指定。

注意，行ID不可能重复，但是同一列的不同行文字，极可能重复。因此当前属性作为行文字，在于勾选行ID（checkSelected）属性双向同步时，需遵守以下规则：

设置文字（查询匹配项（queryMatched）），同步给ID（勾选行ID（checkSelected））时，指定列中所有匹配到行都会勾选，并且将这些行的ID列表，同步到（勾选行ID（checkSelected））中。如下所示：
设置ID（勾选行ID（checkSelected）），同步给文字（查询匹配项（queryMatched））时，ID对应的行都会勾选，并注意，只将行对应列的文字，合并成不重复的数组，再同步给勾选行ID（checkSelected），而且即便其中文字，还对应有其他行未勾选，也自动忽略，确保以设定的ID（列表）为准。如下所示：
注意：本属性会直接影响树表格行数据的勾选（行选择模式 ★（checkMode）属性设置为前提），并且对于节点（有下级子行）不起作用。
运行时勾选节点，下面所有行都会勾选，但在当前属性设置中，不论是查询匹配项（queryMatched）还是行选择模式 ★（checkMode），节点设置无效，不会触发勾选其下面所有行。

勾选行ID（`checkSelected`）

对象数组可读写

选中的行ID列表。其中ID取决于ID字段 ★（idField）属性配置。

与其他属性同步：

单向同步给勾选行序号 *（checkIndexsGet）属性。未设置ID字段 ★（idField）时，行ID和行序号默认相同。
与查询匹配项（queryMatched）属性保持双向同步。

勾选行序号 *（`checkIndexsGet`）

注意：该属性需勾选专业模式才可见。

对象数组只读

选中的行序号列表。勾选一行或多行数据的序号。

操作按钮项 ★（`lastItems`）

注意：该属性需展开
才能看到。

对象数组可读写

操作列按钮。通常在最后一行。比如查看、编辑、删除等。

不为空时，最后一列就是操作列，固定显示按钮，表格列定义（columns）中设置显示字段（displayName）之外的字段将不起作用。为空时，最后一列就是正常的数据列。

如果当前表格为上下级树表节点形式，那么本属性可以结合以下几个忽略属性，共同决定每行最终显示哪些按钮操作。如下所示：

此外，可以配置操作列的状态切换按钮，详见操作按钮切换开关如何配置？相关属性：
操作按钮项 ★（lastItems）
独节点忽略项 *（lastSingleIgnored）
行附加用户数据 *（rowsExtraUserInfo）
外观配置的相关属性：
操作按钮默认色 *（lastColorsDefault）
操作按钮悬停色 *（lastColorsHover）
操作按钮按下色 *（lastColorsActive）。
操作按钮间距 *（lastGap）

根节点忽略项 *（`lastRootIgnored`）

注意：该属性需勾选专业模式才可见。

整数数组可读性

对于根节点行（无父行，有子行），操作按钮项 ★（lastItems）定义中哪些按钮不可见，填入对应的索引列表。

比如完整按钮项有新增、修改、删除，但是对根节点，不希望有删除操作，因此可以设置[2]，忽略掉索引为2的按钮，只显示新增和修改。

子节点忽略项 *（`lastRootIgnored`）

注意：该属性需勾选专业模式才可见。

整数数组可读写

对于子节点行（有父行，有子行），操作按钮项 ★（lastItems）定义中哪些按钮不可见，填入对应的索引列表。

末节点忽略项 *（`lastChildIgnored`）

注意：该属性需勾选专业模式才可见。

整数数组可读写

对于末端节点行（有父行，无子行），操作按钮项 ★（lastItems）定义中哪些按钮不可见，填入对应的索引列表。

独节点忽略项 *（`lastSingleIgnored`）

注意：该属性需勾选专业模式才可见。

整数数组可读写

对于独节点行（无父行，无子行），操作按钮项 ★（lastItems）定义中哪些按钮不可见，填入对应的索引列表。

此外，还存在特殊用途，可配合其他属性，将操作按钮配置为切换开关：

特殊用途（操作按钮切换开关）如何配置？

步骤说明如下：
操作按钮项 ★（lastItems）需有且仅设置2项。比如绑定、未绑定。
独节点忽略项 *（lastSingleIgnored）有且仅设置1项，值为操作按钮项 ★（lastItems）的2项中一项的索引，即固定为0或1。用来设定待切换的默认隐藏不可见按钮。
行附加用户数据 *（rowsExtraUserInfo）在此基础上，设置索引值。其中索引与行序号对应（注意，这里索引0，对应行序号1；索引1对应行序号2，以此类推）。
填入值为1或者true时，操作按钮切换，显示默认隐藏的按钮（示例中是未绑定）；
填入值为0、false或空（默认）时，显示此前默认显示的按钮（示例是绑定）
完整操作效果：

独节点视为根 *（`singleRootOrChild`）

注意：该属性需勾选专业模式才可见。

布尔类型可读写

默认根节点还是子节点。
勾选时，将独节点忽略项 *（lastSingleIgnored）视作根节点。不勾选时，视作末端节点。对应某些场景，比如根节点不可删除，末端子节点可删除时。

行附加用户数据 *（`rowsExtraUserInfo`）

注意：该属性需勾选专业模式才可见。

对象数组可读写

行对应的用户数据。数组类型，索引与行序号对应。表格行在点击、双击、操作按钮点击时，会更新当前属性值，并且在对外连线触发中传出。
对行的交互操作时，会将当前事件操作带的数据填充到当前属性对应的索引位置，且索引与当前行索引一致。

此外，行附加用户数据 *（rowsExtraUserInfo）属性和操作按钮项 ★（lastItems）、独节点忽略项 *（lastSingleIgnored）三个属性结合，可以配置操作列的状态切换按钮，详见操作按钮切换开关如何配置？

单操作按钮绑定 *（`lastItemRowsText`）

注意：该属性需勾选专业模式才可见。

字符串数组可读写

自定义行的操作按钮显示文字。比如操作按钮默认为查看、编辑，，现在可指定某行的查看，显示为已读（还是同一个按钮，只是显示文字变化）。

使用说明：
索引0，设置整数（索引）选择操作按钮。操作按钮项（lastItems）可能有多个，比如查看、编辑、删除。设置1时，指定编辑按钮。其中查看、编辑、删除，三个按钮索引依次是0、1、2。
索引1开始，设置字符串，依次对应各行（从序号1开始），在指定按钮上的显示文字：
空值（undefined，或者空字符串""）时，显示按钮的原始文字。
非空值时，按钮显示设定的文字。
配置示例：
完整效果：

外观

操作按钮默认色 *（`lastColorsDefault`）

注意：该属性需勾选专业模式才可见。

颜色数组可读写

操作按钮分别默认下的背颜色，与操作按钮项 ★（lastItems）保持索引对应。

操作按钮悬停色 *（`lastColorsHover`）

注意：该属性需勾选专业模式才可见。

颜色数组可读写

操作按钮分别悬停时的背景色，与操作按钮项 ★（lastItems）保持索引对应。

操作按钮按下色 *（`lastColorsActive`）

注意：该属性需勾选专业模式才可见。

颜色数组可读写

操作按钮分别按下时的背景色，与操作按钮项 ★（lastItems）保持索引对应。

操作按钮间距 *（`lastGap`）

注意：该属性需勾选专业模式才可见。

数字类型可读写

操作按钮项（lastItems）中按钮之间的间距。

内嵌图片间距 *（`itemsGap`）

注意：该属性需勾选专业模式才可见。

数字类型可读写

用于在列单元格填充多个图片或图标时，设置图片之间的间距。

通常在单元格内嵌图片时使用，效果如下所示：

背景颜色 ★（`itemsGap`）

注意：该属性需展开
才能看到。

颜色数组可读写

表格背景色。
索引0：表格内容区背景色。
索引1：表格头背景色

注意，表格内容区的显示颜色分为三层，自上而下分别对应以下属性：

行条纹色 *（stripeColors）设置顶层行颜色。
行背景色（rowBackground）设置上层数据行颜色。
背景颜色 *（itemsGap）设置底部表格颜色。

示例效果和说明如下：

上层颜色会覆盖下层颜色。
上层颜色清空时，会采用下层颜色。
要让表格全透明，需确保上述三个颜色，都不可见才行。

行背景色（`rowBackground`）

颜色数组可读写

表格行背景颜色。
索引0、1、2，分别代表行的默认、悬停和选中背景色。

当前属性在表格背景颜色 *（itemsGap）上层，因此会覆盖表格背景，同时在行条纹色 *（stripeColors）下层，因此会被条纹色覆盖。

具体可参见背景颜色 *（itemsGap）中的示例。

行条纹色 ★（`stripeColors`）

注意：该属性需展开
才能看到。

颜色数组可读写

条纹颜色数组。索引0和1对应配置条纹间隔色。注意，本属性需勾选启用行条纹 *（rowStriped）才生效。

当前属性在行背景色（rowBackground）上层，因此会覆盖行背景色。如果条纹色任何一个没有配置，就会采用对应的下层颜色，具体规则为：

索引0颜色为空（或未配置）时，采用行背景色（rowBackground）索引0的颜色，即行默认背景颜色。
索引1颜色为空（或未配置）时，采用行背景色（rowBackground）索引1的颜色，即行悬停背景颜色。
如果行背景色（rowBackground）对应索引颜色也为空，那么当前就会采用背景颜色 *（itemsGap）索引0颜色，即表格背景色。

效果如下所示：（更多可参见背景颜色 *（itemsGap）示例）

启用行条纹 ★（`rowStriped`）

注意：该属性需展开
才能看到。

布尔类型可读写

是否启用行条纹颜色配置。启用后，会代替行背景色（rowBackground）索引0配置的行默认背景色，采用行条纹色 *（stripeColors）的配置。

表格文字色（`tableTextColor`）

颜色数组可读写

文字颜色数组。
索引0：表格内容文字颜色，
索引1：表格标题文字颜色。

节点文字色（`treeNodeTextColor`）

颜色数组可读写

树节点文字颜色。
索引0：末端节点（无下级）文字颜色。未配置时，采用表格文字色（tableTextColor）索引0颜色（即内容文字色）。
索引1：父节点文字颜色。未配置时，保持跟索引0一致（即跟末端节点文字颜色相同）。

线条颜色（`borderColor`）

颜色数组可读写

表格边框线、行列线等颜色。
索引0：表格外边框颜色（需边框属性大于0才可见）
索引1：表格头下划线颜色。
索引2：表格行列线颜色。
索引3：表格头列线颜色（如果未配置或者清空，则采用索引2即行列线颜色）。

效果如下所示：

边框宽度（`borderWidth`）

数字类型可读写

表格边框线宽度。值为0时不可见。

边框圆角（`borderRadius`）

数字类型可读写

边框圆角。需要边框宽度大于0，且边框颜色可见时，本属性设置才有效果。

效果如下所示：

行线可见（`rowLineVisible`）

布尔类型可读写

行之间边界线是否可见。

列线可见（`columnLineVisible`）

布尔类型可读写

列之间边界线是否可见。

头部可见（`headerVisible`）

布尔类型可读写

是否显示表格头。

底部分页可见 ★（`pagesBottomVisible`）

注意：该属性需展开
才能看到。

布尔类型可读写

是否底部显示表格分页。

分页按钮数量 ★（`pageButtonCount`）

注意：该属性需展开
才能看到。

正整数类型可读写

页码按钮数。底部分页按钮数量。

空图标路径 *（`emptyDefaultIcon`）

注意：该属性需勾选专业模式才可见。

字符串类型可读写

表格数据为空时，内容区域默认显示的图标。

空图标透明度 *（`emptyIconOpacity`）

注意：该属性需勾选专业模式才可见。

百分比（0~1小数）可读写

空图标的透明度。

空图标缩放值 *（`emptyIconSizeScale`）

注意：该属性需勾选专业模式才可见。

正数可读写

空图标放大、缩小比例。

表格行高（`rowHeight`）

正数可读写

表格行高。

头部高度（`headerHeight`）

正数可读写

表格头高。

表头索引显示 ★（`showColumnIndex`）

注意：该属性需展开
才能看到。

布尔类型可读写

展示列索引号。勾选时，表头名称前面加上当前列的索引数字，主要方便编辑时配置。配置完毕后取消勾选。

如下所示：

居中对齐 ★（`centerAlign`）

注意：该属性需展开
才能看到。

布尔类型可读写

表格内容、表格头的文字是否居中对齐。

字体 ★（`font`）

注意：该属性需展开
才能看到。

字体类型可读写

表格内容的文字字体和大小配置。

节点展开模式 *（`nodeExpandMode`）

注意：该属性需勾选专业模式才可见。

枚举类型可读写

父节点的单击展开模式：
不响应展开（noExpand）、
展开直接下一级（expandFirstLayer）
展开所有下级（expandAll）。

可复制列文字色 *（`copyTypeTextColor`）

注意：该属性需勾选专业模式才可见。

颜色类型可读写

列文字可被悬停复制时，文字的默认颜色。

表格列定义（columns）中有设置enableCopy:true时，当前列就允许树表悬停复制，效果如下：（本属性用于配置文字的默认颜色）

可复制图标路径 *（`hoverTextIcon`）

注意：该属性需勾选专业模式才可见。

字符串类型可读写

悬停复制提示图标的设置路径。

效果参见：可复制列文字色 *（copyTypeTextColor）

可复制图标尺寸 *（`hoverTextIconSize`）

注意：该属性需勾选专业模式才可见。

数字数组类型可读写

悬停复制提示图标尺寸。索引0、1分别为宽度和高度。

可复制图标颜色 *（`hoverTextIconColor`）

注意：该属性需勾选专业模式才可见。

颜色类型可读写

悬停复制提示图标的颜色。

效果参见：可复制列文字色 *（copyTypeTextColor）

可复制图标文字 *（`hoverTextIconText`）

注意：该属性需勾选专业模式才可见。

字符串类型可读写

悬停复制提示按钮文字。

可复制文字缩放 *（`hoverTextScale`）

注意：该属性需勾选专业模式才可见。

颜色类型可读写

表格数据为空时，内容区域默认显示的图标。

其他参见

公共属性

网格（grid）

说明

网格组件严格意义上不属于表单组件（什么是表单组件？），不过通常用于表单组件的自动对齐排布，以及动态布局（参见布局），与输入框、下拉框等表单组件联系紧密。并且还有级联下拉框这个特殊功能，与表单关系密切，因此也放在表单归类中。

使用

方法步骤

方式一：面板拖放

直接拖放网格组件，默认内嵌下拉框，随后可以切换组件、修改行列数。

方式二：右键菜单

选中一个或多个组件，右键选择网格组合，会自动创建网格组件，并按照选中的组件排布大致方位，给出默认的行列参数。

方式三：节点拖放

对于页面中已有的网格组件，和其他想要被布局的组件，可以选中拖放到网格组件节点下，确保拖放后网格子节点数量小于网格配置的行列总数即可。如下所示：

注意事项

如何解除网格？

解除网格组合，需要右键菜单操作。如下所示：

如何选中组件？

网格支持任意多层嵌套，网格的对象为其他网格，要选中任意网格内的组件，鼠标选中逐层穿透。

组件不论是经过1层网格还是多层，只要想编辑、对外连线或被连线，都需要能被选中。方式是鼠标连续点击，逐层穿透即可。如下所示：

包括网格组件本身，要选被选中，也需要连续点击，循环穿透。
右键菜单操作需注意，选择的先后顺序会影响布局，参见如何保证顺序？

如何复制网格？

直接选中网格复制，那么不会连同网格下的组件一起复制。需要完整选中网格下的内容，整体选中复制粘贴才能保持完整复制。如下所示：

如何保证顺序？

选中两个或多个组件，右键菜单进行网格布局，可能发现布局的方位跟期望的不一致（比如左边的布局后跑到右边了）。

这是是因为实际布局按照选中这多个组件时的先后选择顺序决定的，不是按照排布的相对位置顺序，如下所示：

属性

功能

网格行数（`grid.row.count`）

非负整数可读写

网格行数。可以动态增加或减少，其中增加时，结合自动填充（grid.auto.fill）属性判断是否按照最后一个组件复制填充。

示例如下：

网格列数（`grid.column.count`）

非负整数可读写

网格列数。可以动态增加或减少，其中增加时，结合自动填充（grid.auto.fill）属性判断是否按照最后一个组件复制填充。

示例参见网格行数（grid.row.count）。

显示指定行 ★（`rowIndex`）

注意：该属性需展开
才能看到。

整数可读写

指定某行显示，其余行隐藏。结合显示指定列 ★（columnIndex）对列的指定一起使用。

非负整数为指定索引。分别指定行和列索引后，整个网格只显示这一个。
-1表示全部显示。因此如果指定行为-1，指定列为索引值，那么标识对应的一整列可见，其余列隐藏。
如果有勾选移除多余项（removeOthers），那么设置的那一刻，不可见项会被自动移除掉，无法再可见。

显示指定列 ★（`columnIndex`）

注意：该属性需展开
才能看到。

非负整数可读写

指定某列显示，其余列隐藏。结合显示指定行 ★（rowIndex）对行的指定一起使用。

使用说明和示例参见显示指定行 ★（rowIndex）。

移除多余项（`removeOthers`）

布尔类型可读写

是否移除指显示以外的项。与显示指定行 ★（rowIndex）、显示指定列 ★（columnIndex）配合使用。当指定某个行列的项后，是否移除网格内的所有其他项。默认不勾选。

自动填充（`grid.auto.fill`）

布尔类型可读写

增大行或列时，多出的格子是否自动（按照最后一个组件复制）进行填充。

外观

各列宽比例（`grid.column.percents`）

数字数组可读写

组件网格布局中，从左到右每列宽度比例。

具体数值规则如下（可以类比树表格的列宽度定义规则）：

值>1时
绝对像素宽度。比如200，表示当前列宽为200px
值=1时
除去所有设置了绝对宽度以及相应列间距之外，网格组件剩余的总宽度作为当前列宽。
0<值<1时
除了绝对像素宽度外和行间距外，剩余总宽度以当前值作为比例对应为当前列宽。比如0.2，剩余宽度总和为100时，当前列宽为20。通常值小数的列，数值相加要为1。
值=0（或undefined未设置时）
默认与其他同样设置了0或未设置参数的列，平分剩余总宽度。比如有4列，当前网格组件总宽度100px，属性设置为[0,40,0,0]时，表明第二列固定宽度为40px，第一、三、四列宽度相同，分别为20（间距、边距相关属性均为0时）。
值=-1时
隐藏当前列（不显示）。注意，如果有多列设置了-1，那么从左到右第一个设置了-1的列才会生效。

操作示意：

实践效果：

左右布局，左侧固定宽度，右侧宽度自适应填充。左侧显示或隐藏时，右侧自动铺满开或回到合适的比例。

各行高比例（`grid.row.percents`）

数字数组可读写

组件网格布局中，从上到下每行高度比例。

详见规则和示例参见各列宽比例（grid.column.percents）

四周边距 ★（`grid.border`）

注意：该属性需展开
才能看到。

数字数组可读写

网格内组件与四边的间距。数组长度为4，分别对应上、右、下、左。

如下所示：

注意，本属性并非指每个组件的四周边距，而是整体对网格组件的边距。

行列间距 ★（`grid.gap`）

注意：该属性需展开
才能看到。

数字类型可读写

所有行与列之间的统一间距。

如下所示：

与四周边距 ★（grid.border）互不影响，本属性只是在行列之间，不影响与网格四边间距。
与列左右边距（node.margin.h）和行上下边距（node.margin.v）也互不影响，实际组件行列间距，取决于共同作用叠加的结果。
网格组件宽度 =
四周边距 ★（grid.border）中索引1和3配置的两边边距 +
各列宽比例（grid.column.percents）配置的各列宽 +
列左右边距（node.margin.h）× 总列数 +
行列间距 ★（grid.gap）×（总列数 - 1）

列左右边距（`node.margin.h`）

数字类型可读写

任意列左右边距。

注意，没有其他设置时，两列之间的实际间距，是当前设置的两倍，因为各自都有左右间距。因此本属性叠加四周边距 ★（grid.border）的设置，才是实际的四周边距。列之间的实际间距，还需要叠加行列边距 ★（grid.gap）的配置（参见计算规则）。如下所示：

相关几个属性参数支持负数（负间距，即距离缩小），并且实际效果是参数叠加，因此通过组合，能够实现一些特定需求的边距设置。

如下所示，列间距为0，四周边距也为0，只设置行间距的效果。

行上下边距（`node.margin.v`）

数字类型可读写

任意行上下边距。参考列左右边距（node.margin.h）

边框宽度（`borderWidth`）

数字类型可读写

网格组件边框宽度。注意，边框为默认颜色、和宽度（3px）时，运行时边框不可见。其他颜色和粗细设置，运行时可见。

效果如下所示：

边框颜色（`borderColor`）

颜色类型可读写

网格组件边框颜色。

效果参见边框宽度（borderWidth）。

背景颜色（`background`）

颜色类型可读写

网格组件的背景颜色。

效果参见边框宽度（borderWidth）。

下拉级联（特殊用途）

作为一项特殊功能，网格组合结合下拉框，能够实现一键加载接口查询返回数据，选择指定字段对应不同的下拉框，从左到右依次下拉级联选择并输出。

用途

每个下拉框对应一个字段，数量可以任意选定。
下拉内容不重复，包含字段在数据集（对象列表）中的所有值。
从左到右逐级条件约束，筛选原始数据集中，满足字段值的所有可选项。左侧第一个下拉框，能展示所有出现的值，越往右，下拉框可选范围越小，甚至无选项或仅一条默认选项。
因此，下拉级联功能，可用于对查询返回的数据，快速条件检索和提取。

示例（点击图片可打开编辑）

步骤

接口返回数据列表，数据对象键值对中，字段相同、值不同。
数据列表（通过连线）直接给到网格组件的数据内容（datas）属性。
启动网格组件的功能启用（enable）属性。
修改数量设置（sizeSet），改成实际需要的下拉框数量。
动态生成指定数量的字段_X（_field_x）属性，从X索引0开始，依次填入数据对象中的字段。从左到右依次对应下拉框组件。
运行时，依次级联下拉组件选择，通过取值对象（valueGet）输出。

功能启用（`enable`）

布尔类型可读写

开启网格组件下拉级联功能。勾选后数量设置（sizeSet）设置才会起作用。

数据内容（`datas`）

对象数组类型可读写

用于传入数据集。通常是接口查询返回解析提取的数据，为固定字段构成的对象数组。

典型数据结构样例

以下数组有35条数据。
固定有字段id、name、type、deviceId、positon、floor。
不同数据，相同字段的内容有相同也有不同。
比如type设备类型，总共只有3种，分布在这35条数据中。对应下拉框也只会有三条不重复的。

[
    {
        "id": "1769281270748573698",
        "name": "1F-J",
        "type": "人脸出入设备",
        "deviceId": "13876d5c730646f887ebc25224188d4a",
        "position": "1F",
        "floor": "1F"
    },
    {
        "id": "1769281270752768001",
        "name": "1F-J",
        "type": "刷卡出入设备",
        "deviceId": "463ec017615140a3aeeae8160bf6e9d5",
        "position": "1F",
        "floor": "1F"
    },
    {
        "id": "1769281270752768002",
        "name": "1F-J",
        "type": "虹膜识别设备",
        "deviceId": "29ad82418725470f929569ecf5a33d4e",
        "position": "1F",
        "floor": "1F"
    },
    {
        "id": "1769281270752768003",
        "name": "1F-H",
        "type": "人脸出入设备",
        "deviceId": "b5abe417941b48f9a4f2fcb9d95b9410",
        "position": "1F",
        "floor": "1F"
    },
    {
        "id": "1769281270752768004",
        "name": "1F-H",
        "type": "人脸出入设备",
        "deviceId": "da8e326a5cca40d0a0025a5b209d8d68",
        "position": "1F",
        "floor": "1F"
    },
    {
        "id": "1769281270752768005",
        "name": "1F-C",
        "type": "人脸出入设备",
        "deviceId": "a03f886629de4b0bbe5806e95f8203dd",
        "position": "1F",
        "floor": "1F"
    },
    {
        "id": "1769281270752768006",
        "name": "1F-J",
        "type": "人脸出入设备",
        "deviceId": "e5cc204fbb8e4c95948c8d761b4788b4",
        "position": "1F",
        "floor": "1F"
    },
    {
        "id": "1769281270752768007",
        "name": "1F-F",
        "type": "人脸出入设备",
        "deviceId": "fc09608648024669a7f32eb4369a8175",
        "position": "1F",
        "floor": "1F"
    },
    {
        "id": "1769281270752768008",
        "name": "1F-D",
        "type": "刷卡出入设备",
        "deviceId": "fd0458ec6b5c4d7697b886c5bf810117",
        "position": "1F",
        "floor": "1F"
    },
    {
        "id": "1769281270752768009",
        "name": "1F-L",
        "type": "人脸出入设备",
        "deviceId": "5c4183ab13684807a2966dff08fa603c",
        "position": "1F",
        "floor": "1F"
    },
    {
        "id": "1769281270752768010",
        "name": "1F-N",
        "type": "虹膜识别设备",
        "deviceId": "57c067a6a32641cda52f398638986e3e",
        "position": "1F",
        "floor": "1F"
    },
    {
        "id": "1769281270752768011",
        "name": "1F-U",
        "type": "人脸出入设备",
        "deviceId": "db45c7d36f8b49bdab7769ce72b958b5",
        "position": "1F",
        "floor": "1F"
    },
    {
        "id": "1769281270752768012",
        "name": "1F-I",
        "type": "人脸出入设备",
        "deviceId": "df8e6562852f41da85251f7cfb987347",
        "position": "1F",
        "floor": "1F"
    },
    {
        "id": "1769281270752768013",
        "name": "4F-A",
        "type": "人脸出入设备",
        "deviceId": "fd0b9de5d38948c6b161095b8489af64",
        "position": "4F",
        "floor": "4F"
    },
    {
        "id": "1769281270752768014",
        "name": "1F-M",
        "type": "人脸出入设备",
        "deviceId": "7e59728da08e4175a02c7a5d5f151dfd",
        "position": "1F",
        "floor": "1F"
    },
    {
        "id": "1769281270752768015",
        "name": "1F-Q",
        "type": "人脸出入设备",
        "deviceId": "5e6088663b5e451d9f8bb30703b17875",
        "position": "1F",
        "floor": "1F"
    },
    {
        "id": "1769281270752768016",
        "name": "-1F-B",
        "type": "人脸出入设备",
        "deviceId": "9e9a581cec5a420da7703c3ac8d3cf06",
        "position": "-1F",
        "floor": "-1F"
    },
    {
        "id": "1769281270752768017",
        "name": "-1F-A",
        "type": "人脸出入设备",
        "deviceId": "6240f130fd394382a5d8b3a329774253",
        "position": "-1F",
        "floor": "-1F"
    },
    {
        "id": "1769281270752768018",
        "name": "1F-P",
        "type": "人脸出入设备",
        "deviceId": "a1641abaf80f490aae2c62a77f0ef119",
        "position": "1F",
        "floor": "1F"
    },
    {
        "id": "1769281270752768019",
        "name": "1F-E",
        "type": "人脸出入设备",
        "deviceId": "58cf2572d0a24a9da490c3103c60e528",
        "position": "1F",
        "floor": "1F"
    },
    {
        "id": "1769281270752768020",
        "name": "1F-A",
        "type": "人脸出入设备",
        "deviceId": "0f7274635b434af69fe92484a2480fb4",
        "position": "1F",
        "floor": "1F"
    },
    {
        "id": "1769281270752768021",
        "name": "1F-K",
        "type": "人脸出入设备",
        "deviceId": "fba9cc734ddd4cdea12d3a185d920614",
        "position": "1F",
        "floor": "1F"
    },
    {
        "id": "1769281270752768022",
        "name": "3F-B",
        "type": "人脸出入设备",
        "deviceId": "e1a69280cb794817a29af9c487943871",
        "position": "3F",
        "floor": "3F"
    },
    {
        "id": "1769281270752768023",
        "name": "1F-T",
        "type": "人脸出入设备",
        "deviceId": "bf1312c9aa204d4aaff9043bf33c5890",
        "position": "1F",
        "floor": "1F"
    },
    {
        "id": "1769281270752768024",
        "name": "4F-B",
        "type": "人脸出入设备",
        "deviceId": "2b91d4ee5be441bd9ea9783b3e4dc180",
        "position": "4F",
        "floor": "4F"
    },
    {
        "id": "1769281270756962305",
        "name": "3F-A",
        "type": "人脸出入设备",
        "deviceId": "840e450eb25c4afc8bd1bed3da842b36",
        "position": "3F",
        "floor": "3F"
    },
    {
        "id": "1769281270756962306",
        "name": "1F-S",
        "type": "人脸出入设备",
        "deviceId": "c9bd481569a7409eaa5540669f5a1bd6",
        "position": "1F",
        "floor": "1F"
    },
    {
        "id": "1769281270756962307",
        "name": "-2F-D",
        "type": "人脸出入设备",
        "deviceId": "d6ef4f84913a4bf589d395facec0c529",
        "position": "-2F",
        "floor": "-2F"
    },
    {
        "id": "1769281270756962308",
        "name": "-2F-C",
        "type": "人脸出入设备",
        "deviceId": "f5cc9d26b2b949caa1da79fd53022a5b",
        "position": "-2F",
        "floor": "-2F"
    },
    {
        "id": "1769281270756962309",
        "name": "-2F-B",
        "type": "人脸出入设备",
        "deviceId": "9f9b64824b9e40b895e848f2101ff80e",
        "position": "-2F",
        "floor": "-2F"
    },
    {
        "id": "1769281270756962310",
        "name": "-3F-C",
        "type": "人脸出入设备",
        "deviceId": "c94fa99f2a3e497a805ead66aeaf418b",
        "position": "-3F",
        "floor": "-3F"
    },
    {
        "id": "1769281270756962311",
        "name": "-2F-A",
        "type": "人脸出入设备",
        "deviceId": "982d1907d65a4a67a1726b09e39b267b",
        "position": "-2F",
        "floor": "-2F"
    },
    {
        "id": "1769281270756962312",
        "name": "-3F-B",
        "type": "人脸出入设备",
        "deviceId": "d3059afbef03438abe36562a07a8ebd2",
        "position": "-3F",
        "floor": "-3F"
    },
    {
        "id": "1769281270756962313",
        "name": "-3F-A",
        "type": "人脸出入设备",
        "deviceId": "0c561602690f47b1b67b0294cfc15252",
        "position": "-3F",
        "floor": "-3F"
    },
    {
        "id": "1769281270756962314",
        "name": "-3F-D",
        "type": "人脸出入设备",
        "deviceId": "11f6de4004ee4d7db481f5e45f77027e",
        "position": "-3F",
        "floor": "-3F"
    }
]

数量设置（`sizeSet`）

非负整数可读写

下拉框数量和字段设置，需先勾选功能启用（enable）。
设置会同步触发下拉框以及名称为字段_X属性的动态增减。属性用于配置下拉框的数据字段，X为从0开始的索引，与组件从左到右依次对应。

比如当属性字段_2设置为name时，返回数据集中所有name字段的值（去掉重复后的）列表，将被放入到从左到右的第3个（索引为2）下拉框。如下所示：

字段_X（`_field_x`）

字符串类型可读写

索引为X的下拉框对应个数据字段（索引0开始，对应下拉框从左到右）。

设置示例参见数量设置（sizeSet）。

取值内容（`valueGet`）

对象类型只读

当前选择字段值。下拉框字段和当前值组成的对象。

比如有三个下拉框，下拉框name选择了uiotos，下拉框website选择了uiotos.net，下拉框email选择了jone@aiotos.net。当前属性值就是：

{
  name: "uiotos",
  website: "uiotos.net",
  email: "jone@aiotos.net"
}

说明1：name、website、email分别是在动态属性数据_0、数据_1、数据2字段中设置。
说明2：数据集中有其他字段但无对应配置的，不在当前属性值中体现。

取数据项（`itemsGet`）

对象列表只读

满足条件的数据列表。下拉框对应的字段和当前值作为条件，数据内容（datas）满足条件的所有数据项列表。

在取值内容（valueGet）的举例中，如果数据内容（datas）满足name、website、email指定值的有多条数据，并且还有其他字段，当前属性值如下所示：

[{
  name: "uiotos",
  website: "uiotos.net",
  email: "jone@aiotos.net",
  stuff: 'joke',
  age:26
},{
  name: "uiotos",
  website: "uiotos.net",
  email: "jone@aiotos.net",
  stuff: 'jack',
  age:36
},{
  name: "uiotos",
  website: "uiotos.net",
  email: "jone@aiotos.net",
  stuff: 'jone',
  age:29
}]

说明1：数据为数组形式，即便没有匹配到，或者只匹配到1项。
说明2：数组内对象数据是数据内容（datas）中原始的，包含完整字段，即便字段没有配置对应的下拉框，也一样会在数据中。
说明3：相比之下可理解为，取值内容（valueGet）属性值是查询条件，取数据项（itemsGet）属性值是查询结果。

值改变事件（`onChange`）

注意：该属性需勾选专业模式才可见。

事件函数可读写

级联功能开始时，下拉选择或数据内容（datas）变化时触发当前事件。

其他参见

公共属性

面包屑（`breadCrumb`）*

略

说明

使用

属性

功能

外观

其他参见

公共属性

上一个

图表

下一个

容器

最近修改: 2024-08-19Powered by

大纲

表单

图片按钮（iconClick）

说明

使用

属性

功能

打开链接（openURL）

启用提示（toolTip）

禁用（disabled）

关联页签（bindTabview）

点击事件（clicked）

数据参数（param）

外观

图标路径（path）

默认颜色（default-background）

划过颜色（hover-background）

按下颜色（click-background）

普通按钮（button）

说明

使用

属性

功能

禁用（ht.disabled|disabled）

关联页签（bindTabview）

点击事件（onFormClick）

点击事件（clicked）

数据参数（param）

外观

文字（ht.text|text）

字体（ht.font|textFont）

文字颜色（ht.textColor|textColor）

边框宽度（ht.borderWidth|borderWidth）

边框圆角（ht.borderRadius|borderRadius）

边框颜色（ht.borderColor|borderColor）

背景颜色（background）

深色风格（darkStyle）

图标路径（iconPath）

图标位置（ht.iconPosition|iconPosition）

图标大小（iconSize）

图标间隙（iconGap）

图标背景（icon-background）

开关（switch）

说明

使用

属性

功能

打开（open）

打开文字（textOpen）

关闭文字（textClose）

文字可见（textVisible）

打开事件（onOpen）

关闭事件（onClose）

值改变事件（onChange）

外观

背景颜色（background）

关闭颜色（closedColor）

背景边框宽度（back.borderWidth）

背景圆角（back.radius）

圆点缩放（dot.dotScale）

文字缩放（textScale）

字体（font）

间隙调整（gapsAdjust）

按钮组（buttonGroup）

说明

使用

属性

功能

关联页签（bindTabview）

方向（direction）

各按钮文字（buttons）

各按钮数据（btnDatas）

当前数据（btnData）

当前索引（select）

划过时触发（hoverTrigger）

加载时触发（initialTrigger）

值改变事件（onChange）

外观

间隙（gap）

背景颜色（background）

文字颜色（textColor）

图片按钮（`iconClick`）

打开链接（`openURL`）

启用提示（`toolTip`）

禁用（`disabled`）

关联页签（`bindTabview`）

点击事件（`clicked`）

数据参数（`param`）

图标路径（`path`）

默认颜色（`default-background`）

划过颜色（`hover-background`）

按下颜色（`click-background`）

普通按钮（`button`）

禁用（`ht.disabled`|`disabled`）

关联页签（`bindTabview`）

点击事件（`onFormClick`）

点击事件（`clicked`）

数据参数（`param`）

文字（`ht.text`|`text`）

字体（`ht.font`|`textFont`）

文字颜色（`ht.textColor`|`textColor`）

边框宽度（`ht.borderWidth`|`borderWidth`）

边框圆角（`ht.borderRadius`|`borderRadius`）

边框颜色（`ht.borderColor`|`borderColor`）

背景颜色（`background`）

深色风格（`darkStyle`）

图标路径（`iconPath`）

图标位置（`ht.iconPosition`|`iconPosition`）

图标大小（`iconSize`）

图标间隙（`iconGap`）

图标背景（`icon-background`）

开关（`switch`）

打开（`open`）

打开文字（`textOpen`）

关闭文字（`textClose`）

文字可见（`textVisible`）

打开事件（`onOpen`）

关闭事件（`onClose`）

值改变事件（`onChange`）

背景颜色（`background`）

关闭颜色（`closedColor`）

背景边框宽度（`back.borderWidth`）

背景圆角（`back.radius`）

圆点缩放（`dot.dotScale`）

文字缩放（`textScale`）

字体（`font`）

间隙调整（`gapsAdjust`）

按钮组（`buttonGroup`）

关联页签（`bindTabview`）

方向（`direction`）

各按钮文字（`buttons`）

各按钮数据（`btnDatas`）

当前数据（`btnData`）

当前索引（`select`）

划过时触发（`hoverTrigger`）

加载时触发（`initialTrigger`）

值改变事件（`onChange`）

间隙（`gap`）

背景颜色（`background`）

文字颜色（`textColor`）

字体（`textFont`）

圆角（`radius`）

边框颜色（`borderColor`）

边框宽度（`borderWidth`）

简单线样式（`simpleLineStyle`）

文本框（`textArea`）

值内容（`value`）

网页格式（`htmlContent`）

只读（`readOnly`）

加载时触发（`initialTrigger`）

即时触发（`instantTrigger`）

值改变事件（`onChange`）

边框圆角（`borderRadius`）

边框宽度（`borderWidth`）

边框颜色（`borderColor`）

背景颜色（`background`）

文字颜色（`color`）

字体（`font`）

占位提示符（`placeholder`）

文档编辑器（`document`）*

输入框（`input`）*