如何开发自定义列表界面-使用分组基础资料实现左树右表展示

如何开发自定义列表界面-使用分组基础资料实现左树右表展示原创

聚宝彭

10人赞赏了该文章 6,834次浏览编辑于2022年08月05日 15:51:13

摘要由AI智能服务提供

本文档描述了在苍穹平台中实现一个具有特定需求的左树右表单据列表界面的方法。需求是展示一个左树右表界面，列表数据支持F7选择，且被选择时仅展示特定节点（tree2）下的所有数据。提供了三种实现方案：自定义单据列表界面、利用平台分组基础资料模板、以及直接使用基础资料模板设计。详述了通过新增实体、注册插件、编写代码实现节点过滤和数据绑定等步骤，并附上了代码示例和效果图。文档还提醒了开发中的注意事项，如字段可见性设置和附件使用说明，最后列出了参考资料。

关键词：列表

一、需求

业务需求需要展示一个左树右表单据列表界面，且该列表数据支持F7选择，被选择时只展示根节点下第一层级的某个节点（含其子子孙孙节点）数据（本例只允许被选择tree2节点下的所有数据）。

二、思路及方案

在苍穹平台中，单据模板的列表默认都不是左树右表形式的。因此，为了实现该需求，第一个方案可参考自定义单据列表界面，用空白动态表单，并放置过滤控件、树形控件、单据列表控件，从而来绘制一个左树右表形式的单据列表界面，然后将该动态表单页面标识注册到目标单据的列表设计器界面的“列表表单模板”&“F7列表表单模板”属性上，接着再开发插件分别去绑定左侧树和右边列表的数据即可。最后，参考样例某单据上的文本字段选择其它业务单据列表中的数据来实现F7数据选择。

第二个方案：考虑到平台提供的分组基础资料模板的列表界面就是左树右表形式的，而其列表设计器的业务属性“列表表单模板”与“F7列表表单模板”分别注册的是 bos_templatetreelist、bos_templatetreelistf7。然后，我们只需将这两个页面的标识分别注册到目标业务单据（即：需要以左树右表列表形式展示的单据）的列表设计器的相同业务属性上，接着与第一种方案一样开发插件实现即可。

第一种方案与第二种区别在于列表设计器界面的业务属性“列表表单模板”&“F7列表表单模板”所绑定的页面是自行绘制的还是平台提供的。

这里，我再提供第三种实现方案。平台提供的基础资料模板中有一种是分组基础资料模板，其列表展现形式就是左树右表形式。从页面继承关系可知，分组基础资料是继承自基础资料，而从插件继承关系又可知，基础资料又是继承自单据（基础资料本身就是一个特殊的单据，详见下图），故我们可以直接用基础资料模板来进行设计业务单据（即：需要以左树右表列表形式展示的单据）。

左树右表列表-页面继承关系1.png

左树右表列表-页面继承关系2.png

三、实现过程

1. 新增一个树形基础资料实体（kdec_treelist_demo1_tree），用于记录左树右表列表界面左侧分组树的数据。

树形基础资料.png

2. 新建一个分组基础资料实体（kdec_treelist_demo1），用于展示左树右表列表界面。其“分组”字段的业务属性“基础资料类型”绑定第 1 步中创建的树形基础资料。

左树右表列表界面.png

左树右表列表界面-2.png

3. 因本样例是直接通过基础资料类型页面创建的，本身支持F7选择，故只需动态注册插件去实现F7列表界面只允许选择tree2节点下的所有数据。

注意：

插件动态注册请参阅：动态注册页面插件 。

	@Override
	public void refreshNode(RefreshNodeEvent e) {
		// 过滤tree2节点及其子子孙孙节点
		getTreeModel().getTreeFilter().add(new QFilter("number", QCP.like, "tree2%"));
		super.refreshNode(e);
	}
	
	@Override
	public void buildTreeListFilter(BuildTreeListFilterEvent e) {
		TreeNode root = getTreeModel().getRoot();
		List<TreeNode> allTreeNodes = root.getChildren();
		if (allTreeNodes != null && !allTreeNodes.isEmpty()) {
			for (TreeNode treeNode : allTreeNodes) {
				logger.info(">>> 过滤节点 " + treeNode.getLongNumber() + " 的数据 <<<");
				// 以左树节点(及其子子孙孙节点)过滤右表中的业务数据
				e.addQFilter(new QFilter("group", QCP.in, this.getAllSubNodes(treeNode.getId())));
			}
		}
		super.buildTreeListFilter(e);
	}
	
	/**
	 * 查询当前节点的所有子节点的主键
	 * @param nodeId
	 * @return
	 */
	private List<Object> getAllSubNodes(Object nodeId) {
		List<Object> allSubNodes = new ArrayList<Object>();
		allSubNodes.add(nodeId);
		QFilter filter = new QFilter("parent", QCP.equals, nodeId);
		String selectProperties = "id, number, name, parent";
		DynamicObject [] subNodeArr = BusinessDataServiceHelper.load("kdec_treelist_demo1_tree", selectProperties, filter.toArray());
		for (DynamicObject subNode : subNodeArr) {
			List<Object> subNodeIDList = getAllSubNodes(subNode.getPkValue());
			allSubNodes.addAll(subNodeIDList);
			allSubNodes.add(subNode.getPkValue());
		}
		return allSubNodes;
	}