表格要实现的功能
- 点击编辑按钮，进入编辑状态
- 点击保存按钮，更新当前行数据
- 点击删除按钮，删除当前行数据
- 某一行右键，在鼠标指针所在位置显示菜单
- 点击前面插入，在鼠标所在行前插入新行并进入编辑状态
- 点击后面插入，在鼠标所在行后插入新行并进入编辑状态
实现步骤
-
添加一个中继器，并命名为List，双击中继器，在编辑区放入5个矩形（编辑区已有一个矩形）
- 全选前面的4个矩形，点鼠标右键，选择转换为动态面板，命名为“RowPanel”
- 双击动态面板将State1名称改为“Show”，点击这个状态后，点击复制复制状态
-
将新出现的状态命名为“Edit”，并且将状态中的所有矩形的命名去除，再添加三个文本框到前三个矩形上，分别命名。
现在中继器的元件组成如下：
-
在属性中为中继器“List”添加一些数据
-
选中中继器，在每项加载时给表格设置数据。让列表能够显示中继器的数据。
-
在页面编辑区，添加4个矩形作为表头
-
点击编辑按钮，切换编辑状态
编辑按钮添加【鼠标单击时】为“RowPanel”【设置面板状态】为“Edit”，并且通过【获取焦点】的动作，将光标进入姓名输入框“NameInput”。
-
实现点击保存按钮时，更新当前行数据
-
点击删除按钮，更新当前行数据
-
添加两个矩形，作为菜单选项，并转换为动态面板（也可以组合）；命名为“MenuPanel”后隐藏。
-
实现中继器某一行中点击鼠标右键时，在鼠标指针所在位置显示菜单。
为中继器中的动态面板“RowPanel”添加【鼠标右击时】的交互，设置动作为【移动】选项菜单“MenuPanle”【到达】鼠标指针所在的位置；并且，【显示】选项菜单“MenuPanle”。
不过，这里为了能够在当前行的前后进行插入，我们需要通过全局变量“Temp”记录一下当前行的编号，也就是前面提到的数据集中的“IndexText”。
-
实现点击菜单中前面插入选项时，在行前插入新行并为编辑状态。
提示：此处为前面插入的关键步骤。
我们思考一下：在某一行的前面插入一个新行，从编号的角度来说，当前行的编号和新插入行的编号应该是什么样的呢？
我想是这样：插入位置以及之后每一行的编号都要增加1，而新插入行的编号为插入位置的行编号。
所以，在这里，我们需要处理行的编号，将所有大于等于插入位置行编号的行，现有编号都增加1。
这个处理，通过按【条件】【更新行】动作来实现。
提示：还记得我们将插入位置的行编号存入到了“Temp”变量中吗？
然后，通过【添加行】添加一个编号为插入位置行编号的行。
最后，别忘了【隐藏】选项菜单“MenuPanel”。
-
实现点击菜单中后面插入选项时，在行后插入新行并为编辑状态。
提示：此处为后面插入的关键步骤。
后面插入和前面插入的过程差不多。
区别在于改变编号的逻辑。
后面插入时，插入位置自身编号不变，所以是将行编号大于插入位置编号的行进行编号增加1的操作。
然后，将变量中保存的编号也需要增加1，和新插入行的编号保持一致。
并且，插入的行的编号也是插入位置行编号增加1之后的编号，即变量中的新编号。
不过，到这里，大家会发现插入的行，还是在列表最下方出现。
-
添加排序
我们还需要对列表按编号升序排列，这个排序效果应该是中继器加载时就能够生效的。
-
设置插入的行为编辑状态
【添加行】动作会导致中继器列表刷新，所有行都变为正常显示状态。
如果想在插入行之后，新行为编辑状态，我们需要在中继器【每项加载时】，如果行编号是变量中保存的行编号（即新插入行的行编号），将动态面板“RowPanel”的状态设置为“Edit”。
这里要注意，因为是新增了一个用例，“Case2”会自动为“Else If”，需要在用例名称上点击鼠标右键，选择【转换为IF…】的选项进行转换。
-
清空变量
当完成插入行的数据编辑，点击保存按钮时，中继器列表也会刷新，此时需要清空变量，以免因变量中存有编号，将对应的行转为编辑状态。
网友评论