f7-左树右表f7

1.问题描述

日常开发中有时需要用到左树右表f7,本例参照费用报销单的费用类型f7来实现一个左树右表f7

2.问题解决

2.1 配置页面新增一个自定义f7组件:

表格必输配置

2.2 新建一个F7模块的js,例子中是promptSpecial_ExpenseType.js,该js文件路径为webviews\extend\custom\js(注: 我这里放的是一个txt,可以下载下来把后缀改成js):

    /*******************************************************************************
	 * jQuery UI promptSpecial_ExpenseType
	******************************************************************************/

	/*  这里是定义模块的写法,
		custom/js/promptSpecial_ExpenseType  模块的位置(必须是webviews下的)和模块名,所以该js 文件名必须为 promptSpecial_ExpenseType.js 
		["base","waf","promptSpecial"]  为新定义的模块 所依赖的模块
		
		$.widget("ui.wafPromptSpecial_ExpenseType", $.ui.wafPromptSpecial,{});
		意指 我此处定义的 ui.wafPromptSpecial_ExpenseType 继承 $.ui.wafPromptSpecial,此句会把该模块注册到Jquery对象上
		
		其余格式固定
	*/
	mod.defineModule("extend/custom/js/promptSpecial_ExpenseType",["base","waf","promptSpecial"],function(){
	(function($, undefined) {
		$.widget("ui.wafPromptSpecial_ExpenseType", $.ui.wafPromptSpecial,{
			options: {
				title: "费用类型",// 窗体标题
				rows: 15,//表格显示数据行数
				//defaultSearchItem:"name+number+defOrgUnit.name",
				autoCompleteItem:"name+number+defOrgUnit.name",
				//showDisplayName:true,
				//treeDataUrl 由开发人员按需指定,返回数据有格式要求,我此处使用的eventBus实现的,定义了一个功能,名称是getTreeNodes,uipk为页面的uipk

				treeDataUrl : "/dynamicPage.do?method=doEvent&action=getChildNodes&uipk=com.kingdee.eas.custom.ExpenseTypeF7",
				  
				//query 开发人员按需指定
				query : "com.kingdee.eas.cp.bc.app.F7ExpenseTypeQuery",
				tableShrinkToFit : false,
				//将表格设置为不自动缩放,则按照colModel设置的宽度展示,长度超出则显示滚动条。
				//disdisplayColNames 可以规定要显示的字段,但其顺序是query中定义的顺序,该属性与colModel有一个就可以,若同时设置了这两个属性,colModel优先级更高。
				//displayColNames: ["number", "name","typeSimpleName", "description"],
				//colModel 可以指定表头的字段,宽度,显示属性,等等信息,表头字段顺序即为此处的顺序。
				colModel : 
					[{"index":"id","name":"id","label":"ID",
						"width":0,"hidden":true,"align":"left","filter":false,
						"formatter":null,"formatoptions":null,"dateType":"String",
						"entityProName":"id"},
					{"index":"number","name":"number","label":"编码",
						"width":50,"hidden":false,"align":"center",
						"filter":true,"formatter":null,"formatoptions":null,
						"dateType":"String","entityProName":"number"
					},
					{"index":"name","name":"name","label":"名称",
						"width":50,"hidden":false,"align":"center","filter":true,
						"formatter":null,"formatoptions":null,
						"dateType":"String","entityProName":"name"
					},
					{"index":"typeSimpleName","name":"typeSimpleName","label":"简称",
						"width":50,"hidden":false,"align":"center","filter":true,
						"formatter":null,"formatoptions":null,
						"dateType":"String","entityProName":"typeSimpleName"
					},
					{"index":"description","name":"description","label":"描述",
						"width":50,"hidden":false,"align":"center","filter":true,
						"formatter":null,"formatoptions":null,
						"dateType":"String","entityProName":"description"
					}]            
			},
			/*该函数用于当点击树的节点时,返回过滤条件,该方法由开发人员按自己需求进行覆盖
			  注意:选中某个节点时,会把 treeNode.id 传到后台,后台可以在 request.getParameter("parentId") 取到,所以后台想办法取得request即可
			  树 是异步加载的
			*/
			_getTreeNodeFilter: function(){
				var selectedNodes = this.tree.wafTree('getSelectedNodes'),
					ret = "";
				if(selectedNodes.length>0){
					var treeNode = selectedNodes[0];
					ret = "OPERATIONTYPE.id = '" + treeNode.id +  "'";
				}
				//刚刚弹出F7时,没有选中的节点,所以会返回过滤条件为空,因此数据会全部加载
				return ret;
			},
		});
	}(jQuery));
	});

2.3 按此方式定义树表F7模块js的基本格式,其中options和function的具体要求参见js文件,注意在85及以上版本以下_getTreeNodeFilter方法名需要改成_getSpecialFilter。

表格必输配置

2.4 引入该promptSpecial_ExpenseType.js文件:

表格必输配置

2.5 配置页面渲染事件的before插入事件,在该事件中修改f7的类型:

表格必输配置

注意: 图片中的写法是82版本的写法,如果是85版本则自定义f7没有F7Iframe_url属性则需要使用以下这种方式来设置:

表格必输配置

2.6 在上面的截图中我们从url里面获取的我们自定义的f7的模块名。所以还需要在页面配置一下url为customF7=wafPromptSpecial_ExpenseType:

表格必输配置

2.7 在promptSpecial_ExpenseType.js 中 options 对象中有一个属性treeDataUrl,我配置了一个action,用来取树节点的数据,所以还需要配置一个后台功能:

表格必输配置

表格必输配置

2.8 在生成的handler类中返回左树的数据,数据的格式可以参考在线帮助文档树的构造那块:

相关样例