表单容器

在之前的示例中，表格数据的增加、删除和查询都是通过工具栏按钮实现的，尤其是查询，还需要配合弹层才能实现，相对而言略微有点繁琐，且不太直观。某些情况下，如果给表格直接加上表单，用户体验可能会更好一些。这就需要用到表单容器了。

仍然打开数据表格页面的设计窗口，点击“添加容器”，容器类型选择为“表单容器”，数据目标为“容器1”（也就是第1个表格面板）：

容器添加完成之后，就跟普通的表单面板一样，在它里面继续添加表单元素：

在这个表单容器里，我们添加了4个表单和4个按钮。表单容器配置完成之后，回到名为“容器1”的表格面板，双击并进到头部工具栏设置项，做如下设置：

在这里主要做了2个工作：第一是将刚刚创建的表单容器绑定到“上方表单工具栏”；第二是将“左侧按钮工具栏”中的增加按钮和查询按钮删除，因为在表单容器里已经有了，所以没必要重复。

点击“确定”，重新生成代码并刷新页面，效果如下图所示：

在这里，表格的左侧按钮工具栏已经变成了2个，那新绑定的容器表单呢？请注意观察右上角：当表格面板绑定了表单容器时，默认会在标题右侧加上工具栏的展开/收缩按钮。点击该按钮，表单项会在展开和收缩之间进行切换。默认情况下，表单项是自动展开的，如下图所示：

当表单项展开的时候，点击“收起工具栏”又可将所有表单项收起。这样做的目的，是为了最大限度的节省屏幕空间，不要让表单抢去了数据表格的中心地位。如果你希望页面在初次加载的时候就自动收缩所有表单项，只要在表单属性中取消勾选“自动展开表单项目”即可。如下图所示：

同样的道理，如果你不希望每个表单占据一行，可以勾选其中的“行内模式”选项，当然也可以给按钮加上按钮组效果并重新指定显示位置。如下图就是对表格容器重新做了配置之后的展开效果：

通过表单容器与表格面板的结合，无需弹层即可实现对表格数据的增删改查操作。删除和重置加载条件，仍然沿用之前的表格工具栏，现简单说明一下增改查的用法。