一种低代码平台中实现布局容器内外数据联动方法及系统技术方案

本公开属于数据处理技术领域，具体提供了一种低代码平台中实现布局容器内外数据联动方法及系统，其中方法包括：为低代码项目创建模板页面；创建流式布局，数据定义为

【技术实现步骤摘要】
一种低代码平台中实现布局容器内外数据联动方法及系统


[0001]本公开涉及数据处理
，特别涉及一种低代码平台中实现布局容器内外数据联动方法及系统
。

技术介绍

[0002]在低代码平台中常使用响应式布局来适应不同的屏幕尺寸，这可以使用
CSS
媒体查询和弹性布局（如
flexbox、grid
或行列布局）来实现
。
在目前主流的表单类型模板的设计中行列布局是常用的布局方法
。
低代码中的行列布局，即将页面划分成若干行，每一行则为一个组件，即
layout=[item1,item2,item3...]的数据结构，其中
item1
代表占据第一行的组件，
item2
代表占据第二行的组件
。
这样通过拖拽出来的组件就会整齐的向下排列
。
然而，低代码平台在日常使用中不光是这种简单的组件竖向堆叠排列，还需要将几个组件通过横向组合排列，这样单纯的行列布局就不能方便的实现此种需求，所以为了满足以上需求就需要一种布局容器，将组件进行横向间随机拖拽组合生成局部布局
。
行列布局中组件间的联动是通过监听当前行布局
layout
中组件的状态进行数据管理的，当出现布局容器后就出现组件嵌套的情况，如何避免容器中组件与容器外部组件间联动出现嵌套导致数据监听性能消耗较大甚至失效的问题，是目前亟待解决的技术难题
。

技术实现思路

[0003]本公开旨在至少解决现有技术中存在的技术问题之一，提出了一种低代码平台中实现布局容器内外数据联动方法及系统
。
[0004]第一方面，本公开提供了一种低代码平台中实现布局容器内外数据联动方法，包括以下步骤：
S1
，为低代码项目创建模板页面；
S2
，创建流式布局，数据定义为
layout
；
S3
，将布局容器从左侧工具栏拖拽至流式布局中，生成多列可拖拽区域，得到新布局容器，并生成数据结构
layoutContainer
；
S4
，在所述新布局容器中生成相应的组件；
S5
，将新布局容器中的组件生成在最外层的模板页面中，并将
layoutContainer 中的布局
layout
补齐
。
[0005]优选地，所述
S3
具体包括：布局容器默认为4列，每列又是可拖拽的容器，随后可将左侧的其他组件拖拽至每列的可拖拽容器中，完成相关布局得到新布局容器
。
[0006]优选地，所述
S3
中的数据结构
layoutContainer = { 1: [ //
每个可拖拽区域的组件布局集合 ], 2:[ ], 3:[ ], 4:[ ]}。
[0007]优选地，所述
S4
具体包括：通过将其他组件拖拽至所述新布局容器中即可生成相应组件
。
[0008]优选地，所述
S4
具体包括：将组件拖拽至布局容器的第一列时，则会将布局容器中的数据结构
layoutContainer
变为：
layoutContainer = {1:[item11], 2:[ ], 3:[ ], 4:[ ]},
将另一组件继续拖拽至第一列则
layoutContainer = {1:[item11
，
item21], 2:[ ], 3:[ ], 4:[ ]},
以此类推，将组件拖至第三列时则
layoutContainer = {1:[item11
，
item21], 2:[ ], 3:[item13 ], 4:[ ]}。
[0009]优选地，所述
S5
具体包括：
S51
，通过补齐算法将
layoutContainer 中的布局补齐，通过占位
item
，在以后的
layout
中生成空白的占位元素，
layoutContainer = {1:[item11
，
item21], 2:[
占位
item12
，占位
item22], 3:[item13
，占位
item32], 4:[
占位
item14 ，占位
item24]}。
[0010]优选地，所述
S51
之后还包括
S52
：在
layoutContainer 中的
item11
组件生成至
layout
时，将占据
layout
布局中的第一行的第一列，
item21
将占据第二行第一列，占位
item12
将占据第一行第二列，则在
layout
中顺序为 layout = [item11, item12, item13, 占位
item14, item21...]，所以在此步需将数据结构
layoutContainer 中数组矩阵通过转秩算法生成新的
layout。
[0011]优选地，所述
S52
之后还包括
S53
：在渲染模板页面时只加载
layout
中的数组，隐藏布局容器，但是将布局容器的位置由布局容器生成在
layout
中的组件代替，以将
layout
模板布局扁平化
。
[0012]优选地，所述
S53
还包括：监听
layout
中各组件的值
value
的变化，当某个组件的值发生变化时，则通知依赖了该组件的其他组件，并执行更新
value
的操作
。
[0013]本专利技术还提供了一种低代码平台中实现布局容器内外数据联动系统，所述系统可用于实现上述低代码平台中实现布局容器内外数据联动方法，所述系统包括：模板创建模块，配置为低代码项目创建模板页面；布局创建模块，配置为创建流式布局，数据定义为
layout
；布局容器生成模块，配置为将布局容器从左侧工具栏拖拽至流式布局中，生成多列可拖拽区域，得到新布局容器，并生成数据结构
layoutContainer
；组件生成流式布局在所述新布局容器中生成相应的组件；补齐模块，配置为将新布局容器中的组件生成在最外层的模板页面中，并将
layoutContainer 中的布局
layout
补齐
。
[0014]与相关技术相比较，本公开具如下有益效果：
1.
通过布局容器可以在本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.
一种低代码平台中实现布局容器内外数据联动方法，其特征在于，包括以下步骤：
S1
，为低代码项目创建模板页面；
S2
，创建流式布局，数据定义为
layout
；
S3
，将布局容器从左侧工具栏拖拽至流式布局中，生成多列可拖拽区域，得到新布局容器，并生成数据结构
layoutContainer
；
S4
，在所述新布局容器中生成相应的组件；
S5
，将新布局容器中的组件生成在最外层的模板页面中，并将
layoutContainer 中的布局
layout
补齐
。2.
根据权利要求1所述的低代码平台中实现布局容器内外数据联动方法，其特征在于，所述
S3
具体包括：布局容器默认为4列，每列又是可拖拽的容器，随后可将左侧的其他组件拖拽至每列的可拖拽容器中，完成相关布局得到新布局容器
。3.
根据权利要求2所述的低代码平台中实现布局容器内外数据联动方法，其特征在于，所述
S3
中的数据结构
layoutContainer = { 1: [ //
每个可拖拽区域的组件布局集合 ], 2:[ ], 3:[ ], 4:[ ] }。4.
根据权利要求1所述的低代码平台中实现布局容器内外数据联动方法，其特征在于，所述
S4
具体包括：通过将其他组件拖拽至所述新布局容器中即可生成相应组件
。5.
根据权利要求1所述的低代码平台中实现布局容器内外数据联动方法，其特征在于，所述
S4
具体包括：将组件拖拽至布局容器的第一列时，则会将布局容器中的数据结构
layoutContainer
变为：
layoutContainer = {1:[item11], 2:[ ], 3:[ ], 4:[ ] },
将另一组件继续拖拽至第一列则
layoutContainer = {1:[item11
，
item21], 2:[ ], 3:[ ], 4:[ ]},
以此类推，将组件拖至第三列时则
layoutContainer = {1:[item11
，
item21], 2:[ ], 3:[item13], 4:[ ] }。6.
根据权利要求1所述的低代码平台中实现布局容器内外数据联动方法，其特征在于，所述
S5
具体包括：
S51
，通过补齐算法将
layoutContainer 中的布局补齐，通过占位
item
，在以后的
layout
中生成空白的占位元素，
layoutContainer = {1...

【专利技术属性】
技术研发人员：边赟，崔喆，肖庆，陈章立，李玉良，王海，王瑜，
申请(专利权)人：成都中科极云软件有限公司，
类型：发明
国别省市：