EAS树形分录表单前端性能优化总结(合约规划单据为例)原创
1人赞赏了该文章
266次浏览
编辑于2022年01月04日 18:32:33
EAS树形分录表单前端性能优化总结(合约规划单据为例)
背景:由于我们EAS房地产许多单据采用的是编辑表格显示树形数据,如合约规划、目标成本、动态成本等。如果数据量变大后,界面初始化加载时就会有性能问题,少则2分钟,多则10分钟。用户体验很差。因此我们必须进行此处的性能优化。
优化手段:
单据需要采用平台提供的虚加载模式(不用一次全部加载,只加载当前页的上一页和下一页)。单据改造需要进行如下几点
选中表格 - 高级-分页显示 设置为是
选中表格 - 高级-显示行号 设置为是
选中表格 - 高级-数据折行显示 设置为是
选中表格 - 高级-是否为树表 设置为是,并且必须配置树形列、列表父字段名
添加页面渲染事件
renderBefore代码如下,主要设置冻结列和表格是否虚加载
function(e){ _self.setInitComponentCallBack(function(type, option, el){ var model = pageModule.currentModel; if(type == 'grid') { if(option.id == 'conProgGrid' && option.treeGrid) { option.ExpandColumn = 'simpleName'; option.expColInd = 2; ReCommonUtil.addExpandedForGridData(model.entries); option.colModel[0].frozen = true; option.colModel[1].frozen = true; }else if(option.id == 'costAccountGrid' && option.treeGrid) { option.expColInd = 3; option.colModel[0].frozen = true; option.colModel[1].frozen = true; } option.gridview = false; //开启分页的情况设置为树表虚模式滚动加载 if(option.includePager){ option.treeVirtual = true; option.pagerModel = "virtual"; }else{ option.pagerModel = "block"; } // 设置冻结列 option.frozenColumn = true; option.frozenColumns = true; option.isFrozenColumn = true; option.parentId = 'parent.id'; } }); }
以上设置完成后,需要设置和平台开发确认(罗君、丁陈)确认web框架最新补丁,需要打平台最新补丁。
赞 1
1人点赞
还没有人点赞,快来当第一个点赞的人吧!
打赏
0人打赏
还没有人打赏,快来当第一个打赏的人吧!
推荐阅读
您的鼓励与嘉奖将成为创作者们前进的动力,如果觉得本文还不错,可以给予作者创作打赏哦!
请选择打赏金币数 *
10金币20金币30金币40金币50金币60金币
可用金币: 0