- data-widget是基于Enhancer平台开发的组件, 能在此平台上良好运行。
- data-widget通过自定义模板快速将数据生成成品。
- 在Enhancer上注册，新建项目使用此组件。
- 在图二界面设置组件的数据源，模板以及相关配置。
- 数据源格式说明：必须是对象数组，一个对象通过模板生成一个对应的单元，如 1 所示。
[{
"key": "value",
...
}, {
"key": "value",
...
}...]
- 模板分为上下两部分，上部分可包含图片，标题，段落，图标；下部分可包含按钮。如 5 所示。
- 通过拖动 6 位置调节模板的大小。
- 通过 3 位置的操作按钮在模板中添加元素。双击模板中的元素，会弹出对应的编辑框，如 4 所示，并在对应的编辑框中对元素进行编辑。
| 元素类型 | 可编辑内容 | 说明 |
|---|---|---|
| 图片 | 地址来源，高度，宽度，透明度，倒角 | 来源设置：固定的文本或 @key@, @var@ 从数据源,变量中取值。 |
| 标题 | 文本来源，字体，字号，字间距，字粗 | 来源设置：同上。 |
| 段落 | 文本来源，字体，字号，行距，有无边框，字粗，透明度 | 来源设置：同上。 |
| 图标 | 样式， 字号 | |
| 按钮 | 是否显示图标，图标的样式，按钮的名称 | 每增加一个按钮，会生成此按钮唯一的id和点击事件，可设置按钮点击事件触发时的脚本。 |
特别说明：
- 标题和段落支持富文本，可以在里面添加html标签。
- 如
<a style='color:red'></a>, 标签里面需要设置style,class等时，请用 '' 代替 "" 。
- 通过组件配置设置组件的全局特性，见 2 所示
- 设置间距：每个单元的间距，请设置 >= 1 的正整数
- 选中高亮：是否支持选中并高亮显示
- 单项选中：是否单项选中，需勾选 选中高亮 才生效
- 悬浮高亮：单元鼠标悬浮时是否高亮
- 支持排序：单元可通过拖动改变顺序
- 设置分页：分页显示单元，此功能仅在数据源是从数据库获取时有效
- 分页位置：分页器的位置，可为左中右
- 每页数量：分页显示时，每页显示的数量，请设置 >= 1 的正整数
组件支持分层显示，需在数据源中新增 floor 字段：
[{
"key": "value",
"floor": 1
...
}, {
"key": "value",
"floor": 2
...
}...]增加功能详情：
- 是否开启分层显示。若开启分层显示，支持排序功能将失效。
- 可设置按降序还是升序分层。
情况说明：
- 若开启分层显示，组件会读取数据源中
floor字段，若!floor字段，默认此行此字段值为 0。 - 组件会将
floor字段值相同的单元渲染在同一行，不换行。 - 默认为升序分层，即按照
floor字段值从小到大的顺序渲染层级。
- 【事件 ID】onUnitClick
- 【触发时机】单击单元时。
- 【事件 ID】onUnitSelected
- 【触发时机】选中单元时。
- 【事件 ID】onSelectedUnitsChange
- 【触发时机】选中单元变化时。
- 【事件 ID】onUnitIndexChange
- 【触发时机】单元顺序变化时。
- 【事件 ID】随机生成
- 【触发时机】点击按钮时。
- 【事件 ID】onDataComplete
- 【触发时机】数据加载完毕时。
- 【类型】array
- 【说明】所有单元数据
- 【示例】[{"key": "value"}]
- 【类型】number
- 【说明】当前单元序号
- 【示例】0
- 【类型】object
- 【说明】当前单元数据
- 【示例】{"key": "value"}
- 【类型】array
- 【说明】选中单元序号
- 【示例】[1, 2, 3]
- 【类型】number
- 【说明】最后选中单元序号
- 【示例】0
- 【类型】string
- 【说明】按钮事件ID
- 【示例】"button1524448415166"
- 【类型】string
- 【说明】按钮事件名称
- 【示例】"按钮-1"