使用AstroZero在前端表格中增删改对象数据

期望实现效果

通过添加一个工具栏，在前端页面实现对象数据的增加、删除和修改。例如，在标准页面的表格中，增加、删除和修改数据时，页面关联的后台对象数据也会随之更改。

最终实现效果：双击demoName中的数据栏，可以对数据进行编辑。编辑后，单击“保存”按钮，可发现表格中数据已经被更新，同时后台对象也已被更新。选择对应的表格列，单击“删除”按钮，确认删除。删除成功后，后台对象中的数据也会随之删除。

图1 在页面更新数据

图2 对象中数据也随之更新

图3 执行删除操作

图4 页面中数据被删除

图5 对象中数据也随之删除

功能实现方法

1. 创建一个低代码应用。
   1. 参考授权用户使用AstroZero并购买实例中操作，申请AstroZero免费试用或购买商业实例。
   2. 实例购买后，在AstroZero服务控制台的“主页”中，单击“进入首页”，进入应用开发页面。
   3. 在“应用”中，单击“新建低代码应用”或单击，进入新建低代码应用页面。
   4. 在新建低代码应用页面，应用类型选择“标准应用”，单击“确定”。
   5. 输入应用的标签和名称，单击“新建”，即可进入应用设计器。
      图6 创建一个空白应用
      

      表1 新建空白应用参数说明

      参数	说明	示例
      标签	新建应用的标签，长度不能超过80个字符。标签是应用在系统中的唯一标识，创建后不支持修改。	我的第一个应用
      名称	新建应用的名称，输入标签值后单击该参数的输入框，系统会自动生成应用的名称，同时自动在名称前，添加命名空间__。命名要求如下： 长度不能超过31个字符，包括前缀命名空间的长度。 名称前的内容为命名空间，在AstroZero中为了避免不同租户间数据的重名，租户在首次创建应用时需要先定义一个命名空间。一个租户只能创建一个命名空间，创建后不支持修改。 必须以英文字母开头，只能由英文字母、数字或单下划线组成，且不允许以下划线结尾。	A

2. 创建对象“demoData”，并为对象添加字段和数据。
   1. 在应用设计器的左侧导航栏中，选择“数据”，单击对象中的“+”。
   2. 设置对象的名称和唯一标识为“demoData”，单击“确定”。
      图7 创建对象demoData
      

   表2 新建demoData对象参数说明

   参数	说明	示例
   对象名称	新建对象的名称，创建后可修改。 取值范围：1~80个字符。	demoData
   唯一标识	新建对象在系统中的标识，创建后不支持修改。命名要求如下： 长度不能超过63个字符，包括前缀命名空间的长度。 标识前模糊掉的内容为命名空间，在AstroZero中为了避免不同租户间数据的重名，租户在首次创建应用时需要先定义一个命名空间。一个租户只能创建一个命名空间，创建后不支持修改。 必须以英文字母开头，只能由英文字母，数字和下划线组成，且不能以下划线结尾。	demoData

   3. 在已创建的对象中，单击，进入对象详情页面。
      图8 选择编辑按钮
      
   4. 在“字段”页签，单击“添加”，为对象添加demoName字段。
      图9 添加demoName字段
      

      表3 添加demoName字段参数说明

      参数	说明	示例
      显示名称	新建字段的名称，创建后可修改。 取值范围：1~63个字符。	demoName
      唯一标识	新建字段在系统中的标识，创建后不支持修改。命名要求如下： 长度不能超过63个字符，包括前缀命名空间的长度。 必须以英文字母开头，只能由英文字母，数字和单下划线组成，且不能以下划线结尾。	demoName
      字段类型	单击，在弹出的页面中，根据页面提供的参数解释，选择新建字段所属的类型。	文本

   5. 在“字段”页签，再次单击“添加”按钮，添加demoId字段。
      图10 添加demoId字段
      
   6. 选择“数据”页签，单击“添加”，为对象添加数据。
      图11 为对象添加数据
      

3. 新建对象模型。
   1. 在应用设计器的左侧导航栏中，选择“界面”，单击页面后的“+”。
   2. 输入页面的标签和名称，单击“添加”，新建一个标准页面。
      图12 新建一个标准页面
      

      表4 标准页面参数说明

      参数	说明	示例
      标签	标准页面的标签名，创建后可修改。 取值范围：1~64个字符。	page01
      名称	标准页面的名称，名称是标准页面在系统中的唯一标识，创建后不可修改。命名要求如下： 长度不能超过64个字符，包括前缀命名空间的长度。 必须以英文字母开头，只能由英文字母，数字和单下划线组成，且不能以下划线结尾。	page01

   3. 在标准页面的底部，单击“模型视图”，从设计视图切换到模型视图。
      图13 单击模型视图
      
   4. 单击“新增模型”，输入模型名称（如demo）、“来源”选择“对象”，单击“下一步”。
      图14 新建模型
      
   5. 选择3中创建的对象和添加的字段，单击“下一步”。
      图15 选择对象和字段
      
   6. 单击“确定”，完成模型的创建。

4. 返回设计视图页面，新建表格关联模型。
   1. 在标准页面的底部，单击“设计视图”，从模型视图切换回设计视图。
   2. 在标准页面中，拖入一个表格组件。
      图16 拖入表格组件
      
   3. 选中表格组件，在“属性 > 数据绑定 > 值绑定”中，单击。
   4. 选中3中创建的模型，单击“确定”。
      图17 选择模型
      

5. 添加工具栏。
   1. 选中表格组件，在“属性 > 表格区块”中，单击工具栏后的“添加”，添加一个工具栏。
      图18 添加工具栏
      
   2. 在扩展属性中，开启“可编辑”。
      图19 开启可编辑
      
   3. 将demoName、demoId列设为可编辑。
      在已添加列中，单击demoName后的，将列设置为可编辑。按照上述操作，将demoId列也设置为可编辑。

      图20 将列demoName设置为可编辑
      

6. 单击页面上方的，保存页面。
7. 保存成功后，单击页面上方的，查看页面配置效果。