表格|多选和批量操作( 二 )


表格|多选和批量操作

4)启用和禁用
如果jinyong列的值为启用,那我们就显示开关的开状态,并且隐藏关状态;否则我们就隐藏开状态,显示关状态,因为我们的开关按钮默认是关的状态,所以后面否则的交互也可以不用写,因为只要对应表格里的文字不是启用,就自动显示关状态。
表格|多选和批量操作

【 表格|多选和批量操作】5)触发交互
在中继器加载完成后(Item.isLast==true),我们还要触发记录文本单击时的交互,来判断是否需要选中表头的全选按钮。
2. 记录文本鼠标单击时交互这里我们需要分两种情况,第一种是记录文本的值等于中继器可以看见的行数,即(this.text==LVAR1.visibleItemCount),如果这种情况成立,那么就设置表头里面的动态面板的状态为选中状态;否则则为未选中的状态。这里解释一下为什么要用中继器可见行数,因为后续还可能添加搜索、筛选、分页的情况,如果不是选可视行数,那个时候就会出现问题。
表格|多选和批量操作

3. 中继器表格内多选按钮鼠标单击时交互如果点击的是未选中的多选框,这里我们直接用更新行事件,更新当前行的xuanzhong列值为1,因为上面的交互,当它的值变为1时,就会重新加载,在中继器每项加载时,xuanzhog的值等于1,就会把该行选中,这里是灵活的运用了中继器里的值控制是否选中。
表格|多选和批量操作

如果点击的是已选中的多选框,这里我们同样用更新行事件,更新当前行的xuanzhong列的值为0,这样在中继器自动加载时就会变回未选中的状态。
表格|多选和批量操作

4. 中继器表格内开关按钮鼠标单击时交互当开关按钮显示的是禁用状态时,点击“关”按钮时,我们用更新行事件,更新该行jinyong列的值为启用,这样中继器自动加载的时候,因为该行的值为禁用,所以开关的状态就会自动由关变成开。
同样的,当开关按钮显示的是启用状态时,点击“开”按钮时,我们用更新行事件,更新该行jinyong列的值为禁用,这样在中继器自动加载的时候,开关的状态也自动会变成关。
5. 表头全选按钮鼠标单击时交互如果点击的是未选中的全选按钮,相当于需要全选下面的内容,所以我们也是用更新行的事件,更新的条件是中继器内可见的行,然后将xuanzhong列的值更新为1,这样中继器自动重新加载时就可以全选可以看到的行。这里用可视的行的原因和前面一样,因为后续还可能添加搜索、筛选、分页的情况,如果不是选可视行,那个时候就会出现问题。
完成之后还要设置该动态面板到选中的状态。
表格|多选和批量操作

如果点击的是未选中的全选按钮,相当于需要取消下面全部内容的选中,所以我们也是用更新行的事件,更新的条件是中继器内可见的行,然后将xuanzhong列的值更新为0,这样中继器自动重新加载时就可以将可以看到的行全部取消选中。完成之后还要设置该动态面板到未选中的状态。
表格|多选和批量操作

6. 批量按钮鼠标单击时事件1)判断是否有选中内容
点击批量处理按钮时,我们首先要判断是否有内容被选中,如果没有选中,我们先显示提示弹窗,这一部的判断是4个按钮都一样的。那么我们怎样判断是否已经有内容被选中呢?前面我们提到了记录文本的作用,就是可以记录有多少行内容被选中,如果没有内容被选中,记录文本的值==0,这时我们显示提示弹窗即可。