日常开发中有时需要用到左树右表f7,本例参照费用报销单的费用类型f7来实现一个左树右表f7
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类中返回左树的数据,数据的格式可以参考在线帮助文档树的构造那块: