相关内容
文档原地址:https://www.yuque.com/liuhuo-nc809/uiotos/mttyppid7d9y7sqk
图片按钮(iconClick
)
说明
图片按钮
也叫图标按钮
,外观由图标决定,没有固定的矩形区域,与常规按钮有所不同。
图标的格式,支持sgv、jpg/png,以及自行绘制。如下所示(可点击):
注意:本组件没有弹出框 *属性组。
使用
如下所示,分别是在组件面板
,和编辑器右键菜单
插入两种方式找到组件:
点击查看【bilibili】
属性
功能
打开链接(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
)
布尔类型``可读写
勾选后,样式为简单风格:无背景色,只有文字、下划线和对应颜色。
其他参见公共属性
文本框(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
)
:::danger
注意:该属性需勾选专业模式才可见。
:::
布尔类型``可读写
勾选后,树列表节点双击可选中。
不勾选,树列表节点双击不可选中,而是展开下级。
数据内容(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
)
:::danger
注意:该属性需勾选专业模式才可见。
:::
对象数组``可读写
可否选中的过滤函数。
- 过滤函数
function allowChoosing(data,gv,cache,content,item){
}
- 参数说明
content
对象类型,其中有字段:
- `datas`:[数据内容(datas)属性](#Utg1R)的内容。
- `value`:[值内容(value)](#zqBrs)属性值。
如果数据项是对象,那么就是对象内的value字段值;如果数据项不是对象,那么就等同于数据项。
item
对象结构的值,显示字段为名称,值字段为id。
- 返回值
函数返回true时,当前项能选中,否则不能选中。
展开事件(onOpened
)
:::danger
注意:该属性需勾选专业模式才可见。
:::
事件函数``可读写
下拉展开列表时触发的事件。
值改变事件(onChange
)
事件函数``可读写
当下拉时当前选择的项(即值内容)发生变化时会触发本事件。
外观
背景颜色(background
)
颜色数组类型``可读写
效果如下所示:
字体(font
)
注意:该属性需展开
才能看到。
字体类型``可读写
下拉框内文字字体。
(不包括下拉展开列表的文字)
文字颜色(color
)
注意:该属性需展开
才能看到。
颜色数组类型``可读写
索引0:下拉框内文字颜色。索引1:标签文本颜色。
(不包括下拉展开列表的文字)
边框宽度(borderWidth
)
数字类型``可读写
下拉框边框宽度。
(不包含下拉展开列表边框)
边框圆角(borderRadius
)
数字类型``可读写
下拉框边框圆角。
(不包含下拉展开列表边框)
边框颜色(borderColor
)
颜色数组``可读写
下拉框边框圆角。
索引0:默认边框色。
索引1:输入时边框色。
占位提示符(placeholder
)
字符类型``可读写
未输入(值内容为空)时默认显示的占位提示文字。
标签颜色(labelColor
)
颜色类型``可读写
标签文本对应的颜色。
注意,该属性值会同步到标题
属性组的颜色
属性。
下拉树框阴影(treeBoxShadow
)
:::danger
注意:该属性需勾选专业模式才可见。
:::
字符串类型``可读写
格式类似:0px 8px 22px rgba(0,0,0,0.1)
其中后面rgba()用于设置阴影颜色。
下拉树背景色(treeBackground
)
:::danger
注意:该属性需勾选专业模式才可见。
:::
颜色数组``可读写
展开下拉的背景色。
- 索引0:默认背景色。
- 索引1:边框颜色。
- 索引2:行线颜色。
- 索引3:行默认背景色。
- 索引4:行悬停背景色。
- 索引5:行选中背景色。
- 索引6:行焦点背景色。
下拉树文字色(treeLabelColor
)
:::danger
注意:该属性需勾选专业模式才可见。
:::
颜色数组``可读写
展开下拉的文本颜色。
- 索引0:默认文字颜色;
- 索引1:悬停文字颜色;
- 索引2:选中文字颜色。
下拉树字体(treeLabelFont
)
:::danger
注意:该属性需勾选专业模式才可见。
:::
字体类型``可读写
下拉树文字字体。
下拉树行高(treeRowHeight
)
:::danger
注意:该属性需勾选专业模式才可见。
:::
数字类型``可读写
下拉树行的高度。
下拉树边框宽度(treeBorderWidth
)
:::danger
注意:该属性需勾选专业模式才可见。
:::
数字类型``可读写
下拉树边框的宽度。
下拉树边框圆角(treeBorderRadius
)
:::danger
注意:该属性需勾选专业模式才可见。
:::
数字数组``可读写
下拉树边框的圆角。
索引0~3依次是上、右、下、左。
下拉树四周边距(treePadding
)
:::danger
注意:该属性需勾选专业模式才可见。
:::
数字数组``可读写
下拉树四周边距。
索引0~3依次是上、右、下、左。
其他参见公共属性
抽屉面板(platte
)*
略
说明
使用
属性
功能
外观
其他参见公共属性
日期时间(range
)*
(参考下拉框整理)
说明
使用
属性
功能
外观
其他参见公共属性
树表格(treeTable)
说明
树表格组件兼容了二维表格table
(行不带父子节点)、树tree
(带层级节点的单列)、列表list
(不带层级节点的单列)。也就是说常规表格
、树
、列表
,都可以通过树表格
组件的配置来实现。
使用
属性
功能
重新加载 *(reload
)
:::danger
注意:该属性需勾选专业模式才可见。
:::
布尔类型``可读写
重新加载。通常用于连线触发表格重新加载数据。
重置行ID *(rowsIdReset
)
:::danger
注意:该属性需勾选专业模式才可见。
:::
布尔类型``可读写
重新加载。通常用于连线触发表格重新加载数据。注意,ID会按照行索引重置。
行选择模式 ★(checkMode
)
注意:该属性需展开
才能看到。
枚举类型``可读写
用于设置表格行是否可以勾选,以及勾选模式。
不启用单选或勾选 - 推荐√默认值,行数据没有勾选/单选框。
勾选(仅自身)> 没有更下级子节点的叫做末端节点。
该模式下,不论父节点还是子节点、末端节点,都可以独立勾选,并且不会相互影响。如下所示:
勾选(联动下级节点)该模式下,父节点勾选,会联动直接下级子节点勾选,如下所示:
- 子节点的勾选,不会联动父节点。
勾选(联动各级子节点)该模式下,父节点勾选,会逐层联动所有各级子节点勾选,如下所示:
- 子节点的勾选,不会联动父节点。
勾选(联动各级子以及父节点)- 推荐 ✓该模式下,父子节点勾选,都会相互联动。并且对父节点被子节点联动勾选时,会有勾选
、未勾选
、半勾选
三种状态。如下所示:
单选 - 推荐 ✓该模式下,父子节点都可以单选,如下所示:
**单选(父节点用于清空)**该模式下,末端节点可以单选,父节点不可选中,用于点击时清空选择,如下所示:
全部选中 *(selectAllSet
)
:::danger
注意:该属性需勾选专业模式才可见。
:::
布尔类型``只写
设置为全选。
要求行选择模式为勾选模式。
全部展开 ★(expandAll
)
注意:该属性需展开
才能看到。
布尔类型``可读写
全部展开。
对于有父子节点类型的表格起作用,对没有父子节点的表格设置无效。
允许行拖放 *(dragDropEnable
)
:::danger
注意:该属性需勾选专业模式才可见。
:::
布尔类型``可读写
启用拖放。
行可以拖放位置。
关键词查找(visibleFilterInput
)
字符串类型``可读写
行数据关键词过滤。
将所有行列文字作为内容,按照过滤规则进行关键词匹配,以此实现表格行数据搜索。
过滤规则如下:
- 空格隔开的字符串,被识别为多个独立的关键词,分别进行匹配,并且所有的都匹配到整体才算匹配成功,相当于交集。
- 英文逗号隔开的字符串,也被识别为多个独立的关键词,分别进行匹配,并且任一关键词匹配到,那么整体都算匹配成功,相当于并集。
- 当前属性如果是字符串数组,那么被当做情况1来处理,即多个关键词交集。
- 关键词末尾为空格(以空格结束)时,将严格匹配关键词字符串,内容中有包含字符且紧接后面还有字符时,不被认作匹配。
更多参见属性搜索。
鼠标禁用提示 *(disableTooltip
)
:::danger
注意:该属性需勾选专业模式才可见。
:::
布尔类型``可读写
禁用鼠标悬停提示。开启后,当前单元格的数据,悬停时能鼠标提示完整内容。
鼠标提示列 *(columnForTooltip
)
:::danger
注意:该属性需勾选专业模式才可见。
:::
布尔类型``可读写
禁用鼠标悬停提示。开启后,当前单元格的数据,悬停时能鼠标提示完整内容。
提示自定义函数 *(toolTipCallback
)
:::danger
注意:该属性需勾选专业模式才可见。
:::
函数类型``可读写
自定义鼠标悬停提示回调函数。注意:返回非空内容时,以这里设置为准。
参数说明:
- data:当前表格组件图元对象
- rowData:当然行各列数据
- colIndex:当前单元格列索引
- tipIndex:设置为提示列的索引
- rowNode:当前行数据图元对象
颜色过滤函数 *(colorFilterFunc
)
:::danger
注意:该属性需勾选专业模式才可见。
:::
函数类型``可读写
指定行列文字的颜色。过滤函数提供行列信息,可指定某一列,或者某一行的某一列(单元格),根据内容判断返回指定的颜色。
参数说明:
- node:组件对象
- rObj:行数据
- cObj:列定义
- cIndex:列索引
- value:当前值
数据过滤函数 *(dataFilterFunc
)
:::danger
注意:该属性需勾选专业模式才可见。
:::
函数类型``可读写
转换指定行列的显示内容。过滤函数提供行列信息,可指定某一列,或者某一行的某一列(单元格),根据内容判断返回指定的转换后的内容。
参数说明:
- node:组件对象
- rObj:行数据(图元对象)
- cObj:列定义
- cIndex:列索引
- value:当前值
操作按钮函数 *(btnsFilterFunc
)
:::danger
注意:该属性需勾选专业模式才可见。
:::
函数类型``可读写
操作按钮列过滤。用于针对操作列中的按钮,提供当前行数据,自定义按钮对象的操作,包括识别行数据的标记,对某个按钮进行显示或隐藏等。无需返回,直接操作按钮对象即可。
参数说明:
- node:组件对象
- rObj:行数据
- bObj:按钮象组
- bIndex:按钮组中的索引
初始化用户数据 *(userDataSelfInit
)
:::danger
注意:该属性需勾选专业模式才可见。
:::
布尔类型``可读写
初始化用户数据。勾选后,默认以当前组件对象,作为用户数据值。
行点击事件(onClick
)
事件函数``可读写
当单击行时对外触发。
行双击事件(onDoubleClick
)
事件函数``可读写
当双击行时对外触发。
行勾选事件(onCheck
)
事件函数``可读写
当勾选时对外触发。
表格加载完成事件(onDatasLoaded
)
事件函数``可读写
当表格数据加载完成时触发。
操作按钮点击事件(onLastButtonClick
)
事件函数``可读写
操作按钮点击时触发。
操作按钮选择事件(onLastButtonSelected
)
注意:该属性需展开
才能看到。
事件函数``可读写
操作按钮切换选择时触发。
数据
数据内容(datas
)
对象数组类型``可读写
树表组件的数据。
支持以下三种格式:
格式一:对象数组(树表专用,对象字段固定有rowData、children)> 1. 数组的每个对象对应一行数据。
- 对象中,固定有名为
rowData
的字段。
该字段为数组类型,对应从当前行,第一列(如果算上可隐藏的序号列,这是第二列)开始的依次各行数据,通常是字符串,其他参见特殊情况。
下面示例中,1-1、1-2、1-3,分别是当前行的三列数据。
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]
操作按钮项```
['查看','添加','删除']
效果示例:
附:综合典型示例(组件源文本).txt
其他相关:
- 上述列出当前组件支持的所有格式的数据。除此之外,还支持对任意JSON对象数据加载显示,参见JSON对象转树表(treeJsonToTreeTable),可以由该函数将任意JSON对象,按照指定规则,转换成可识别的格式。
- 根据ID字段值获取一行或多行数据,以及删除行数据,可参见JSON数组获取对象元素(arrObjItem)。
ID字段 ★(idField
)
注意:该属性需展开
才能看到。
字符串类型``可读写
行数据的ID字段。默认为“id”,可以指定其他。勾选行ID属性(checkSelected)存放勾选的ID列表,以这里确定的字段为准。
本属性支持传入的数据格式跟数据内容完全一样(对象数组)。此外,还支持仅传入符合对象格式的单个对象,追加单行数据。
数据追加 ★(dataAdd
)
注意:该属性需展开
才能看到。
对象数组``只写
添加数据。
在已有数据内容基础上,追加一行或多行。
本属性支持传入的数据格式跟数据内容完全一样(对象数组)。此外,还支持仅传入符合对象格式的单个对象,追加单行数据。
表格列定义(columns
)
对象数组``可读写
定义表格的列数量、数据字段,以及列的自定义相关参数等。
对象数组的快捷配置参见:对象数组配置
相关说明罗列如下:
- 索引为0的列,固定用于树表格的序号列,内容自增。即便该列可以设置显示或隐藏,对应的列配置一定要有,并且是第一项。
- 列定义的对象常用字段:
**displayName**
(必需):
当前列的显示名称。值为字符串。
**name**
(非必需):
列的数据字段名。值为字符串。
**enableCopy**
(非必需):
开启列文字的悬停复制,值为true
或false
。
**drawCell**
(非必需):
值为对象{}
(可以为空),支持字段:
- `width`:限定单元格内嵌图标/图片的宽度,默认水平填充。 - `height`:限定单元格内嵌图标/图片的高度,默认水平填充。
**editable**
(非必需):
单元格文字是否可输入编辑。值为true
或false
。如果 值为true,通常还需带有如下参数,表明文本字符串方式的输入编辑:
"editorClass"
:"ht.ui.editor.StringEditor"
列宽定义(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
)
:::danger
注意:该属性需勾选专业模式才可见。
:::
对象数组``可读写
列的数据字段。用于快速定义,表格列定义(columns)也能实现,但是这里更方便设置,通常与特定工具函数结合使用。
详细说明如下:
- 等同于
表格列定义(columns)
对象的name
字段,两处配置会自动同步,保持索引对应。- 首项默认为空(null)。因为
表格列定义(columns)
中,首项为序号列且内容自动生成,仅开放列定显示名称配置,因此无数据字段。当前属性实际数据字段从索引1开始。- 工具函数查询返回转换成树表操作树表格的数据内容(datas)属性时,会自动将字段同步到当前属性上(保持首项默认为空,从索引1开始),以对应树表的各个数据字段。
- 有操作按钮列(
操作按钮项
属性有配置)时,本属性不会同步给列定义中对应的末尾项。因为操作列也是通常无数据字段的,仅有编辑
、删除
、修改
等按钮。
下拉框对应列 *(fieldForCombo
)
:::danger
注意:该属性需勾选专业模式才可见。
:::
整数类型``可读写
取指定索引列的数据,生成下拉框所需的格式,输出给取下拉框数据属性。值可以是列名称或者列索引(数字会被当成索引,且从0开始(第0列属于序号列)。
取下拉框数据 *(dataComboType
)
:::danger
注意:该属性需勾选专业模式才可见。
:::
对象类型``只读
指定列的下拉框格式的数据。由属性下拉框对应列(fieldForCombo)指定。
该属性的数据通常用于给到表格之外的下拉框组件。比如条件查询列表数据中,某个条件选项。
取表格内嵌页 *(innerDisplays
)
:::danger
注意:该属性需勾选专业模式才可见。
:::
对象数组``只读
单元格可能存在的内嵌页面。只读,从数据内容(datas)属性配置中自动提取过来。
对象格式如下:
cellPos
:单元格位置
rowId
:行索引。colId
:列索引。display
:内嵌页地址。
{
cellPos: {
rowId: 1, //行索引
colId: 1 //列索引
},
display: "displays/xxx.json"
}
取所有行ID * (allRowsIdGet
)
:::danger
注意:该属性需勾选专业模式才可见。
:::
数字数组``只读
获取所有行id。其中,id取决于ID字段属性。
当前选择的ID * (currentIdSelect
)
:::danger
注意:该属性需勾选专业模式才可见。
:::
对象类型``可读性
当前选择的ID。
取当前点击数据 * (currentClicked
)
对象类型``可读写
获取当前点击的行数据。对象格式,包含了当前行的所有信息。注意,单击、双击、勾选、取消勾选时都会出触发当前属性值更新。
对象结构说明如下:
kind
:事件类型名称。rowData
:当前行数据对象。rowObj
:行数据键值对,格式与rowData
数据互补。rowId
:当前行ID。button
:操作按钮(可能没有该字段)。
text
:操作按钮显示文字。index
:从0开始,操作按钮从左到右的索引。
统计勾选数 * (checkCountGet
)
:::danger
注意:该属性需勾选专业模式才可见。
:::
非负整数类型``只读
已勾选的行数。只读属性,且勾选模式下生效。注意,不包含节点,只统计末端节点(无更下级节点)的行勾选数。
统计总行数 * (allRowCountGet
)
:::danger
注意:该属性需勾选专业模式才可见。
:::
非负整数类型``只读
所有末端行数量。只读属性。
注意,不包含节点,只统计没有更下级节点行的总数。
采用节点链 * (useTreeLined
)
:::danger
注意:该属性需勾选专业模式才可见。
:::
布尔类型``可读写
树表多级节点展开时,末端节点(无更下级节点)的文字显示,在不同节点下会重复。本属性就是为了精准定位某行,用于精确查找以及勾选设置等。
节点链的规则:以自身文字,逐层加上级节点文字,直到根节点,形成的一串并且默认以">"间隔隔开的字符串。如下所示:
示例数据:
- 行1: a -
- 行2: b
- 行3: c -
- 行4: d
节点d的上级节点为c,再上级为a,因此可以用"a>c>d"
(也称作行keyURL
)来匹配定位d
。在查询匹配项(queryMatched)
、关键词查找(visibleFilterInput)等场景非常有用。
[关键词查找(visibleFilterInput)](#x3zEX)
用文字的节点链代替原文字内容被检索。
查询匹配项(queryMatched)
显示的不是文字d,而是逐层带上节点后节点链文字"a>c>d"
。
节点链对应ID * (treeLinedAttr2Id
)
:::danger
注意:该属性需勾选专业模式才可见。
:::
对象类型``可读写
行节点链与数据ID的键值对。
查询指定字段 * (fieldQueryRely
)
:::danger
注意:该属性需勾选专业模式才可见。
:::
字符串类型``可读写
字段查询依赖。支持传入列索引,或列定义中的
数据字段名(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
)
:::danger
注意:该属性需勾选专业模式才可见。
:::
对象数组``只读
选中的行序号列表。勾选一行或多行数据的序号。
操作按钮项 ★(lastItems
)
注意:该属性需展开
才能看到。
对象数组``可读写
操作列按钮。通常在最后一行。比如查看、编辑、删除等。
不为空时,最后一列就是操作列,固定显示按钮,表格列定义(columns)中设置显示字段(displayName)
之外的字段将不起作用。为空时,最后一列就是正常的数据列。
如果当前表格为上下级树表节点形式,那么本属性可以结合以下几个忽略属性,共同决定每行最终显示哪些按钮操作。如下所示:
此外,可以配置操作列的状态切换按钮,详见操作按钮切换开关如何配置?相关属性:
外观配置的相关属性:
根节点忽略项 *(lastRootIgnored
)
:::danger
注意:该属性需勾选专业模式才可见。
:::
整数数组``可读性
对于根节点行(无父行,有子行),操作按钮项 ★(lastItems)定义中哪些按钮不可见,填入对应的索引列表。
比如完整按钮项有新增
、修改
、删除
,但是对根节点,不希望有删除
操作,因此可以设置[2]
,忽略掉索引为2的按钮,只显示新增
和修改
。
子节点忽略项 *(lastRootIgnored
)
:::danger
注意:该属性需勾选专业模式才可见。
:::
整数数组``可读写
对于子节点行(有父行,有子行),操作按钮项 ★(lastItems)定义中哪些按钮不可见,填入对应的索引列表。
末节点忽略项 *(lastChildIgnored
)
:::danger
注意:该属性需勾选专业模式才可见。
:::
整数数组``可读写
对于末端节点行(有父行,无子行),操作按钮项 ★(lastItems)定义中哪些按钮不可见,填入对应的索引列表。
独节点忽略项 *(lastSingleIgnored
)
:::danger
注意:该属性需勾选专业模式才可见。
:::
整数数组``可读写
对于独节点行(无父行,无子行),操作按钮项 ★(lastItems)定义中哪些按钮不可见,填入对应的索引列表。
此外,还存在特殊用途,可配合其他属性,将操作按钮配置为切换开关:
特殊用途(操作按钮切换开关)如何配置?> 步骤说明如下:
- 操作按钮项 ★(lastItems)需有且仅设置2项。比如
绑定
、未绑定
。
- 独节点忽略项 *(lastSingleIgnored)有且仅设置1项,值为操作按钮项 ★(lastItems)的2项中一项的索引,即固定为0或1。用来设定待切换的默认隐藏不可见按钮。
- 行附加用户数据 *(rowsExtraUserInfo)在此基础上,设置索引值。其中索引与行序号对应(注意,这里索引0,对应行序号1;索引1对应行序号2,以此类推)。
- 填入值为
1
或者true
时,操作按钮切换,显示默认隐藏的按钮(示例中是未绑定
);- 填入值为
0
、false
或空
(默认)时,显示此前默认显示的按钮(示例是绑定
)
完整操作效果:
独节点视为根 *(singleRootOrChild
)
:::danger
注意:该属性需勾选专业模式才可见。
:::
布尔类型``可读写
默认根节点还是子节点。
勾选时,将独节点忽略项 *(lastSingleIgnored)视作根节点。不勾选时,视作末端节点。对应某些场景,比如根节点不可删除,末端子节点可删除时。
行附加用户数据 *(rowsExtraUserInfo
)
:::danger
注意:该属性需勾选专业模式才可见。
:::
对象数组``可读写
行对应的用户数据。数组类型,索引与行序号对应。表格行在点击、双击、操作按钮点击时,会更新当前属性值,并且在对外连线触发中传出。
对行的交互操作时,会将当前事件操作带的数据填充到当前属性对应的索引位置,且索引与当前行索引一致。
此外,行附加用户数据 *(rowsExtraUserInfo)属性和操作按钮项 ★(lastItems)、独节点忽略项 *(lastSingleIgnored)三个属性结合,可以配置操作列的状态切换按钮,详见操作按钮切换开关如何配置?
单操作按钮绑定 *(lastItemRowsText
)
:::danger
注意:该属性需勾选专业模式才可见。
:::
字符串数组``可读写
自定义行的操作按钮显示文字。比如操作按钮默认为
查看
、编辑
,,现在可指定某行的查看
,显示为已读
(还是同一个按钮,只是显示文字变化)。
使用说明:
- 索引0,设置整数(索引)选择操作按钮。操作按钮项 (lastItems)可能有多个,比如
查看
、编辑
、删除
。设置1时,指定编辑
按钮。其中查看、编辑、删除,三个按钮索引依次是0、1、2。- 索引1开始,设置字符串,依次对应各行(从序号1开始),在指定按钮上的显示文字:
- 空值(undefined,或者空字符串"")时,显示按钮的原始文字。
- 非空值时,按钮显示设定的文字。
配置示例:
完整效果:
外观
操作按钮默认色 *(lastColorsDefault
)
:::danger
注意:该属性需勾选专业模式才可见。
:::
颜色数组``可读写
操作按钮分别默认下的背颜色,与操作按钮项 ★(lastItems)保持索引对应。
操作按钮悬停色 *(lastColorsHover
)
:::danger
注意:该属性需勾选专业模式才可见。
:::
颜色数组``可读写
操作按钮分别悬停时的背景色,与操作按钮项 ★(lastItems)保持索引对应。
操作按钮按下色 *(lastColorsActive
)
:::danger
注意:该属性需勾选专业模式才可见。
:::
颜色数组``可读写
操作按钮分别按下时的背景色,与操作按钮项 ★(lastItems)保持索引对应。
操作按钮间距 *(lastGap
)
:::danger
注意:该属性需勾选专业模式才可见。
:::
数字类型``可读写
操作按钮项(lastItems)中按钮之间的间距。
内嵌图片间距 *(itemsGap
)
:::danger
注意:该属性需勾选专业模式才可见。
:::
数字类型``可读写
用于在列单元格填充多个图片或图标时,设置图片之间的间距。
通常在单元格内嵌图片时使用,效果如下所示:
背景颜色 ★(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
)
:::danger
注意:该属性需勾选专业模式才可见。
:::
字符串类型``可读写
表格数据为空时,内容区域默认显示的图标。
空图标透明度 *(emptyIconOpacity
)
:::danger
注意:该属性需勾选专业模式才可见。
:::
百分比(0~1小数)``可读写
空图标的透明度。
空图标缩放值 *(emptyIconSizeScale
)
:::danger
注意:该属性需勾选专业模式才可见。
:::
正数``可读写
空图标放大、缩小比例。
表格行高(rowHeight
)
正数``可读写
表格行高。
头部高度(headerHeight
)
正数``可读写
表格头高。
表头索引显示 ★(showColumnIndex
)
注意:该属性需展开
才能看到。
布尔类型``可读写
展示列索引号。勾选时,表头名称前面加上当前列的索引数字,主要方便编辑时配置。配置完毕后取消勾选。
如下所示:
居中对齐 ★(centerAlign
)
注意:该属性需展开
才能看到。
布尔类型``可读写
表格内容、表格头的文字是否居中对齐。
字体 ★(font
)
注意:该属性需展开
才能看到。
字体类型``可读写
表格内容的文字字体和大小配置。
节点展开模式 *(nodeExpandMode
)
:::danger
注意:该属性需勾选专业模式才可见。
:::
枚举类型``可读写
父节点的单击展开模式:
- 不响应展开(noExpand)、
- 展开直接下一级(expandFirstLayer)
- 展开所有下级(expandAll)。
可复制列文字色 *(copyTypeTextColor
)
:::danger
注意:该属性需勾选专业模式才可见。
:::
颜色类型``可读写
列文字可被悬停复制时,文字的默认颜色。
表格列定义(columns)中有设置enableCopy:true
时,当前列就允许树表悬停复制,效果如下:(本属性用于配置文字的默认颜色)
可复制图标路径 *(hoverTextIcon
)
:::danger
注意:该属性需勾选专业模式才可见。
:::
字符串类型``可读写
悬停复制提示图标的设置路径。
效果参见:可复制列文字色 *(copyTypeTextColor)
可复制图标尺寸 *(hoverTextIconSize
)
:::danger
注意:该属性需勾选专业模式才可见。
:::
数字数组类型``可读写
悬停复制提示图标尺寸。索引0、1分别为宽度和高度。
可复制图标颜色 *(hoverTextIconColor
)
:::danger
注意:该属性需勾选专业模式才可见。
:::
颜色类型``可读写
悬停复制提示图标的颜色。
效果参见:可复制列文字色 *(copyTypeTextColor)
可复制图标文字 *(hoverTextIconText
)
:::danger
注意:该属性需勾选专业模式才可见。
:::
字符串类型``可读写
悬停复制提示按钮文字。
可复制文字缩放 *(hoverTextScale
)
:::danger
注意:该属性需勾选专业模式才可见。
:::
颜色类型``可读写
表格数据为空时,内容区域默认显示的图标。
其他参见公共属性
网格(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
、数据_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
)
:::danger
注意:该属性需勾选专业模式才可见。
:::
事件函数``可读写
级联功能开始时,下拉选择或数据内容(datas)变化时触发当前事件。
其他参见公共属性
面包屑(breadCrumb
)*
略
说明
使用
属性
功能
外观
其他参见公共属性