如何在移动端实现树形列表结构原创
金蝶云社区-丨Nick丨
丨Nick丨
3人赞赏了该文章 6379次浏览 未经作者许可,禁止转载编辑于2022年04月16日 09:45:17

关键词:单据列表、过滤控件

实践此篇文章前,请保证您已阅读 样例 - 左树(基础资料)右表(单据列表) 并已经将该元数据导入环境,否者本文章无法实践

一、需求

树形代购单怎么在移动端展示


image.png

二、思路与方案

我们参考移动端人员f7样式自己实现一下

三、实现过程

  1. 页面绘制如下。三个列表分别为分类、渠道、代购单

    image.png

  2. 上面再加一些联动功能

  3. 代码实现逻辑,监听列表行点击,搜索框等

  4. public class Demo1122Mob extends AbstractMobFormPlugin implements ListRowClickListener, MobileSearchTextChangeListener {
    
    	@Override
    	public void registerListener(EventObject e) {
    		super.registerListener(e);
    		BillList billList_type = this.getControl("kdec_billlistap_type");
    		billList_type.addListRowClickListener(this);
    		BillList billList_channel = this.getControl("kdec_billlistap_channel");
    		billList_channel.addListRowClickListener(this);
    		BillList billList = this.getControl("kdec_billlistap");
    		billList.addListRowClickListener(this);
    		MobileSearch mobileSearch = this.getView().getControl("kdec_mobilesearchap");
    		mobileSearch.addMobileSearchTextChangeListener(this);
    		this.addClickListeners("kdec_label_type","kdec_label_channel");
    	}


  5. 行点击实现过滤和赋值

  6. @Override
    	public void listRowClick(ListRowClickEvent evt) {
    		ListRowClickListener.super.listRowClick(evt);
    		ListSelectedRow row = evt.getCurrentListSelectedRow();
    		BillList billList = (BillList) evt.getSource();
    		String listKey = billList.getKey();
    		if (listKey.equals("kdec_billlistap_type")) {// 类型
    			if (row != null) {
    				Long pk = (Long) row.getPrimaryKeyValue();//获取点击行pk
    				Label labelType = this.getControl("kdec_label_type");
    				labelType.setText(row.getName());
    				BillList billList_channel = this.getControl("kdec_billlistap_channel");
    				billList_channel.getFilterParameter().getQFilters().add(new QFilter("group.id", QCP.equals, pk));//添加过滤
    				this.getView().setVisible(true, "kdec_flex_channel", "kdec_flexpanelap2");
    				this.getView().setVisible(false, "kdec_flex_type");
    				this.getView().updateView();
    			}
    		} else if (listKey.equals("kdec_billlistap_channel")) {// 渠道
    			if (row != null) {
    				Long pk = (Long) row.getPrimaryKeyValue();
    				Label labelType = this.getControl("kdec_label_channel");
    				labelType.setText(row.getName());
    				BillList billList1 = this.getControl("kdec_billlistap");
    				billList1.getFilterParameter().getQFilters().add(new QFilter("kdec_channel.id", QCP.equals, pk));
    				this.getView().setVisible(true, "kdec_flexpanelap3", "kdec_label_channel", "kdec_flexpanelap");
    				this.getView().setVisible(false, "kdec_flex_channel");
    				this.getView().updateView();
    			}
    		} else if (listKey.equals("kdec_billlistap")) {// 渠道
    			if (row != null) {
    				Long pk = (Long) row.getPrimaryKeyValue();
    				MobileBillShowParameter showParameter = new MobileBillShowParameter();
    				showParameter.setFormId("kdec_demo1111tree_mob");
    				showParameter.getOpenStyle().setShowType(ShowType.Floating);
    				showParameter.setPkId(pk);
    				this.getView().showForm(showParameter);
    			}
    		}
    	}



四、效果图

image.png



五、开发环境版本

4.0及以上

六、注意事项

布局以及如何实现回跳转

思考:

如何实现模糊查询

七、参考资料

开发平台

学习成长中心




赞 3