关键词：树形控件、页签控件

一、需求

有些产品需要展示一种左侧是树，右侧对应展示树节点下对应的一下单据或者基础资料列表，一种树形的展示形式

二、思路与方案

简单的属性基础资料肯定不能满足，我们需要自己绘制一张动态表单，利用代码showform的形式展示数据列表，这样就可以在每一个展示的页面中操作增删改查

三、实现过程

1. 先新建一个单据（标识：kdec_demobillfortab），为了展示在总页面的页签中(可以根据自己业务需求)
   

2. 新建一个基础资料（标识：kdec_basefortab），为了展示在总页面的页签中(可以根据自己业务需求)

3. 新建一个动态表单（标识：kdec_tabpagedemo）

4. 在页面添加分割容器，调整布局

5. 左侧右侧各加一个flex调整布局为水平充满

6. 左侧flex中加一个树型控件，用来当做左树，数据由插件构建

7. 右侧添加页签控件，加四个页签（根据自己需求增减）

8. 每个页签也中加一个flex，同样水平充满的布局

9. 代码实现构建左树，以及右侧每个页签点击时showform不同的form页面
   

10. /**
    	 * 树节点点击事件
    	 */
    	@Override
    	public void treeNodeClick(TreeNodeEvent evt) {
    		TreeNodeClickListener.super.treeNodeClick(evt);
    		String nodeId = evt.getNodeId().toString();
    		ListShowParameter showParameter = new ListShowParameter();
    		showParameter.getOpenStyle().setShowType(ShowType.InContainer);
    		if (StringUtils.equals("0-1-1", nodeId)) {// 单据1暂存态数据
    			showParameter.getOpenStyle().setTargetKey("kdec_flex_billlist");
    			showParameter.setBillFormId("kdec_demobillfortab");
    			ListFilterParameter listFilterParameter = new ListFilterParameter();
    			listFilterParameter.setFilter(new QFilter("billstatus", QCP.equals, "A"));// 暂存
    			showParameter.setListFilterParameter(listFilterParameter);
    		} else if (StringUtils.equals("0-1-2", nodeId)) {// 单据1提交态数据
    			showParameter.getOpenStyle().setTargetKey("kdec_flex_billlist");
    			showParameter.setBillFormId("kdec_demobillfortab");
    			ListFilterParameter listFilterParameter = new ListFilterParameter();
    			listFilterParameter.setFilter(new QFilter("billstatus", QCP.equals, "B"));// 提交
    			showParameter.setListFilterParameter(listFilterParameter);
    		} else if (StringUtils.equals("0-1-3", nodeId)) {// 单据1审核态数据
    			showParameter.getOpenStyle().setTargetKey("kdec_flex_billlist");
    			showParameter.setBillFormId("kdec_demobillfortab");
    			ListFilterParameter listFilterParameter = new ListFilterParameter();
    			listFilterParameter.setFilter(new QFilter("billstatus", QCP.equals, "C"));// 审核
    			showParameter.setListFilterParameter(listFilterParameter);
    		} else if (StringUtils.equals("0-2-1", nodeId)) {// 基礎資料
    			showParameter.getOpenStyle().setTargetKey("kdec_flex_baselist");
    			showParameter.setBillFormId("kdec_basefortab");
    			ListFilterParameter listFilterParameter = new ListFilterParameter();
    			listFilterParameter.setFilter(new QFilter("status", QCP.equals, "A"));// 暫存
    			showParameter.setListFilterParameter(listFilterParameter);
    			Tab tab = this.getView().getControl("kdec_tabap");
    			tab.activeTab("kdec_tabpageap2");
    		}
    		this.getView().showForm(showParameter);
    	}
    
    	/**
    	 * 构建树形节点
    	 */
    	private void treeviewLoad() {
    		final String rootId = "0"; // 根节点id
    		TreeView treeView = this.getControl("kdec_treeviewap");
    		treeView.setCustomeStyles("fs:55");
    
    		Map<String, Object> ctrl = new HashMap<String, Object>();
    		ctrl.put(ClientProperties.FontSize, "18");
    		this.getView().updateControlMetadata("kdec_treeviewap", ctrl);
    
    		TreeNode rootNode = new TreeNode(null, rootId, "全部单据树根节点", true);
    		rootNode.setIsOpened(true);
    		treeView.setRootVisible(false);
    		TreeNode tn1 = new TreeNode(rootId, "0-1", "案例单据1", true);
    		tn1.setIsOpened(true);
    		TreeNode tn2 = new TreeNode(rootId, "0-2", "案例单据2", true);
    		TreeNode tn3 = new TreeNode(rootId, "0-3", "其他", true);
    		// 单据1
    		TreeNode tn11 = new TreeNode("0-1", "0-1-1", "案例单据1(暂存)", false);
    		TreeNode tn12 = new TreeNode("0-1", "0-1-2", "案例单据1(提交)", false);
    		TreeNode tn13 = new TreeNode("0-1", "0-1-3", "案例单据1(审核)", false);
    		tn1.addChild(tn11);
    		tn1.addChild(tn12);
    		tn1.addChild(tn13);
    		// 单据2
    		TreeNode tn21 = new TreeNode("0-2", "0-2-1", "基礎資料(暂存)", false);
    		tn2.addChild(tn21);
    		// 其他
    		TreeNode tn31 = new TreeNode("0-3", "0-3-1", "其他(1)", false);
    		TreeNode tn32 = new TreeNode("0-3", "0-3-2", "其他(2)", false);
    		tn3.addChild(tn31);
    		tn3.addChild(tn32);
    		// 添加到根菜单
    		rootNode.addChild(tn1);
    		rootNode.addChild(tn2);
    		rootNode.addChild(tn3);
    		treeView.addNode(rootNode);
    
    	}
    
    	@Override
    	public void tabSelected(TabSelectEvent arg0) {
    		String tabKey = arg0.getTabKey();
    		if (StringUtils.equals(tabKey, "kdec_tabpageap")) {// 切换页签-单据列表
    			ListShowParameter showParameter = new ListShowParameter();
    			showParameter.setBillFormId("kdec_demobillfortab");
    			showParameter.getOpenStyle().setShowType(ShowType.InContainer);
    			showParameter.getOpenStyle().setTargetKey("kdec_flex_billlist");
    			this.getView().showForm(showParameter);
    		} else if (StringUtils.equals(tabKey, "kdec_tabpageap1")) {// 切换页签-单据
    			BillShowParameter showParameter = new BillShowParameter();
    			showParameter.setFormId("kdec_demobillfortab");
    			showParameter.getOpenStyle().setShowType(ShowType.InContainer);
    			showParameter.getOpenStyle().setTargetKey("kdec_flex_bill");
    			this.getView().showForm(showParameter);
    		} else if (StringUtils.equals(tabKey, "kdec_tabpageap2")) {// 切换页签-基础资料列表
    			ListShowParameter showParameter = new ListShowParameter();
    			showParameter.setBillFormId("kdec_basefortab");
    			showParameter.getOpenStyle().setShowType(ShowType.InContainer);
    			showParameter.getOpenStyle().setTargetKey("kdec_flex_baselist");
    			this.getView().showForm(showParameter);
    		} else if (StringUtils.equals(tabKey, "kdec_tabpageap3")) {// 切换页签-基础资料
    			BaseShowParameter showParameter = new BaseShowParameter();
    			showParameter.setFormId("kdec_basefortab");
    			showParameter.getOpenStyle().setShowType(ShowType.InContainer);
    			showParameter.getOpenStyle().setTargetKey("kdec_flex_base");
    			this.getView().showForm(showParameter);
    		}
    	}

四、效果图

五、开发环境版本

V3.0.006以上

六、注意事项

布局：水平布局，垂直布局，否者看起来只是一小部分展示

多了解一下树形控件以及页签的事件，做好监听以及逻辑实现即可

该样例是针对某伙伴提出的需求做的，希望伙伴们看到以后可以充分学习了解苍穹拥有的能力，将苍穹当做一种工具使用，不要什么都想着有现成的功能实现！

七、参考资料

开发平台

学习成长中心

源代码与元数据在附件中，有需要自取，有用 请点赞 收藏【emoji】