如何实现移动列表数据行默认折叠，点击后展开

如何实现移动列表数据行默认折叠，点击后展开原创

范老师加油

1人赞赏了该文章 3,309次浏览编辑于2022年04月14日 18:47:08

摘要由AI智能服务提供

本文介绍了在移动列表界面实现折叠展开功能的需求、思路、实现过程及注意事项。需求是在列表页面默认折叠每行，只显示一两个关键字段，点击后可展开其他字段，再次点击进入修改页面。实现通过插件和配置，利用界面规则和插件事件控制折叠状态，并通过页面缓存记录展开的单据编号。注意这是过渡方案，建议前端实现以提高性能。

关键词：界面规则,移动列表，折叠展开

一、需求

在移动列表里面, 因列表展示字段过多,需求是要把列表页面的每行都折叠起来,只展示一两个关键字段(比如说单据号或其他),之后在需要查看的时候,点击这个关键字段,会把其余折叠的字段展示出来,如果需要修改,再点击一次就进入修改页面.

完成这个需求是需要通过插件和配置来共同操作的.

二、思路与方案

实现思路, 我们来一步步拆解需求,

第一步,进入页面默认折叠,这步我们可以使用列表插件的beforeCreateListDataProvider事件配合界面规则实现,通过插件事件生成一个折叠标识(kded_iscollapse),因为初始化是折叠的,这步的标识都会设为Y,界面规则再跟根据这个标识来隐藏不必要的字段,这样就实现了折叠的需求.

第二步,在进入列表页面后,对某一行点击之后展开,这步我们是通过列表的行点击listRowClick事件来实现的, 在行点击里面,我们默认折叠状态的,也就是页面缓存是没有记录这个单据编号的,而点击一次后, 页面缓存会记录这个单据编号的,同时页面也会刷新,而此时beforeCreateListDataProvider也会判断页面缓存是否有记录单据编号,如果记录了,就是要展开的数据,则折叠标识就不会设为Y,而页面缓存没有的单据编号,依然会被设为Y,继续折叠着.

第三步,我们对展开后的数据再次点击,这步里面他会跳到修改页面,这步是标准的操作,我们插件的代码不用做任何干预.

三、实现过程

1 准备工作: 首先我们来构建页面

表单页面 ,我们在这里需要添加一个是否折叠的文本字段,并设置为不可见,这个字段不承载业务涵义的字段,只是为了移动列表中的界面规则生效而添加的

同样在移动列表页面也把这些字段添加上

构建完页面下面就是实现方案了,

2 首先是第一步, 配置界面规则:

主要逻辑就是当是否折叠为Y时显示控件,其他情况下隐藏控件

3 在移动列表添加插件,编写插件代码

import java.util.EventObject;
import kd.bos.dataentity.entity.DynamicObject;
import kd.bos.dataentity.entity.DynamicObjectCollection;
import kd.bos.entity.datamodel.ListSelectedRow;
import kd.bos.form.events.BeforeCreateListDataProviderArgs;
import kd.bos.list.BillList;
import kd.bos.list.events.ListRowClickEvent;
import kd.bos.list.plugin.AbstractMobListPlugin;
import kd.bos.mvc.list.ListDataProvider;
import kd.bos.mvc.list.MobileListView;
 
public class TestMobListPlugin2 extends AbstractMobListPlugin{
         public void registerListener(EventObject e) {
                   // 添加实体对象列表控件选择行操作的监听
                   BillList billList = this.getView().getControl("billlistap");
                   billList.addListRowClickListener(this);
         }
          /**
     * （通用）获取数据 - 数据重新组装
     */
         @Override
         public void beforeCreateListDataProvider(BeforeCreateListDataProviderArgs args) {
                   super.beforeCreateListDataProvider(args);
                   args.setListDataProvider(new ListDataProvider() {
                            @Override
                            public DynamicObjectCollection getData(int arg0, int arg1) {
                                     // 获取列表数据
                                     DynamicObjectCollection collection = super.getData(arg0, arg1);
                                     for (DynamicObject dynObj : collection) {
                                               String flag = getPageCache().get(dynObj.getString("billno"));
                                                //默认给是否折叠加上Y的标识,如果页面缓存记录了则不加
                                               if (!"N".equals(flag)) {
                                                        dynObj.set("kded_iscollapse", "Y");
                                               }
                                     }
                                     return collection;
                            }
                   });
         }
   
    @Override
         public void listRowClick(ListRowClickEvent evt) {
             ListSelectedRow currentListSelectedRow = evt.getCurrentListSelectedRow();
             String billno=currentListSelectedRow.getBillNo();
             String flag= this.getPageCache().get(billno);
             if("N".equals(flag)) {//如果是N的话,说明已经展开了
                       //这步是标准的操作,我们插件的代码不用做任何干预
             }else {
                       evt.setCancel(true);
                       this.getPageCache().put(billno, "N");//单据编号加入缓存,状态就改成为展开了
                       MobileListView listview =(MobileListView) this.getView();
                       listview.refresh();//刷新页面
             }
         }
}